jqGrid – 不显示垂直滚动条

我正在研究jquery jqgrid插件。 在这个网格中,我有1,000,000条带有scroll: 1选项的记录。 我的网格中也有rowNum: 10选项。 但只有网格中显示的前10行和垂直滚动条缺失。 在标题中,我有“从1,000,000显示1-10”字符串。 这意味着总数计算是正确的,但我不知道为什么滚动条缺失。 任何人都可以帮我解决这个问题吗?

编辑:我的jqGrid版本是: 4.6.0 。 这是我的javascript代码:

  $(document).ready(function() { var colModel = [ {name: "id", width: 200, align: "center", searchoptions: {clearSearch: false}, hidden: true, hiddenlg: true}, {name: "ordernumber", width: 200, align: "center", searchoptions: {clearSearch: false}}, {name: "customer.fname", width: 200, align: "center", searchoptions: {clearSearch: false}}, {name: "customer.lname", width: 200, align: "center", searchoptions: {clearSearch: false}}, ]; $("#list").jqGrid({ url: "/orders/listGrid", datatype: "json", mtype: "POST", colNames: ["", "1", "2", "3"], colModel: colModel, pager: "#pager", rowNum: 10, rowList: [10, 20, 30], viewrecords: true, multiSort: false, gridview: true, autoencode: true, shrinkToFit: false, autowidth: true, scroll: 1, direction: "rtl", height: 230, caption: "Test", hidegrid: false, ajaxGridOptions: { contentType: "application/json; charset=utf-8" }, serializeGridData: function(data) { return JSON.stringify(data); }, }); }); 

这是我的HTML代码:

 

存在的问题可能是因为您使用了非常多的行,并且虚拟滚动的当前实现不允许显示这样的行数。 最大行数的确切限制取决于您使用的Web浏览器。 看看我几年前发布的错误报告 。 另外看post 。

问题如下。 jqGrid在网格外部使用div,并尝试将其高度设置为值parseInt(ts.p.records,10) * rowHeight (参见行 ),其中rowHeight为23px。 因此jqGrid将尝试在您的情况下将height设置为23000000px ,但它不会更改height值,并且将看不到垂直滚动条。

人们可以试着像使用代码那样制作一些技巧

 jsonReader: { records: function (obj) { // return not so large value of records return Math.min(66692, obj.records); } }, loadComplete: function (data) { var $self = $(this), p = $self.jqGrid("getGridParam"), numberFormat = $.fmatter.util.NumberFormat || $.fmatter.NumberFormat, fmt = $.jgrid.formatter.integer || {}, from = numberFormat(parseInt(p.page,10), fmt), to = numberFormat((parseInt(p.page,10)-1)*parseInt(p.rowNum,10) + p.reccount, fmt), total = numberFormat(parseInt(data.records,10), fmt); // use correct value // fix the displayed row numbers $(".ui-paging-info", p.pager) .html($.jgrid.format(p.recordtext, from, to, total)); } 

看演示 。 但是这样的技巧只允许显示网格的第一页。 make jqGrid实际上能够在虚拟滚动的情况下显示大量行( scroll: 1 ),需要重写jqGrid代码的某些部分。

我建议你最好使用标准分页而不是虚拟滚动。 用法必须使用寻呼机的First / Previous / Next / Last按钮,但需要检查1,000,000行数据的大多数用户可以执行此操作。

为了告诉信任,没有人会滚动超过1,000,000行。 而不是那个需要提供良好的过滤/搜索可能性。 例如,使用filterToolbar和高级搜索 。 在设置相应的filter之后,过滤的数据可以在1到10页中显示,并且这样的数据可能真的很有趣。