Question

我正在尝试将子网格添加到主网格的每一行。主网格填充正常，但是当我单击行的展开图标时，不会填充子网格。仅显示子网格列标题。
json数据是单个嵌套数据结构，仅在网格第一次加载时才获取一次。因此，当我单击网格展开图标时，我希望从显示父网格时获取的数据中填充子网格。
当我使用--datatype：“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使用url选项的情况下，从loadonce: true返回的数据将被读取并保存在本地，这一点非常重要。默认情况下，它只读取网格列的数据和属性id（可以通过id参数的prmNames属性进行配置。免费的jqGrid允许读取和保存任何其他附加属性。要指定属性，可以使用additionalProperties。最简单的用法是

additionalProperties: ["itemDetails"]

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

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

如果要为子网格的所有列设置search: false，则可以使用子网格的cmTemplate: {search: false}选项，并从所有列中删除search: false。以同样的方式，您可以在cmTemplate中添加属性width: 80（cmTemplate: {search: false, width: 80}），以将width属性的默认值150更改为80.之后，您可以删除{来自subdrid的树列的{1}}。

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

height: '100%'

属性searching: { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' }（不是autosearch: true）是默认值。之后，您可以使用autoSearch: true而无需其他参数。

我建议您使用filterToolbar：navGrid的其他选项，如果用户点击“刷新”，则通知从服务器重新加载数据（通过恢复原始值reloadGridOptions: { fromServer: true }）导航栏按钮。

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

1 个答案: