jquery - 使用客户端数据类型时向 jqgrid 子网格添加数据

Question

当父jqgrid的数据类型为clientSide类型时，是否可以向子网格添加数据？

我可以使用以下方法向父 jqgrid 添加一行:

jQuery("#myId").addRowData(0, someRowData);

但我不确定如何将数据添加到子网格。有什么想法吗？

Answer 1

我无法确定如何实际将数据添加到 jqGrid 的子网格，但我能够将数据添加到另一个网格内的网格。

我的主网格看起来像:

$("#" + tblNm).jqGrid({
                datatype: "local",
                colNames: ['id', 'Last Name', 'First Name', 'Address'],
                colModel: [{
                    name: 'id',
                    index: 'id',
                    width: 75,
                    sortable: false
                }, {
                    name: 'lastNm',
                    index: 'lastNm',
                    width: 90,
                    sortable: false
                }, {
                    name: 'firstNm',
                    index: 'firstNm',
                    width: 100,
                    sortable: false
                }, {
                    name: 'address',
                    index: 'address',
                    width: 200,
                    align: "left",
                    sortable: false
                }],
                width: "100%",
                height: "100%",
                caption: "Clients",
                jsonReader: {
                    root: "clients",
                    page: "currpage",
                    total: "totalpages",
                    records: "totalrecords",
                    repeatitems: false,
                    id: "id"
                },
                subGrid: true,
                subGridRowExpanded: function(subgrid_id, row_id){
                    console.debug("SubGrid_ID:  " + subgrid_id +
                    "   / row_id:  " +
                    row_id);
                    var subgrid_table_id, pager_id;
                    subgrid_table_id = "mySubGridName" + row_id;
                    pager_id = "p_" + subgrid_table_id;
                    $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>");
                    jQuery("#" + subgrid_table_id).jqGrid({
                        datatype: "local",
                        colNames: ['Order Id', 'Item Name', 'Cost'],
                        colModel: [{
                            name: "ordId",
                            index: "ordId",
                            width: 20,
                            key: true
                        }, {
                            name: "itemName",
                            index: "itemName",
                            width: 130
                        }, {
                            name: "cost",
                            index: "cost",
                            width: 200,
                            align: "left"
                        }],
                        rowNum: 20,
                        caption: "Orders",
                        height: '100%',
                        width: '100%',
                        jsonReader: {
                            root: "orders",
                            page: "currpage",
                            total: "totalpages",
                            records: "totalrecords",
                            repeatitems: false,
                            id: "num"
                        }
                    });
                }
            });

我通过执行以下操作来加载主网格:

$("#" + tblNm)[0].addJSONData(wrapper);

然后，当我获取子网格数据时，我会执行以下操作:

 // click on the subgrid so that the table is added to the DOM
 // I think there are better ways of doing this... you'll want to look @ the jqGrid documentation
 $("#" + masterTblId + " tr[id='1'] td[role='grid'] a span").click();
 // add the data to the subgrid
 $("#" + subGridId)[0].addJSONData(wrapper);

最重要的部分是在 jqGrid 的 subgridexpanded 属性中定义代码，然后能够强制显示子网格。

此方法的唯一问题是，如果用户单击子网格区域，则它会被切换，当他们再次单击它时，它不会正确显示。我已向社区询问如何解决此问题:

Subgrid Caching or Stopping Subgrid data from being removed (jqGrid)