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}
});