jqGrid - 垂直滚动条不显示

Question

我正在开发 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 代码：

<table id="list"></table>
<div id="pager"></div>

Answer 1

问题的存在可能是因为您使用了非常多的行数，而当前的虚拟滚动实现不允许显示如此多的行数。最大行数的确切限制取决于您使用的 Web 浏览器。看看我几年前发布的the bug report。另见the post。

问题如下。 jqGrid 在网格之外使用 div 并尝试将其高度设置为值parseInt(ts.p.records,10) * rowHeight（参见the line），其中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));
}

见the demo。但是这样的技巧将允许只显示网格的一些第一页。使 jqGrid 真正能够在虚拟滚动的情况下显示大量行 (scroll: 1) 需要重写 jqGrid 代码的某些部分。

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

告诉信任没有人会滚动超过 1,000,000 行。取而代之的是，需要提供良好的过滤/搜索可能性。例如使用filterToolbar 和advanced searching。设置相应的过滤器后，过滤后的数据可以显示在 1 到 10 页中，这样的数据显示起来真的很有趣。