使用客户端数据类型时,将数据添加到jqgrid子网格

时间:2009-04-21 15:20:46

标签: jquery jqgrid

当父jqgrid的数据类型是clientSide类型时,是否可以将数据添加到子网格?

我可以使用:

向父jqgrid添加一行
jQuery("#myId").addRowData(0, someRowData);

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

1 个答案:

答案 0 :(得分:3)

我无法确定如何将数据实际添加到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)