使用滚动重新加载 Jqgrid 时出现问题 - 重复的行数据并缺少最后一页

Issue while reloading Jqgrid with Scroll - Duplicate row data and missing last page

本文关键字:数据 一页 最后 问题 新加载 滚动 加载 Jqgrid      更新时间:2023-09-26

请参考下面的代码,我用它来从数据库加载数据。代码在第一次加载数据时工作正常。每条记录和每个页面都能完美加载。

现在,如果我调用重新加载函数,它会产生问题。

  1. 有时它会加载重复的行(比如如果我的 jason 返回 20 行,网格将显示 40 行)
  2. 我丢失了网格中记录的最后一页。

 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.1Codeigniter

我包含在代码中的文件是

  1. css/ui.jqgrid.css
  2. js/grid.locale-en.js
  3. js/jquery.jqGrid.src.js
  4. plugins/grid.postext.js
  5. src/jqModal.js
  6. 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: 1loadonce: true的结合没有任何意义.如果我了解您需要做什么,您应该从所有网格中删除scroll: 1prmNames:{npage:1}。虚拟滚动需要这些选项。
  • 您应该添加gridview: true选项,该选项将在大量行的情况下多次提高网格的性能。
  • 生成服务器的服务器响应当前不对应于 jqGrid 请求。请求将包含rows=10page=1sidx=tonamesord=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等旧版本中不会)。最好编写无错误的代码。