1

这是我的代码：

<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 个页面可以切换。我只是不明白为什么它在页面加载后不能立即工作。

4

1 回答 1

2

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

除了在循环中填充数据之外，您还可以使用附加属性扩展mydata数组的每个项目id并仅使用data: mydata选项。如果首先对数据进行排序（对应于您使用的 ） sortname: "num"，sortorder: "desc"然后将显示第一页。用户可以使用寻呼机在数据页面上导航。

如果num您显示的值已经是唯一的（每行都有不同的值），那么您不需要向数组添加id属性。取而代之mydata的是，您可以key: true在. 之后 jqGrid 将使用列中的值作为“rowid”（分配给网格元素的属性值）。numcolModelnumid<tr>

此外，我建议您gridview: true在所有网格中使用选项，index如果colModel您使用与name. 顺便说一句，如果您使用 datatype: "local" 您必须删除或为andindex指定相同的值。indexname

所以最终的代码可能如下所示

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'），这是一个错误。

于 2013-07-24T18:06:34.193 回答