1

我正在尝试使用 jQgrid，但该表无法加载数据。背景中有某种透明的黑色块 UI。我收到的 Json 响应是：

          {"total":"1","page":"1","records ":"10",
        "rows":[
        {"id":"26010","cell":[26010,303,100,""]},
        {"id":"26009","cell":[26009,303,100,""]},
        {"id":"26008","cell":[26008,303,100,""]},
        {"id":"26007","cell":[26007,303,100,""]},
        {"id":"26006","cell":[26006,303,100,""]},
        {"id":"26005","cell":[26005,303,100,""]},
        {"id":"26004","cell":[26004,303,100,""]},
        {"id":"26003","cell":[26003,303,100,""]},
        {"id":"26002","cell":[26002,303,100,""]},
        {"id":"26001","cell":[26001,303,100,""]}]}

这页纸：

<table id="list3"></table>
<div id="pager3"></div>
<table id="navgrid"></table>
<div id="pagernav"></div>
<script>
$(document).ready(function(){
$("#list3").jqGrid({
        url:'<%=getForecastedTransactionURL%>',
        mtype:'POST',
        datatype : 'json',
        colNames : [ 'Txn Id', 'Transaction Type', 'Amount', 'Description'],
        colModel : [ {
            name : 'id',
            index : 'id',
            sorttype : "int",
            hidden:true
        }, {
            name : 'transactionType',
            index : 'transactionType',
            width : 100
        }, {
            name : 'amount',
            index : 'amount',
            width : 80,
            align : "right",
            sorttype : "number"
        }, {
            name : 'description',
            index : 'description',
            width : 80,
            align : "right",
            sorttype : "text"
        }],
        multiselect : true,
        rowNum : 20,
        rowList : [ 10, 20, 30 ],
        pager : '#pager3',
        sortname : 'transactionType',
        viewrecords : true,
        sortorder : "desc",
        loadonce : true,
        caption : "Load Once Example"
    });
});
</script>

我有什么遗漏吗？

4

1 回答 1

0

您使用的 JavaScript 代码是正确的，它对应于从服务器返回的 JSON 数据。该演示演示代码应该可以工作。在演示中，我只做了微小的更改（添加了height: "auto", gridview: true选项并增加了description列的宽度以更清楚地看到分页器中的结果。我删除mtype:'POST'只是因为我的演示通过 HTTP GET 直接从文件加载数据）。我建议您将您的演示与我的进行比较。此外，我建议您使用loadError回调（参见答案），它可以帮助诊断加载网格期间的错误。我希望错误描述能帮助您找到代码中的错误。典型的错误可能是Content-TypeHTTP 响应错误。

我建议您进行的其他小优化如下。您当前在服务器上生成的 JSON 格式包含许多不需要的信息和重复的id信息。您包括了当前隐藏id的列，这并不是真正需要的。jqGrid 的每一行都有id属性。您可以使用该值而不是使用不需要的隐藏列。例如，您可以更改代码以生成数据

[
    [303,100,"",26010],
    [303,100,"",26009],
    [303,100,"",26008],
    [303,100,"",26007],
    [303,100,"",26006],
    [303,100,"",26005],
    [303,100,"",26004],
    [303,100,"",26003],
    [303,100,"",26002],
    [303,100,"",26001]
]

添加jsonReader选项并更改colModel为

colModel : [{
    name : 'transactionType',
    width : 100
}, {
    name : 'amount',
    width : 80,
    align : "right",
    sorttype : "number"
}, {
    name : 'description',
    width : 280,
    align : "right"
}],
jsonReader: {id: 3}

这样jsonReader指定项目数组的第 3 个元素是id值。结果，您将拥有与之前的演示完全相同的网格（请参阅此处的新演示）。下图显示rowids仍然设置正确

在此处输入图像描述

于 2013-06-03T11:06:39.387 回答