Free JqGrid - 网格不刷新

Question

我有一个组合框，其中在选择变化时，关联网格被重新灌注有新数据。

<div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <select id="Subcontractors"
                        data-bind="options: Subcontractors, optionsText: 'Subcontractor', optionsValue: 'ContractSubcontractorId', value: selectedSubcontractor, optionsCaption: '<-- Select Subcontractor -->', event:{ change: subcontractorChanged}"
                        class="form-control"></select>
            </div>
        </div>
    </div>
    <div id="containerGrid">
        <div id="divLoading" class="jqgrid-fluid-width divLoading has-error"></div>
        <table id="grid" class="grid"></table>
        <div id="pager"></div>
    </div>

网格定义如下；

var populateGrid = function (data, $form) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["Open Faults", "Address", "Fault No", "Description"],
        colModel: [
            { name: "numberOfOpenFaults", width: 50 },
            { name: "fullAddress", width: 400, align: "left" },
            { name: "faultNo", width: 50 },
            { name: "description", width: 400, align: "left" }
        ],
        prmNames: { id: "contractSubcontractorId" },
        localReader: { id: "contractSubcontractorId" },
        cmTemplate: { autoResizable: true },
        autoresize: true,
        rownumbers: true,
        viewrecords: true,
        iconSet: "fontAwesome",
        autoResizing: { compact: true },
        treeGrid: true,
        treeGridModel: "adjacency",
        ExpandColumn: "numberOfOpenFaults"
    }).jqGrid("gridResize");
    $(".divLoading").hide();
};

var getGrid = function (callback, selectedSubcontractorId) {
    var url = GetHiddenField("sir-get-open-faults-list-url").replace("#", selectedSubcontractorId);
    dataService.getList(url, callback);
};

var reloadGridWithUpdatedData = function (data) {
    var grid = $("#grid");
    var p = grid.jqGrid("getGridParam"); // get reference to all parameters
    p.data = data; // replace data parameter
    grid.trigger("reloadGrid");
};

所以当我想重新填充网格时，getGrid 中的回调函数是reloadGridWithUpdatedData。否则，对于网格的初始填充，我使用函数 populateGrid。 这2个函数都被正确调用了，但是在函数reloadGridWithUpdatedData这一行

var p = grid.jqGrid("getGridParam");

似乎没有被执行。它也不会抛出异常。是不是什么都没找到？

更新：当数据首次加载时，根据字段名称将数据划分为正确的列，正如您所期望的那样。重新加载数据时，数据列按照它们在数据结构中的顺序排列，忽略列名。这是我在网格的 p.data 属性中找到的。 所以我确保数据结构按照与列名相同的顺序重新组织，但这没有任何区别，网格无法重新加载。 那么为什么重新加载无法将新数据分配给数据列呢？

UPDATE2 - 最初网格是空的。每次选择组合框中的项目时，数据都会加载到网格中，因此数据布局是相同的。使用 Fiddler，我已经捕获了 2 个连续组合选择的数据；

Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:12528
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcZ2VvZmZyZXlwYXluZVxEb2N1bWVudHNcVmlzdWFsIFN0dWRpbyAyMDE3XFByb2plY3RzXFNJUlxTSVJcYXBpXGNvbnRyYWN0cmVwb3J0XGdldGdyaWRieXN1YmNvbnRyYWN0b3JcNTg5XDE3?=
X-Powered-By: ASP.NET
Date: Mon, 22 Oct 2018 07:12:09 GMT

