使用本地数组数据在gqgrid中进行页面调整时出错 [英] Error in Pageing in gqgrid with local array data

问题描述

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



你能帮我实现吗分页而不是滚动。



< script type =text / ecmascript>

$（document）.ready（function（ ）{

jQuery（＃Table1）。jqGrid（{

datatype：local，

身高：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}，

{名称：'tax'，index：'tax'，widt h：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]，

寻呼机：'＃Div1'，

viewrecords：true，

sortorder：desc，

标题：操作数组数据

}）;

jQuery（＃ Table1）。jqGrid（'navGrid'，'＃Div1'，{edit：false，add：false，del：false}）;

var mydata = [

{id：1，名称：test1，注：note，金额：200.00，税：10.00，总计：210.00}，

{id： 2，名称：test2，注：note2，金额：300.00，税：20.00，总计：320.00}，

{id：3，名称：test3，注：note3，金额：400.00，税：30.00，总计：430.00}，

{id：4，名称：test1，注：note，金额：200.00，税：10.00，总计：210.00}，

{id： 5，名称：test2，注：note2，金额：300.00，税：20.00，总计：320.00}，

{id：6，名称：test3，注：note3，金额：400.00，税：30.00，总计：430.00}，

{id：7，姓名：test1 ，注意：注意，金额：200.00，税：10.00，总计：210.00}，

{id：8，名称：test2，注意： note2，金额：300.00，税：20.00，总计：320.00}，

{id：9，名称：test3，注：note3，金额：400.00，税：30.00，总计：430.00}，

{id：10，名称：test1，注：note，金额：500.00 ，税：10.00，总计：310.00}，

{id：11，名称：test1，注：note，金额：200.00，税：10.00，总计：210.00}，

{id： 12，名称：test2，注：note2，金额：300.00，税：20.00，总计：320.00}，

{id：13，名称：test3，注：note3，金额：400.00，税：30.00，总计：430.00}

];

for（var i = 0; i< = mydata.length; i ++）

jQuery（＃Table1）。jqGrid（'addRowData'，i + 1，mydata [i]）;

}）;

< / script>





_______________________________________________________________________________________



< pre lang =xml> < body >
< 表格 id = form1 runat = 服务器 >
< asp：表 ID = 表1 < span class =code-attribute> runat = server > < / asp：表格 >
< div id = Div1 > < / div >
< / form >
< / body >

解决方案

（document）.ready（function（）{

jQuery（＃Table1）。jqGrid（{

数据类型：local，

身高：250，

colNames：['Inv No'，'Client'，'Amount'，'Tax'，'Total '，'注意']，

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，s orttype：float}，

{name：'note'，index：'note'，width：150，}

]，

rowNum：10，

rowList：[10,20,30]，

寻呼机：'＃Div1'，

viewrecords：true，

sortorder：desc，

标题：操作数组数据

}）;

jQuery（ ＃Table1）。jqGrid（'navGrid'，'＃Div1'，{edit：false，add：false，del：false}）;

var mydata = [

{id：1，名称：test1，注：note，金额：200.00，税：10.00，总计：210.00}，

{id ：2，名称：test2，注：note2，金额：300.00，税：20.00，总计：320.00}，

{id：3 ，名称：test3，注：note3，金额：400.00，税：30.00，总计：430.00}，

{id：4，名称：test1，注：note，金额：200.00，税：10.00，总计：210.00}，

{id： 5，名称：test2，注：note2，金额：300.00，税：20.00，总计：320.00}，

{id：6，名称：test3，注：note3，金额：400.00，税：30.00，总计：430.00}，

{id：7，姓名：test1 ，注意：注意，金额：200.00，税：10.00，总计：210.00}，

{id：8，名称：test2，注意： note2，金额：300.00，税：20.00，总计：320.00}，

{id：9，名称：test3，注：note3，金额：400.00，税：30.00，总计：430.00}，

{id：10，名称：test1，注：note，金额：500.00 ，税：10.00，总计：310.00}，

{id：11，名称：test1，注：note，金额：200.00，税： 10.00，总计：210.00}，

{id：12，n ame：test2，注：note2，金额：300.00，税：20.00，总计：320.00}，

{id：13，姓名：test3 ，注意：note3，金额：400.00，税：30.00，总计：430.00}

];

for（var i = 0 ; i< = mydata.length; i ++）

jQuery（＃Table1）。jqGrid（'addRowData'，i + 1，mydata [i]）;

}）;

< / script>





_______________________________________________________________________________________



< pre lang =xml> < body >
< 表格 id = form1 runat = 服务器 >
< asp：表 ID = 表1 < span class =code-attribute> runat = server > < / asp：表格 >
< div id = Div1 > < / div >
< / form >
< / body >

I am facing problem with pagination in jqgrid with array data having 13 records, but the records are not displaying in pages.

Can you please help me to implement pagination instead of scrolling.

<script type="text/ecmascript">
$(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',
viewrecords: true,
sortorder: "desc",
caption: "Manipulating Array Data"
});
jQuery("#Table1").jqGrid('navGrid', '#Div1', { edit: false, add: false, del: false });
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>


_______________________________________________________________________________________

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

解决方案

(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',
viewrecords: true,
sortorder: "desc",
caption: "Manipulating Array Data"
});
jQuery("#Table1").jqGrid('navGrid', '#Div1', { edit: false, add: false, del: false });
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>


_______________________________________________________________________________________

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

这篇关于使用本地数组数据在gqgrid中进行页面调整时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！