使用本地数组数据在gqgrid中分页时出错

Error in Paging in gqgrid with local array data

本文关键字：gqgrid 分页 出错 数据 数组      更新时间：2023-09-26

我在jqgrid中遇到了分页问题，数组数据有13条记录，但这些记录没有显示在页面中。

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

    $(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>

您以错误的方式填充jqGrid。方法addRowData非常古老。它是一种低级方法，允许手动添加行。从3.7版本开始（当前版本为4.6.0），jqGrid支持本地数据、本地分页、排序和过滤。要利用本地数据，您应该使用jqGrid的data参数。它允许您在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"，从colModel的所有项中删除了index属性，并将key: true添加到包含我要用作rowid的唯一值的列中。

我理解你为什么编写代码。官方演示页面包含非常旧的代码。例如，"Loading Data"''"Array Data"中的演示包含与代码中相同的问题。顺便说一句，代码甚至包含一个小错误：它在循环中使用i <= mydata.length而不是i < mydata.length。我请Tony（jqGrid的开发人员）更新演示页面，但他没有找到时间

更新：演示使用了上面的代码，并且按预期工作。

相关文章：