JQGrid ：作为带有导航栏的 GRID 的子网格

Question

我正在使用 JQGrid 并将 subGrid 显示为 JQGRID 本身。 我想知道是否有办法也显示子网格的导航栏。

我尝试按照 JQGrid 的方式进行操作，但没有成功。

提前致谢！

Answer 1

确保在 subGrid jqGRid 函数中，您还将分页器属性设置为子网格中的分页器 id

... subGrid: true,
            subGridRowExpanded: function(subgrid_id, row_id) 
            {
               var subgrid_table_id;
               var pager_id;
               subgrid_table_id = subgrid_id+"_t";
               pager_id = "p_"+subgrid_table_id;
               $("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+ pager_id +"' class='scroll'></div>");
               $("#" + subgrid_table_id).jqGrid({
                  url:"ListSub/"+ row_id,
                  datatype: "json",
                  colNames: ['Street1','Street2','Street3','Zip','Place','Country'],
                  colModel:
                  [
                    {name:"Street1",index:"Street1",width:80,key:true, editable:true},
                    {name:"Street2",index:"Street2",width:130, editable:true},
                    {name:"Street3",index:"Street3",width:80,align:"right", editable:true},
                    {name:"Zip",index:"Zip",width:80,align:"right", editable:true},           
                    {name:"Place",index:"Place",width:100,align:"right", editable:true},
                    {name:"Country",index:"Country",width:100,align:"right", editable:true}
                  ],
                  caption: "Offices",
                  height: "100%",
                  rowNum:10,
                  sortname: 'Street1',
                  sortorder: "asc",
                  pager:pager_id
               });
             jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false})
            }....

Answer 2

subGrid: true,
subGridRowExpanded: function(ParentGridID, rowid) {
    var datagridSub, navGrid;
    SubGridID = ParentGridID+"_t";
    //alert(rowid);
    navGrid = "p_"+datagridSub;
    $("#"+ParentGridID).html("<table id='"+SubGridID+"' class='scroll'></table><div id='"+PagerID+"' class='scroll'></div>");
    jQuery("#"+SubGridID).jqGrid({
        url:'service url'+rowid,
        datatype: "json",
        type: "GET",
        colNames: ['Id','MID','VendorCode1','VendorCode2','Percentage'],
        width:700,
        colModel: [
            {name:"id",index:"id",width:30},
            {name:"mid",index:"mid",width:30},
            {name:"vendorcode1",index:"vendorcode1",width:40},
            {name:"vendorcode2",index:"vendorcode2",width:40},
            {name:"percentage",index:"percentage",width:70}
        ],
        jsonReader: {
            repeatitems: false,        // To Bind the Data in Grid, if it is JSON format.
            id: "id",
            root: function (obj) { return obj; }     // To Bind the Data in Grid.
            // page: function () { return 1; },
            //total: function () { return 1; },
            //records: function (obj) { return obj.length; },    
        },
        rowNum:20,
        pager: '#PagerID',
        sortname: 'num',
        sortorder: "asc",
        postData: {id: rowid},
        height: '120%',
    });
}