子网格没有在免费的 jqGrid 中填充

Question

我正在尝试将子网格添加到主网格的每一行。主网格填充正常但是当我单击行子网格的展开图标时未填充。仅显示子网格列 headers。
json 数据是单个嵌套数据结构，仅在第一次加载网格时获取一次。因此，当我单击网格展开图标时，我希望从显示 parent 网格时获取的数据填充子网格。
当我使用 - 数据类型："local" 时显示空子网格。
如果我设置数据类型："json"，那么如果我单击展开图标，则会进行服务器端调用以获取数据。
那么我如何使用已经获取的单个 json 数据显示子网格。谢谢
请在下面找到示例代码，

$(document).ready(function () {
    "use strict";
    var dataGrid = $('#itemList');
    var firstClick = true;
    $('#action').click(function () {
        if (!firstClick) {
            $("#itemList").setGridParam({datatype:'json'}).trigger("reloadGrid");
        }   
        firstClick = false;
    $("#itemList").jqGrid({
        url: "${pageContext.request.contextPath}/billing/items",
        datatype: "json",
        mtype: "POST",
        autowidth: true,
        loadBeforeSend: function(jqXHR) {
             jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
        },
        colNames: ["Id", "Item Type", "Item Code"],
        colModel: [
            { name: "id", width: 35, sorttype:"int", search: false, editable: false, key: true, hidden: true},
            { name: "itemType", width: 100},
            { name: "itemCode", width: 120}

        ],
        maxHeight: 400,
        cmTemplate: {editable: true},
        pager: true,
        rowNum: 50,
        rowList: [50, 100, 150, 200],
        rownumbers: true,
        rownumWidth: 25,
        sortname: "itemType",
        sortorder: "asc",
        forceClientSorting: true,
        viewrecords: true,
        height: '100%',
        loadonce: true,
        //gridview: true,
        autoencode: true,
        editurl: "${pageContext.request.contextPath}/billing/saveItem",
        caption: "Item List",
        subGrid: true,
        subGridRowExpanded: function (subgridId, rowid) {
            var subgridTableId = subgridId + "_t";
            $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
            $("#" + subgridTableId).jqGrid({
                datatype: "local",
                data: $(this).jqGrid("getLocalRow", rowid).itemDetails,
                colNames: ["Id", "Unit", "Stock", "Batch No.", "Expiry Date", "Quantity Per Unit", "Price"],
                colModel: [
                    { name: "id", width: 35, sorttype:"int", search: false, editable: false, key: true, hidden: true},       
                    { name: "unit", width: 70, search: false},
                    { name: "availableQuantity", width: 55, search: false, formatter: "number",},
                    { name: "batchNumber", width: 80, search: false},
                    { name: "expiryDate", width: 80, search: false, sorttype: "date", formatoptions: {srcformat:'d/m/Y', newformat:'d/m/Y'}},
                    { name: "quantityPerUnit", width: 80, search: false, formatter: "number"},
                    { name: "price", width: 55, search: false, formatter: "number"}
                ],
                height: "100%",
                rowNum: 10,                    
                idPrefix: "s_" + rowid + "_",
                cmTemplate: {editable: true},
                editurl: "${pageContext.request.contextPath}/billing/saveItem"
            });
        }            
    }).navGrid({add:false,edit:false,del:true});
    $("#itemList").jqGrid('filterToolbar', {autoSearch: true, stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
    $("#itemList").jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
});

样本json数据：-

[{"id":1,"itemCode":"Omez","itemType":"Medicine","itemDesc":"Omez for acidity","itemDetails":[{"id":1,"batchNumber":"batch1","expiryDate":"01/06/2018","unit":"bottle","subUnit":"tablet","availableQuantity":120.0,"quantityPerUnit":60.0,"price":122.0}]}]

Answer 1

首先，重要的是要了解，如果使用 jqGrid 的 loadonce: true 选项，从 url 返回的数据将被读取并保存在本地。默认情况下，它只读取网格列的数据和属性 id（可以通过 prmNames 参数的 id 属性进行配置）。免费的 jqGrid 允许读取和保存任何其他附加属性。要指定属性，可以使用 additionalProperties。最简单的用法是

additionalProperties: ["itemDetails"]

它通知 jqGrid 读取并保存在本地 itemDetails 属性每个项目。之后 $(this).jqGrid("getLocalRow", rowid).itemDetails 将起作用。

此外，您可以从 colModel 中删除列 id。 jqGrid 根据输入数据（从服务器返回）的 id 属性的值设置行的 id 属性。因此，您不需要在每一行的隐藏 <td> 单元格中保存重复信息。您可以从主网格和子网格中删除 id 列。

如果你想为子网格的所有列设置 search: false 那么你可以使用子网格的 cmTemplate: {search: false} 选项并从所有列中删除 search: false。以同样的方式，您可以在 cmTemplate 中包含属性 width: 80 (cmTemplate: {search: false, width: 80}) 以将 width 属性的默认值 150 更改为80. 之后你也可以从 subdrid 的树列中删除 width: 80。

您可以删除 sortorder: "asc" 和 height: '100%' 属性，因为免费的 jqGrid 有默认值。你可以使用

searching: {
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: 'cn'
}

属性autosearch: true（不是autoSearch: true）是默认的。之后你可以使用 filterToolbar 而不需要额外的参数。

我建议您使用 navGrid 的附加选项：reloadGridOptions: { fromServer: true } 如果用户单击，它会通知从服务器重新加载数据（通过恢复 datatype 的原始值）在导航栏的刷新按钮上。

子网格没有在免费的 jqGrid 中填充

Subgrid not getting populated in free jqGrid

javascript

jquery

json

jqgrid

free-jqgrid