Question

我正在使用addJsonRows方法将本地数据添加到jQgrid。由于此方法禁用排序，我需要另一种解决方案。一个限制：我无法设置url并从服务器获取数据，因为数据是通过另一个组件传递的。

在片段下方启发了案例。注释行显示了限制，我通过定义一个局部变量来替换它以获得测试用例。

<script type="text/javascript" language="javascript">
    function loadPackageGrid() {
    // Get package grid data from hidden input.
    // var data = eval("("+$("#qsmId").find(".qsm-data-packages").first().val()+")");
        var data =  {
            "page": "1",
            "records": "2",
            "rows": [
                { "id": "83123a", "PackageCode": "83123a" },
                { "id": "83566a", "PackageCode": "83566a" }
            ]
        };

        $("#packages")[0].addJSONData(data);
    };

    $(document).ready(function() {
        $("#packages").jqGrid({
            colModel: [
                { name: 'PackageCode', index: 'PackageCode', width: "110" },
                { name: 'Name', index: 'Name', width: "300" }
            ],
            pager: $('#packagePager'),
            datatype: "local",
            rowNum: 10000,
            viewrecords: true,
            caption: "Packages",
            height: 150,
            pgbuttons: false,
            loadonce: true
        });
    });
</script>

我想知道如何以其他（更好）方式保持排序功能。我尝试使用数据选项，没有结果。

Answer 1

我认为同样的问题对其他人来说很有意思。所以我可以提出+1问题。

您可以通过至少两种方式解决问题。第一个可以使用datatype: "jsonstring"和datastr: data。如果您需要添加其他参数jsonReader: { repeatitems: false }。

第二种方法是使用datatype: "local"和data: data.rows。如果localReader将用于从data.rows数组中读取数据。默认localReader可以读取数据。

相应的演示包括here和here。

我修改了一些你的数据：填写“名称”列并包含输入数据中的第三项。

现在您可以使用本地分页，排序和过滤/搜索数据。我添加了一些代码来演示这些功能。您可以在下面找到演示中的一个代码：

