jqGrid 三级层次结构子网格单元格验证
jqGrid three level hierarchy subgrid Cell validation
我有一个三级网格系统，产品 -> 类别 -> 项目，我在其中展开产品行以查看子网格类别，并在展开类别行时通过单元格的内联编辑获得项目网格行.现在，用户将需要在项目网格中输入信息。一旦用户进入编辑模式，我就会进行单元格验证，但可以选择在添加该行后根本不编辑该行。现在的挑战是我需要以这种方式验证整个网格结构。
1) 我们将有预定义数量的产品（产品 = 10）
2）预定义类别预产品数量（5个类别/产品）
3) 单元格非空单元格的任意数量的项目。
使用按钮 "validate" 我需要遍历整个网格系统并首先确认产品数量
2确认类别/产品的数量
第三次确认每个产品、类别数据的项目网格中没有空单元格。
希望有人能帮助我解决这个问题。
下面是我的网格系统
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}
});
所以我进行了服务器端验证并将结果显示在网格之外。获得更多控制和更容易实施，特别是在单元格验证部分。
我有一个三级网格系统，产品 -> 类别 -> 项目，我在其中展开产品行以查看子网格类别，并在展开类别行时通过单元格的内联编辑获得项目网格行.现在，用户将需要在项目网格中输入信息。一旦用户进入编辑模式，我就会进行单元格验证，但可以选择在添加该行后根本不编辑该行。现在的挑战是我需要以这种方式验证整个网格结构。 1) 我们将有预定义数量的产品（产品 = 10） 2）预定义类别预产品数量（5个类别/产品） 3) 单元格非空单元格的任意数量的项目。
使用按钮 "validate" 我需要遍历整个网格系统并首先确认产品数量 2确认类别/产品的数量 第三次确认每个产品、类别数据的项目网格中没有空单元格。 希望有人能帮助我解决这个问题。 下面是我的网格系统
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}
});
所以我进行了服务器端验证并将结果显示在网格之外。获得更多控制和更容易实施，特别是在单元格验证部分。