在没有AddJsonRows的情况下在jQgrid中加载本地JSON数据 [英] Load local JSON data in jQgrid without AddJsonRows

问题描述

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

I'm using the method addJsonRows to add local data to a jQgrid. As this method disables the sorting I need another solution. One restriction: I can't set the url and fetch the data from the server because the data was passed through another component.

下面的代码片段启发了案例.注释行显示了限制，我通过定义一个具有测试用例的局部变量来代替它.

Underneath snippet enlightens the case. The commented line shows the restriction, I replaced it by defining a local variable to have a test case.

<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>

我想知道如何以其他(更好)的方式来保持排序功能. 我尝试了data选项，但没有结果.

I wonder how I could do this in an other (better) way to keep the sorting feature. I tried something with the data option, without result.

推荐答案

我认为对于其他人来说，同样的问题也很有趣.所以我向这个问题+1.

I suppose that the same question is interesting for other persons. So +1 from me for the question.

您可以通过至少两种方式解决该问题.您可以使用的第一个数据类型:"jsonstring" 和datastr: data.在这种情况下，您需要添加其他参数jsonReader: { repeatitems: false }.

You can solve the problem in at least two ways. The first one you can use datatype: "jsonstring" and datastr: data. In the case you need to add additional parameter jsonReader: { repeatitems: false }.

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

The second way is to use datatype: "local" and data: data.rows. In the case the localReader will be used to read the data from the data.rows array. The default localReader can read the data.

相应的演示位于此处和我对您的数据做了一些修改:在名称"列中填写了第三项，并在输入数据中包含了第三项.

I modified a little your data: filled "Name" column and included the third item in the input data.

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

Now you can use local paging, sorting and filtering/searching of the data. I included a little more code to demonstrate the features. Below you find the code of one from the demos:

$(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"方案之间差异的更多详细信息，因为许多读者会阅读并投票表决旧答案.

UPDATED: I decided to add more details about the differences between datatype: "jsonstring" and datatype: "local" scenarios because the old answer be read and voted by many readers.

我建议稍微修改上面的代码以更好地显示差异.拳头代码使用datatype: "jsonstring"

I suggest to modify the above code a little to show better the differences. The fist code uses 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 });
});

显示(请参见演示)

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

One can see unsorted items in the same order like input data. The items of input data will be saved in internal parameters data and _index. getLocalRow method used in onSelectRow shows that items of internal data contains only properties of input items which names corresponds to name property of some jqGrid columns. Additionally unneeded _id_ property will be added.

另一方面，使用datatype: "local"的下一个演示显示排序数据，所有属性(包括复杂对象)仍将保存在内部data:

On the other side the next demo which uses datatype: "local" displays sorted data and all properties inclusive complex objects will be still saved in the internal data:

上次演示中使用的代码如下:

The code used in the last demo is included below:

$(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"仅在某些非常特定的情况下才能具有某些优势.

So I would recommend to use datatype: "local" instead of datatype: "jsonstring". datatype: "jsonstring" could have some advantages only in some very specific scenarios.

这篇关于在没有AddJsonRows的情况下在jQgrid中加载本地JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！