使用滚动重新加载 Jqgrid 时出现问题 - 重复的行数据并缺少最后一页
Issue while reloading Jqgrid with Scroll - Duplicate row data and missing last page
请参考下面的代码,我用它来从数据库加载数据。代码在第一次加载数据时工作正常。每条记录和每个页面都能完美加载。
现在,如果我调用重新加载函数,它会产生问题。
- 有时它会加载重复的行(比如如果我的 jason 返回 20 行,网格将显示 40 行)
- 我丢失了网格中记录的最后一页。
jQuery("#list").jqGrid({
url: "http://localhost/myapp/myfile.php",
datatype: "json",
mtype:"POST",
postData:{folder: 'INBOX' },
jsonReader:
{
root: "rows",
page: "currpage",
total: "totalpages",
records: "totalrecords",
id: "0",
cell:"",
repeatitems: false
},
colNames: ['Id','Message'],
colModel: [
{ name: 'messageid', index: 'messageid', hidden: true, search:false},
{ name: 'message', index: 'message', search:false},
],
rowNum: 10,
scroll: 1,
prmNames:{npage:1},
autowidth: true,
height: 470,
loadonce: true,
viewrecords: true,
altRows:true,
caption: "",
pager: "#plist",
});
jQuery("#list").jqGrid('setFrozenColumns');
function reload_list()
{
$("#list").setGridParam({datatype:'json'}).trigger('reloadGrid');
}
请注意以下信息
我正在使用的框架是带有JqGrid Version jquery.jqGrid-4.3.1的Codeigniter。
我包含在代码中的文件是
- css/ui.jqgrid.css
- js/grid.locale-en.js
- js/jquery.jqGrid.src.js
- plugins/grid.postext.js
- src/jqModal.js
- src/jqDnR.js
演示:http://www.trimantra.com/demo/appointmentsystem/grid.php
请让我知道如何解决此问题。提前谢谢。
从代码中删除此行:
jQuery("#list").jqGrid('setFrozenColumns');
正因为如此,它正在创建一个新行。
我无法重现行重复的问题,但我可以在您的应用程序中看到许多其他问题。
我想您的主要问题是因为您在所有三个网格中加载具有相同 id 的数据。由于结果您在页面上重复了 id。解决此问题的最简单方法是使用 jqGrid idPrefix
选项。
下面列出了我发现的最重要的问题:
- 您在应用程序中错误地包含了 jQuery UI。您没有包含主题
images
子目录。因此,应用程序在加载http://www.trimantra.com/demo/appointmentsystem/lib/jquery.jqGrid-4.3.1/themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png
时收到" HTTP/1.1 404未找到"错误。应在项目中包括所有images
。 - 您不会在网格中使用
idPrefix
选项,而是在三个网格中加载相同的数据。因此,所有三个网格都将具有具有相同 id 的<tr>
元素.HTML不允许 id 重复。要解决此问题,您可以使用例如idPrefix: "a"
、idPrefix: "b"
、idPrefix: "c"
用于三个网格。作为结果,具有messageid: "45"
的行将在第一个网格中id="a45"
,在最后一个网格中id="b45"
和id="c45"
,并且页面上将没有 id 重复项。 - 我认为
scroll: 1
和loadonce: true
的结合没有任何意义.如果我了解您需要做什么,您应该从所有网格中删除scroll: 1
和prmNames:{npage:1}
。虚拟滚动需要这些选项。 - 您应该添加
gridview: true
选项,该选项将在大量行的情况下多次提高网格的性能。 - 生成服务器的服务器响应当前不对应于 jqGrid 请求。请求将包含
rows=10
、page=1
、sidx=toname
、sord=asc
。服务器返回所有 48 行数据,并且数据未排序。无论如何,您都应该在服务器代码中插入数据排序。 - 您可以在所有可见列中使用
frozen:true
。我认为设置没有任何意义。 - 如果不需要显示列
'messageid'
则可以从colModel
中删除列定义并使用jsonReader: {id: "messageid", repeatitems: false }
。作为结果,将保存在页面上的位置(隐藏的列仍然在页面上放置)。 - 您最好以与区域设置无关的格式 ISO 8601 传输日期。此外,您应该使用
05/16/2012 07:45 AM
formatter: 'data'
以您可以使用formatoptions: { newformat: "d/m/Y H:i A" }
.主要好处是在使用loadonce: true
的情况下列的正确排序顺序。 - 应从
colModel
定义中删除尾随逗号。组合},]
是 JavaScript 中的一个错误。该错误将在最现代的Web浏览器中被忽略(但在IE6等旧版本中不会)。最好编写无错误的代码。
相关文章:
- 数据表自动生成的序列号无法正常工作.对于每一页
- PagingToolbar的Extjs问题-下一页的数据相同
- 从页面上点击的链接中删除数据,然后移动到下一页&在CasperJS中重复
- 一页上的多个数据表不起作用
- 如何将数据传递到HighCharts中的下一页
- 如果下一页或其他某个页面 JQuery 数据表中存在该行,如何删除该行
- 使用滚动重新加载 Jqgrid 时出现问题 - 重复的行数据并缺少最后一页
- 如何一次获取一页的数据
- 数据表在页面加载时转到最后一页
- 选择2-无限滚动不加载带有远程数据的下一页
- 有两个html页面.当我从下一页恢复到第一页时,我希望保存第一页的数据状态
- 一页上有多个表的数据表
- 当一页上有超过24个表单时,操作表单数据
- 富文本编辑器(使用YUI简单文本编辑器)未将数据发送到下一页
- 从前一页的数据传输到第二页PHP/MySQL
- Javascript发布数据并转到下一页
- 在yii2中将数据传递到下一页
- 在JS中发送数据到下一页以触发事件
- 为什么下面的JSPDF代码在下一页上打印数据?
- C#将表单元格数据从一页发送到另一页