在jQgrid中加载本地JSON数据，而不添加JsonRows

我使用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>

函数loadPackageGrid（）{
//从隐藏的输入获取包网格数据。
//var data=eval（“+$”（“#qsmId”）.find（“.qsm数据包”）.first（）.val（）+”）；
风险值数据={
“第页”：“1”，
“记录”：“2”，
“行”：[
{“id”：“83123a”，“PackageCode”：“83123a”}，
{“id”：“83566a”，“PackageCode”：“83566a”}
]
};
$（“#packages”）[0].addJSONData（数据）；
};
$（文档）.ready（函数（）{
$（“#包”）.jqGrid({
colModel：[
{名称：'PackageCode'，索引：'PackageCode'，宽度：“110”}，
{name:'name'，index:'name'，width:'300'}
],
寻呼机：$（“#packagePager”），
数据类型：“本地”，
行数：10000，
viewrecords：是的，
标题：“包裹”，
身高：150，
PG按钮：错误，
loadonce：对
});
});

我想知道如何用另一种（更好的）方式来保持排序功能。

---

我尝试了一些数据选项，但没有结果。

我想同样的问题对其他人来说也很有趣。所以我对这个问题的回答是+1

你至少可以用两种方法解决这个问题。您可以使用的第一个和

datastr:data

。在这种情况下，您需要添加额外的参数

jsonReader:{repeatitems:false}

第二种方法是使用

datatype:“local”

和

data:data.rows

。在这种情况下，将使用从

data.rows

数组中读取数据。默认的

localReader

可以读取数据

相应的演示包括和

我对您的数据做了一些修改：填充了“Name”列，并在输入数据中包含了第三项

现在，您可以使用本地分页、排序和过滤/搜索数据。我包含了更多的代码来演示这些特性。下面是演示中的一个代码：

$（文档）.ready（函数（）{
"严格使用",；
风险值数据={
“第页”：“1”，
“记录”：“3”，
“行”：[
{“id”：“83123a”，名称：“Name 1”，“PackageCode”：“83123a”}，
{“id”：“83432a”，名称：“Name 3”，“PackageCode”：“83432a”}，
{“id”：“83566a”，名称：“Name 2”，“PackageCode”：“83566a”}
]
},
网格=$（“#包”）；
grid.jqGrid({
colModel：[
{名称：'PackageCode'，索引：'PackageCode'，宽度：“110”}，
{name:'name'，index:'name'，width:'300'}
],
寻呼机：“#packagePager”，
数据类型：“jsonstring”，
datastr:data，
jsonReader:{repeatitems:false}，
rowNum:2，
viewrecords：是的，
标题：“包裹”，
高度：“自动”，
无知者：是的
});
grid.jqGrid（'navGrid'，'#packagePager'，
{add:false，edit:false，del:false}，{}，{}，{}，
{multipleSearch:true，multipleGroup:true}）；
jqGrid（'filterToolbar'，{defaultSearch:'cn'，stringResult:true}）；
});

更新：我决定添加更多关于

数据类型：“jsonstring”

和

数据类型：“local”

场景之间差异的细节，因为许多读者都会阅读和投票旧答案

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

数据类型：“jsonstring”

$（函数（）{
“严格使用”；
风险值数据=[
{id:“10”，名称：“名称1”，包装代码：“83123a”，其他：“x”，子对象：{x:“a”，y:“b”，z:[1,2,3]}，
{id:“20”，名称：“名称3”，包装代码：“83432a”，其他：“y”，子对象：{x:“c”，y:“d”，z:[4,5,6]}，
{id:“30”，名称：“名称2”，包装代码：“83566a”，其他：“z”，子对象：{x:“e”，y:“f”，z:[7,8,9]}
],
$grid=$（“#包”）；
$grid.jqGrid({
数据：数据，
数据类型：“本地”，
colModel：[
{名称：“PackageCode”，宽度：110}，
{名称：“名称”，宽度：300}
],
寻呼机：“打包寻呼机”，
rowNum:2，
行列表：[1,2,10]，
viewrecords：是的，
行数：对，
标题：“包裹”，
高度：“自动”，
sortname:“名称”，
自动编码：正确，
gridview：没错，
ignoreCase：是的，
OnSetRow:函数（rowid）{
var rowData=$（this）.jqGrid（“getLocalRow”，rowid），str=“”，p；
for（行数据中的p）{
if（rowData.hasOwnProperty（p））{
str+=“propery\”“+p+”“+具有值\”“+rowData[p]+“\n”；
}
}
警报（“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}）；
});

它显示（请参见）

可以看到未排序的项与输入数据的顺序相同。输入数据项将保存在内部参数

数据
中，
\u index
中使用的
getLocalRow
方法显示，内部
数据项
仅包含命名的输入项的属性科雷斯
    {
       WorkflowRuns: 
       [
           {
              WorkflowRunID: 1000,
              WorkflowRunName: "First record",
           },
           {
              WorkflowRunID: 1001,
              WorkflowRunName: "Second record",
           }
       ],
       UserInformation: 
       {
          Forename: "Mike",
          Surname: "Gledhill"
       }
}

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

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