400
[{"numberOfOpenFaults":"1","fullAddress":"16, ACACIA ROAD, NORBURY, SW16 5PP","faultNo":"","description":"","id":4472,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"6","description":"General Mechanical - Thermostatic Mixing Valves","id":95,"parent":4472,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"3","fullAddress":"85, ACADEMY GARDENS, ADDISCOMBE, CR0 6QL","faultNo":"","description":"","id":4474,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"General Mechanical - Low Temperature Hot Water","id":39,"parent":4474,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"4","description":"Boilers HIU - Ventilation","id":65,"parent":4474,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"9","description":"Gener
400
al Mechanical - Defect(s) Outstanding","id":70,"parent":4474,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"8, ADMIRALS WALK, Tollers Estate COULSDON EAST, CR5 1BR","faultNo":"","description":"","id":4478,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"3","description":"Ventilation - Grilles/air valves","id":105,"parent":4478,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"4","fullAddress":"14, ASHWOOD GARDENS, FIELDWAY, CR0 0SH","faultNo":"","description":"","id":4492,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"4","description":"Certification Mechanical - Boiler Benchmark/Manual","id":79,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"6","description":"Unvented HWS Cylinder (UHC) - Pipework configuration","i
8c
d":81,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"7","descrip
374
tion":"Unvented HWS Cylinder (UHC) - Pipework configuration","id":86,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"8","description":"General Mechanical - Dry Risers","id":87,"parent":4492,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"2","fullAddress":"31, ASHWOOD GARDENS, FIELDWAY, CR0 0SH","faultNo":"","description":"","id":4498,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"General Mechanical - Waste","id":82,"parent":4498,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"2","description":"General Mechanical - Thermostatic Mixing Valves","id":83,"parent":4498,"level":1,"isLeaf":true,"expanded":false,"loaded":true}
1
]
0

---

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:12528
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcZ2VvZmZyZXlwYXluZVxEb2N1bWVudHNcVmlzdWFsIFN0dWRpbyAyMDE3XFByb2plY3RzXFNJUlxTSVJcYXBpXGNvbnRyYWN0cmVwb3J0XGdldGdyaWRieXN1YmNvbnRyYWN0b3JcNTg5XDE5?=
X-Powered-By: ASP.NET
Date: Mon, 22 Oct 2018 07:13:57 GMT

400
[{"numberOfOpenFaults":"2","fullAddress":"16, ACACIA ROAD, NORBURY, SW16 5PP","faultNo":"","description":"","id":4471,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"23","description":"Accessories - Existing not replaced/removed","id":106,"parent":4471,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"25","description":"Lighting - Emergency Lighting","id":123,"parent":4471,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"85, ACADEMY GARDENS, ADDISCOMBE, CR0 6QL","faultNo":"","description":"","id":4473,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"4","description":"Alarms - Location","id":85,"parent":4473,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"137, ACADEMY GARDENS, ADDISCOMBE, CR0 6QN","faultNo":"","des
400
cription":"","id":4475,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"6","description":"Alarms - Location","id":110,"parent":4475,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"1","fullAddress":"18, CHERTSEY CRESCENT, NEW ADDINGTON, CR0 0DA","faultNo":"","description":"","id":4573,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"2","description":"Earthing and Bonding - Supplementary bonding","id":137,"parent":4573,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"2","fullAddress":"Plot 2, 29, The Street, Geoff Close, , N1 7PL","faultNo":"","description":"","id":8705,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"Lighting - Type","id":170,"parent":8705,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberO
310
fOpenFaults":"","fullAddress":"","faultNo":"2","description":"Certification Electrical - Fire Alarm Certificate","id":171,"parent":8705,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"2","fullAddress":"Wenlock Barn Estate Hoxton Hackney, N1 7PL","faultNo":"","description":"","id":8899,"parent":0,"level":0,"isLeaf":false,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"1","description":"Accessories - Type/quantity/setting-out","id":179,"parent":8899,"level":1,"isLeaf":true,"expanded":false,"loaded":true},{"numberOfOpenFaults":"","fullAddress":"","faultNo":"2","description":"General Electrical - Incorrect circuit protective device","id":180,"parent":8899,"level":1,"isLeaf":true,"expanded":false,"loaded":true}]
0

Answer 1

var reloadGridWithUpdatedData = function (data) {
    var grid = $("#grid");
    grid.clearGridData();
    grid.jqGrid('setGridParam', {data:data)});
    grid.trigger("reloadGrid");
};

我对您现有的代码做了一些修改。请使用更新的代码重试并检查。您需要在重新加载网格之前清除现有数据并使用 setGridParam 重置它。

Answer 2

首先，您使用的数据存在小而重要的问题。一个必须更换

"parent": 0

网格的所有根元素中的属性

"parent": null

它修复了 TreeGrid 中的排序问题。详情请见the old answer。

要了解重新加载 TreeGrid 数据的问题，需要查看以下免费 jqGrid 代码行：

// fix to allow to load TreeGrid using datatype:"local", data:mydata instead of treeGrid: true
if (p.treeGrid && p.datatype === "local" && p.data != null && p.data.length > 0) {
    p.datatype = "jsonstring";
    p.datastr = p.data;
    p.data = [];
}

populate.call(ts);

见here。这意味着free jqGrid的代码允许使用datatype: "local"和data参数作为输入来简化 TreeGrid的使用，但它仍然使用旧的jqGrid方法来加载TreeGrid数据。 p>

因为重新加载 TreeGrid 数据会有点其他，例如以下：

var reloadGridWithUpdatedData = function (data) {
    var grid = $("#grid"),
        p = grid.jqGrid("getGridParam");

    p.data = [];
    p.datatype = "jsonstring";
    p.datastr = data;

    grid[0].grid.populate.call(grid[0]);
};

在此处查看相应的演示：https://jsfiddle.net/OlegKi/o1bhpLyu/