0
我有一個三級網格系統，產品展示 - >類別 - >項，其中i擴大產品排看亞格類別和擴大類別行我獲得該項目的網格行與內聯編輯單元格。現在用戶將被要求在項目網格中輸入信息。我有單元驗證，一旦用戶進入編輯模式，但可以選擇在添加之後根本不編輯該行。現在的挑戰是我需要以這種方式驗證整個電網結構。 1），我們將有產品的預定數量（產品= 10） 2）預定義類別的預產品（5類/產品） 3）任意數量的項目與細胞非空單元格數目。jqGrid的三級層次亞格細胞驗證
與按鈕「驗證」我需要通過entore網格系統和第一迭代確認產品 第二確認的數量的類別/無空單元中的項網格的每個產品的數量產品 第三確認，類別數據。 希望有人能幫助我。下面 是我的網格系統的研究與開發
productGrid.jqGrid({
url : 'getList.php?ID=' + ID,
editurl : 'clientArray',
mtype : "GET",
datatype : "json",
page : 1,
regional : lang,
colNames : ['ID','product'],
colModel : [
{ name: 'ID', width: 25, hidden: true },
{ name: 'productID', key: true, editable: true, width: 20 },
],
loadonce : true,
autowidth : true,
//width: 525,
height : 500,
rowNum : 20,
subGrid : true, // set the subGrid property to true to show expand buttons for each row
subGridRowExpanded : showChildGrid, // javascript function that will take care of showing the child grid
subGridOptions : {
expandOnLoad: false, // expand all rows on load
plusicon: "fa fa-plus-circle",
minusicon: "fa fa-minus-circle",
openicon: "ui-icon-arrowreturn-1-e"
},
subGridBeforeExpand: function(divid, rowid) {
var expanded = jQuery("td.sgexpanded", "#progGrid")[0];
if(expanded) {
setTimeout(function(){
$(expanded).trigger("click");
}, 100);
}
},
shrinkToFit: true,
//altRows:true,
//altclass:'myAltRowClass',
sortorder: "asc",
hidegrid:false,
gridview: true,
pgbuttons: false, // disable page control like next, back button
pgtext: null,
viewrecords: true,
pager: progExerGridPager
}).navGrid(progExerGridPager, {edit: false, add: false, del: false, refresh: true, view: false, search:false})
.inlineNav(progExerGridPager,
{edit: true, add: true, del: true, cancel: true, refresh : true, editParams: {keys: true,}, addParams: {keys: true}
});
// the event handler on expanding parent row receives two parameters
// the ID of the grid tow and the primary key of the row subgrid_id
function showChildGrid(parentRowID, parentRowKey) {
var childGridID = parentRowID + "_t";
var childGridPagerID = parentRowKey + "_pager";
// send the parent row primary key to the server so that we know which grid to show
var childGridURL = 'getList.php?programID=' + programID +'&productID=' + parentRowKey;
// add a table and pager HTML elements to the parent grid row - we will render the child grid here
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
editurl: 'clientArray',
mtype: "GET",
datatype: "json",
page: 1,
regional: lang,
caption : "Category " + parentRowKey + " of Product",
colNames: ['categ_id', 'category'],
colModel: [
{ name: 'categ_id', width: 75, hidden: true },
{ name: 'categoryID', key: true, width: 100, editable:true, editrules : { required: true, integer:true, minValue:1, maxValue:7}, },
],
loadonce : true,
autowidth : true,
//width : 500,
height: '100%',
subGrid: true, // set the subGrid property to true to show expand buttons for each row
subGridRowExpanded: showThirdLevelChildGrid, // javascript function that will take care of showing the child grid
subGridOptions : {
expandOnLoad: false, // expand all rows on load
plusicon: "fa fa-plus-circle",
minusicon: "fa fa-minus-circle",
openicon: "ui-icon-arrowreturn-1-e"
},
subGridBeforeExpand: function(divid, rowid) {
// #grid is the id of the grid
var expanded = jQuery("td.sgexpanded", "#" + childGridID)[0];
if(expanded) {
setTimeout(function(){
$(expanded).trigger("click");
}, 100);
}
},
shrinkToFit : true,
// altRows : true,
// altclass : 'myAltRowClass',
sortorder : "asc",
hidegrid : true,
gridview : true,
pgbuttons : false, // disable page control like next, back button
pgtext : null,
viewrecords : true,
pager: '#' + childGridPagerID
}).navGrid('#' + childGridPagerID, {edit: false, add: false, del: false, refresh: true, view: false, search:false})
.inlineNav('#' + childGridPagerID,
{edit: true, add: true, del: true, cancel: true, refresh : true, editParams: {keys: true,}, addParams: {keys: true}
});
}
// the event handler on expanding parent row receives two parameters
// the ID of the grid tow and the primary key of the row
// custom mask definition to allo X in the tempo
//$.mask.definitions['x']='[x-9]';
function showThirdLevelChildGrid(parentRowID, parentRowKey) {
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
var rowID = parentRowID.split('_');
var productID = rowID[1];
// send the parent row primary key to the server so that we know which grid to show
var childGridURL = 'getList.php?programID=' + programID + '&productID=' + productID + '&categoryID=' + parentRowKey;
// add a table and pager HTML elements to the parent grid row - we will render the child grid here
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid({
url: childGridURL,
editurl: 'clientArray',
mtype: "GET",
datatype: "json",
caption : "Item " + parentRowKey + " Product/Category",
regional: lang,
colNames: ['ItemID', 'Name', 'Quantity', 'Range', 'Rate', 'Inventory', 'Type', 'Note'],
colModel: [
{ name: 'ID', key: true, width: 75, hidden: true },
{ name: 'Name', width: 200, editable: false, editrules : { required: true},
cellattr: function (rowId, tv, rawObject, cm, rdata) {
return 'style="white-space: normal;'
},
},
{ name: 'Quantity', width: 70, align: 'center', editable: true, editrules : { required: true, integer:true}},
{ name: 'Range', width: 80, align: 'center', editable: true, edittype:'text', editrules : { required: true},
editoptions: {
dataInit: function (elem) {
$(elem).mask("99~99",{
placeholder :" ",
completed :function(){
// validate the ranges
var repRange = this.val().split("~"),
fromRange = repRange[0],
toRange = repRange[1];
if (fromRange > toRange) {
alert("the lower range cannot be higher than the High range");
// clear the box
this.val("");
}
}
});
}
}
},
{ name: 'Rate', width: 100, align: 'center', editable: true, edittype:'text', editrules : { required: true},
editoptions: {
dataInit: function (elem) {
$(elem).mask("9-9",{
placeholder :" ",
});
}
}
},
{ name: 'Inventory', width: 80, align: 'center', editable: true, editrules : { required: true, integer:true}},
{ name: 'Type', width: 100, align: 'center', editable: true, editrules : { required: true}, edittype: "select", editoptions : {value: exerciseType}},
{ name: 'Note', width: 100, editable: true, edittype:"textarea", editoptions:{rows:"5",cols:"45"}, hidden:true, editrules:{edithidden:true}},
//}
],
recreateForm: true,
loadonce : true,
//onSelectRow : editRow,
autowidth : true,
//width : 'auto',
height : '100%',
shrinkToFit : true,
// altRows : true,
// altclass : 'myAltRowClass',
sortorder : "asc",
hidegrid : false,
gridview : true,
pgbuttons : false, // disable page control like next, back button
pgtext : null,
rownumbers : true, // show row numbers
rownumWidth : 20, // the width of the row numbers columns
viewrecords : true,
pager : "#" + childGridPagerID
}).navGrid('#' + childGridPagerID, {edit: true, add: false, del: false, refresh: true, view: false, search:false})
.inlineNav('#' + childGridPagerID,
{edit: true, add: false, del: true, cancel: true, refresh : true, editParams: {keys: true,}, addParams: {keys: true}
});