jqGrid三级层次结构子网格单元格验证

时间:2015-12-08 20:42:00

标签: jquery jqgrid free-jqgrid

我有一个三级网格系统,Product - >类别 - > item,其中我展开产品行以查看子网格类别,并在展开类别行时,我获得了具有内联编辑单元格的项目网格行。现在,用户将需要在项目网格中输入信息。一旦用户进入编辑模式,我就会进行单元格验证,但可以选择在添加后完全不编辑该行。现在的挑战是我需要以这种方式验证整个网格结构。  1)我们将有预定数量的产品(产品= 10)  2)预定义类别预产品数量(5类/产品)  3)任何数量的单元格非空单元格。

带按钮"验证"我需要遍历entore网格系统并首先确认产品数量 第二次确认类别/产品的数量 第3个确认每个产品,类别数据的项目网格中没有空单元格。 希望有人能帮助我。 下面是我的网格系统

        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 个答案:

答案 0 :(得分:0)

所以我去了服务器端验证并在网格外显示结果。获得更多控制并更容易实现,特别是在细胞验证部分。