Question

我在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>

Answer 1

你以错误的方式填充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"，从index的所有项中移除了colModel属性，并添加了{{1}包含我想用作rowid的唯一值的列。

我理解为什么你制作代码。 The official demo page包含非常旧的代码。例如，“加载数据”\“阵列数据”中的演示包含与代码中相同的问题。顺便说一句，代码甚至包含小错误：它在循环中使用key: true而不是i <= mydata.length。我让Tony（jqGrid的开发人员）更新了演示页面，但他没有找到时间。 :-(

更新：The demo使用上述代码并按预期工作。

使用本地数组数据在jqgrid中进行分页时出错

1 个答案: