jqGrid - 垂直滚动条未显示

Question

jqGrid - 垂直滚动条未显示

3

我正在处理jquery jqgrid插件。在这个网格中，我有100万条记录，并使用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>

- hamed

你在网格中是否明确指定了 height 选项，并将其设置为除 "auto" 和 "100%" 以外的其他值？例如，尝试指定 height: 230，这足以显示标准文本的10行。您能否发布更多关于您所做的事情的信息？您使用的jqGrid版本是什么？问题只存在于某些特定版本的jqGrid中吗？ - Oleg

谢谢您的回复。我会更新我的问题并添加额外的信息。感谢您的关注。 - hamed

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

可能存在的问题是，您使用了非常大量的行，而当前的虚拟滚动实现不允许显示这么多的行。最大行数的确切限制取决于您使用的Web浏览器。请参考我几年前发布的错误报告。此外，请参考这篇帖子。

问题如下：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));
}

请查看演示。但这种技巧只能显示网格的前几页。为了使jqGrid在虚拟滚动(scroll: 1)的情况下真正能够显示大量行，需要重写jqGrid代码的某些部分。

我建议您使用标准分页而不是虚拟滚动。用户将需要使用分页器的第一个/上一个/下一个/最后一个按钮，但是大多数需要检查100万行数据的用户都可以做到这一点。

说实话，没有人会滚动超过100万行。相反，需要提供良好的过滤/搜索功能。例如，使用filterToolbar和高级搜索。设置相应的过滤器后，过滤后的数据可以显示在1到10页中，这样的数据确实很有趣。