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>

我的问题是寻呼机显示，但是显示“1中的0”，然后只显示所有行而不是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属性添加到mydata数组。您可以在key: true的{{1}}列定义中添加num属性。之后，jqGrid将使用colModel列中的值作为“rowid”（分配给网格的num元素的id属性的值）。

此外，我建议您在所有网格中使用<tr>选项，如果使用与gridview: true相同的值，则从index移除colModel。顺便说一下，如果您使用数据类型：“local”，必须删除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），这是一个错误。

在我更改视图之前，JQGrid寻呼机不会显示

1 个答案: