javascript - 在我更改 View 之前 JQGrid 寻呼机不显示

Question

这是我的代码:

<table id="employees"><tr><td></td></tr></table> 
<div id="pager"></div>

<script type="text/javascript">
    jQuery("#employees").jqGrid({
        datatype: "local",
        height: 250,
        colNames: ['Employee #', 'Name', 'Trade'],
        colModel: [
            { name: 'num', index: 'num', width: 100, sorttype: "int" },
            { name: 'name', index: 'name', width: 300 },
            { name: 'trade', index: 'trade', width: 80 },
        ],
        multiselect: true,
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "num",
        sortorder: "desc",
        scroll: false,
        viewrecords: true,
        autoencode: true,
        height: 'auto',
        caption: "Equipment"
    });

    var mydata = [
        { num: "492", name: "Doug Anderson", trade: "WS" },
        { num: "696", name: "William Anderson", trade: "OP" },
        { num: "826", name: "Chris Autry", trade: "WF" },
        { num: "206", name: "Tom Beffa", trade: "OP" },
        { num: "799", name: "Glenn Bixler", trade: "LB" },
        { num: "360", name: "Pete Bober", trade: "OP" },
        { num: "7", name: "Scott Burgie", trade: "PFW" },
        { num: "476", name: "James Click", trade: "W" },
        { num: "775", name: "Bryan Darst", trade: "LB" },
        { num: "249", name: "Bob Dunham", trade: "LB" },
        { num: "10", name: "Tom Ekclund", trade: "WGF" },
        { num: "390", name: "Noel Edwards", trade: "W" }
    ];
    for (var i = 0; i <= mydata.length; i++)
        jQuery("#employees").jqGrid('addRowData', i + 1, mydata[i]);
</script>

我的问题是寻呼机显示，但显示“0 中的 1”，然后只显示所有行而不是 10。奇怪的是，如果我在页面加载后更改排序列，或更改要显示的行数，它开始正常工作。例如，如果我加载页面并将要显示的行数切换为 20，它会在底部显示“1 out of 1”，然后如果我将其设置回 10，我将有 2 个页面可以切换通过。我只是不明白为什么它在页面加载后不能立即工作。

Answer 1

所描述问题的原因是使用 addRowData填充数据。非常糟糕，官方 jqGrid demo page包含非常接近的代码，可以在“加载数据”/“数组数据”下找到。该代码不仅包含小错误( i <= mydata.length 应替换为 i < mydata.length )，而且*非常无效。演示页面很旧。从 jqGrid 3.7 开始(参见“3.7 版新功能”/“立即加载数组数据”)存在更有效的方法:使用 data参数。

您可以扩展 mydata 的每一项，而不是在循环中填充数据具有附加属性的数组 id并只使用 data: mydata选项。在这种情况下，数据将首先排序(对应于您使用的 sortname: "num" 、 sortorder: "desc")，然后显示第一页。用户可以使用寻呼机浏览数据页面。

如果值为num你显示的已经是唯一的(每一行都有不同的值)那么你不需要添加 id属性(property)mydata大批。而不是你可以添加 key: true num 定义中的属性colModel 中的列.之后 jqGrid 将使用 num 中的值列为“rowid”(id 属性的值分配给 <tr> 网格元素)。

此外，我建议您使用 gridview: true所有网格中的选项并删除 index来自 colModel如果您使用与 name 相同的值.顺便说一句，如果您使用数据类型:“本地”，您必须要么删除 index或为 index 指定相同的值和 name .

所以最终的代码可能像下面这样

var mydata = [
        { num: "492", name: "Doug Anderson", trade: "WS" },
        { num: "696", name: "William Anderson", trade: "OP" },
        { num: "826", name: "Chris Autry", trade: "WF" },
        { num: "206", name: "Tom Beffa", trade: "OP" },
        { num: "799", name: "Glenn Bixler", trade: "LB" },
        { num: "360", name: "Pete Bober", trade: "OP" },
        { num: "7", name: "Scott Burgie", trade: "PFW" },
        { num: "476", name: "James Click", trade: "W" },
        { num: "775", name: "Bryan Darst", trade: "LB" },
        { num: "249", name: "Bob Dunham", trade: "LB" },
        { num: "10", name: "Tom Ekclund", trade: "WGF" },
        { num: "390", name: "Noel Edwards", trade: "W" }
    ];

$("#employees").jqGrid({
    datatype: "local",
    data: mydata,
    colNames: ["Employee #", "Name", "Trade"],
    colModel: [
        { name: "num", width: 100, key: true, sorttype: "int" },
        { name: "name", width: 300 },
        { name: "trade", width: 80 },
    ],
    multiselect: true,
    pager: "#pager",
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: "num",
    sortorder: "desc",
    viewrecords: true,
    autoencode: true,
    height: "auto",
    gridview: true,
    caption: "Equipment"
});

我修复了小错误:你指定了 height属性两次(height: 250 和 height: 'auto')，这是一个错误。