Question

我正在尝试使用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>

我有什么遗失的吗？

Answer 1

您使用的JavaScript代码是正确的，它对应于从服务器返回的JSON数据。 The demo证明代码应该有效。在演示中，我只进行了少量更改（添加了height: "auto", gridview: true选项并增加了description列的宽度，以便更清楚地看到寻呼机中的结果。我删除了mtype:'POST'仅因为我的演示加载了数据直接来自每个HTTP GET的文件）。我建议你将你的演示与我的演示进行比较。另外，我建议您使用loadError回调（请参阅the answer），这有助于在加载网格时诊断错误。我希望错误描述可以帮助您在代码中找到错误。 HTTP响应的典型错误可能是Content-Type错误。

我建议您进行额外的小优化如下。您当前在服务器上生成的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指定item数组的第3个元素是id值。因此，您将拥有与上一个演示完全相同的网格（请参阅新演示here）。下图显示仍然正确设置了rowid

enter image description here

jQgrid：数据未加载

1 个答案: