子网格未填充在免费的 jqGrid 中

Subgrid not getting populated in free jqGrid

本文关键字：jqGrid 免费 网格 填充      更新时间：2023-09-26

我正在尝试将子网格添加到主网格的每一行。主网格填充良好，但是当我单击行子网格的展开图标时，未填充。仅显示子网格列标题。
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}]}]

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

additionalProperties: ["itemDetails"]

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

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

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

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

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

属性autosearch: true（不是autoSearch: true）是默认的。之后，您可以在没有其他参数的情况下使用filterToolbar。

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

相关文章：