误差在寻呼与本地阵列数据的jqGrid

Question

我现在面临的问题，在具有13条记录阵列数据的jqGrid分页，但记录没有在网页上显示。

如何实现分页，而不是滚动的？

    $(document).ready(function () {
        jQuery("#Table1").jqGrid({
            datatype: "local",
            height: 250,
            colNames: ['Inv No', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                { name: 'id', index: 'id', width: 60, sorttype: "int" },
                { name: 'name', index: 'name', width: 100 },
                { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                { name: 'note', index: 'note', width: 150,}
            ],
            rowNum:10,
        rowList:[10,20,30],
        pager: '#Div1',
            multiselect: true,
            caption: "Manipulating Array Data"
        });
        var mydata = [
                { id: "1", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                { id: "2", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                { id: "3", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                { id: "4", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                { id: "5", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                { id: "6", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                { id: "7", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                { id: "8", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                { id: "9", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                { id: "10", name: "test1", note: "note", amount: "500.00", tax: "10.00", total: "310.00" },
                { id: "11", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                { id: "12", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                { id: "13", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
        ];
        for (var i = 0; i <= mydata.length; i++)
            jQuery("#Table1").jqGrid('addRowData', i + 1, mydata[i]);
    });
</script>

---

<form id="form1" runat="server">
    <asp:Table ID="Table1" runat="server"></asp:Table>
    <div id="Div1"></div>
</form>

Answer 1

你在一个错误的方式填写的jqGrid。该方法addRowData是很老了。这是低层次的方法，允许手动添加一行。用3.7版开始（当前版本为4.6.0）的jqGrid支持本地数据，本地寻呼，排序和过滤。有优势的本地数据，你应该使用的jqGrid的数据参数。它可以让你在jqGrid的本地保存的所有数据（多为一个可以在一个页面上显示），但只能在表中的第一页填写。该代码将左右以下

$(document).ready(function () {
    var mydata = [
            { id: "1", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "2", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "3", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
            { id: "4", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "5", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "6", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
            { id: "7", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "8", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "9", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
            { id: "10", name: "test1", note: "note", amount: "500.00", tax: "10.00", total: "310.00" },
            { id: "11", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "12", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "13", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
        ];

    $("#Table1").jqGrid({
        datatype: "local",
        data: mydata,
        height: "auto",
        colNames: ['Inv No', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
            { name: 'id', width: 60, sorttype: "int", key: true },
            { name: 'name', width: 100 },
            { name: 'amount', width: 80, align: "right", sorttype: "float" },
            { name: 'tax', width: 80, align: "right", sorttype: "float" },
            { name: 'total', width: 80, align: "right", sorttype: "float" },
            { name: 'note', width: 150 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#Div1',
        multiselect: true,
        caption: "Manipulating Array Data",
        gridview: true,
        autoencode: true
    });
});

我在上面的代码data: mydata, gridview: true, autoencode: true参数添加，替换height: 250到height: "auto"，从index的所有项目中去除colModel财产，并添加key: true到包含我想作为ROWID使用唯一值的列。

我明白为什么你做的代码。 The official demo page含有非常旧的代码。例如，从“加载数据”演示\“阵列数据”包括像在你的代码相同的问题。顺便说一句代码包含甚至小bug：它使用i <= mydata.length的循环，而不是i < mydata.length。我问托尼（jqGrid的的开发者）来更新演示页，但他没有发现的时候了吧。 :-(

更新：The demo使用上面的代码，它工作正常。