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。正确调用了这两个函数，但是在函数reloadGridWithUpdatedData中，行

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

似乎没有被执行。它也不会引发异常。没有找到任何东西吗？

更新：第一次加载数据时，如您所期望的，根据字段名称将数据分为正确的列。重新加载数据时，数据列将按照它们在数据结构中的顺序排列，而忽略列名。我可以在网格的p.data属性中找到它。因此，我确保按照与列名相同的顺序重组数据结构，但这没有任何区别，网格无法重新加载。那么，为什么重新加载无法将新数据分配给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

首先，您使用的数据有一个很小但很重要的问题。一个必须替换

"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。这意味着免费的jqGrid代码允许使用datatype: "local"和data参数作为输入来简化使用TreeGrid，但是仍然使用旧的jqGrid方法加载TreeGrid数据。

由于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/

Answer 2

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

我已经对您现有的代码进行了一些修改。请重试更新后的代码并进行检查。您需要清除现有数据并使用setGridParam将其重置，然后才能重新加载网格。

免费的JqGrid-网格不会刷新

2 个答案: