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

Question

我正在尝试将子网格添加到主网格的每一行。主网格填充得很好，但是当我单击行子网格的展开图标时没有填充。仅显示子网格列标题。
json 数据是一个嵌套的数据结构，在第一次加载网格时只获取一次。因此，当我单击网格展开图标时，我希望从显示父网格时获取的数据填充子网格。
当我使用 - 数据类型：“本地”时，会显示空子网格。
如果我设置数据类型：“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

首先重要的是要了解从url 返回的数据将在使用jqGrid 的loadonce: true 选项的情况下被读取并保存在本地。默认情况下它只读取网格列的数据和属性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 的原始值）。