$(document).ready(function () {
    'use strict';
    var data = {
            "page": "1",
            "records": "3",
            "rows": [
                { "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
                { "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
                { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }
            ]
        },
        grid = $("#packages");

    grid.jqGrid({
        colModel: [
            { name: 'PackageCode', index: 'PackageCode', width: "110" },
            { name: 'Name', index: 'Name', width: "300" }
        ],
        pager: '#packagePager',
        datatype: "jsonstring",
        datastr: data,
        jsonReader: { repeatitems: false },
        rowNum: 2,
        viewrecords: true,
        caption: "Packages",
        height: "auto",
        ignoreCase: true
    });
    grid.jqGrid('navGrid', '#packagePager',
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    grid.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true });
});

更新：我决定添加有关datatype: "jsonstring"和datatype: "local"方案之间差异的更多详细信息，因为许多读者都会阅读并回复旧答案。

我建议稍微修改上面的代码以更好地显示差异。第一个代码使用datatype: "jsonstring"

$(function () {
    "use strict";
    var data = [
            { id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
            { id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
            { id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
        ],
        $grid = $("#packages");

    $grid.jqGrid({
        data: data,
        datatype: "local",
        colModel: [
            { name: "PackageCode", width: 110 },
            { name: "Name", width: 300 }
        ],
        pager: "#packagePager",
        rowNum: 2,
        rowList: [1, 2, 10],
        viewrecords: true,
        rownumbers: true,
        caption: "Packages",
        height: "auto",
        sortname: "Name",
        autoencode: true,
        gridview: true,
        ignoreCase: true,
        onSelectRow: function (rowid) {
            var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
            for (p in rowData) {
                if (rowData.hasOwnProperty(p)) {
                    str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\n";
                }
            }
            alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
        }
    });
    $grid.jqGrid("navGrid", "#packagePager",
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});

显示（参见the demo）

enter image description here

可以按输入数据的相同顺序查看未排序项目。输入数据项将保存在内部参数data和_index中。 getLocalRow中使用的onSelectRow方法显示内部data项只包含输入项的属性，这些输入项的名称对应于某些jqGrid列的name属性。此外，还将添加不需要的_id_属性。

另一方the next demo使用datatype: "local"显示已排序数据，所有包含复杂对象的属性仍将保存在内部data中：

enter image description here

上一个演示中使用的代码包含在下面：

$(function () {
    "use strict";
    var data = [
            { id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
            { id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
            { id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
        ],
        $grid = $("#packages");

    $grid.jqGrid({
        data: data,
        datatype: "local",
        colModel: [
            { name: "PackageCode", width: 110 },
            { name: "Name", width: 300 }
        ],
        pager: "#packagePager",
        rowNum: 2,
        rowList: [1, 2, 10],
        viewrecords: true,
        rownumbers: true,
        caption: "Packages",
        height: "auto",
        sortname: "Name",
        autoencode: true,
        gridview: true,
        ignoreCase: true,
        onSelectRow: function (rowid) {
            var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
            for (p in rowData) {
                if (rowData.hasOwnProperty(p)) {
                    str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\"\n";
                }
            }
            alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
        }
    });
    $grid.jqGrid("navGrid", "#packagePager",
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});

所以我建议使用datatype: "local"代替datatype: "jsonstring"。 datatype: "jsonstring"仅在某些非常具体的情况下才有一些优势。

Answer 2

使用beforeSubmit（）函数，您可以在jqgridattempting将数据发布到服务器之间进行干预，同时添加，编辑和删除行。

通过使用beforeSubmit（）函数选项，您可以在添加新行时捕获发布的数据并更新本地JSON数据。

beforeSubmit: function (postdata, formid) {

// capture posted data, create JOSN item and add to the JSON array.
customersData.push({ id: guid(), FirstName: postdata.FirstName, LastName: postdata.LastName, sendEmail: postdata.sendEmail });

// Refresh the grid, so that changes to the underlining 
// local data array is reflected in the grid. 
$('#customerGrid').jqGrid('setGridParam', { datatype: 'local', data: customersData }).trigger('reloadGrid');

// Close the dialog.
try {
      $(".ui-icon-closethick").trigger('click');
    }
    catch (ex) { }
    return [false, ''];
    }

同样，您可以使用beforeSubmit（）函数选项捕获更新的字段值并更新本地JSON数据。
同样可以从网格中删除一行，这反映在已从本地数据中删除的项目中。

要获得完整的解决方案，您可以查看working with local data in jqgrid

Answer 3

很棒的建议，奥列格。

在我的网络应用中，我预先加载了一些看起来像这样的JSON数据：

    {
       WorkflowRuns: 
       [
           {
              WorkflowRunID: 1000,
              WorkflowRunName: "First record",
           },
           {
              WorkflowRunID: 1001,
              WorkflowRunName: "Second record",
           }
       ],
       UserInformation: 
       {
          Forename: "Mike",
          Surname: "Gledhill"
       }
}

这里是创建jqGrid所需的代码，仅基于此JSON的WorkflowRuns部分：

var JSONstring = '{ WorkflowRuns: [ { WorkflowRunID: 1000, .. etc .. } ]';

$("#tblWorkflowRuns").jqGrid({
    datatype: "local",
    data: JSONstring.WorkflowRuns,
    localReader: {  
        id: "WorkflowRunID",
        repeatitems: false
    },
    ...
});

虽然这是一个试验和错误。

例如，jqGrid似乎忽略了datastr: JSONstring。

请注意，使用本地数据，我需要使用localReader而非jsonReader，否则无法正确设置行ID。

希望这有帮助。

在没有AddJsonRows的情况下在jQgrid中加载本地JSON数据

3 个答案: