jqGrid - 垂直滚动条不显示 [英] jqGrid - vertical scrollbar not showing

问题描述

我正在开发 jquery jqgrid 插件.在这个网格中，我有 1,000,000 条带有 scroll: 1 选项的记录.而且我的网格中有 rowNum: 10 选项.但只有前 10 行显示在网格和垂直滚动条中丢失.在标题中，我有从 1,000,000 显示 1-10"字符串.这意味着总数计算是正确的，但我不知道为什么缺少滚动条.谁能帮我解决这个问题?

I'm working on jquery jqgrid plugin. In this grid, I have 1,000,000 records with scroll: 1 option. and also I have rowNum: 10 option in my grid. But just first 10 row displayed in the grid and vertical scroll bar is missing. in the caption, I have "display 1-10 from 1,000,000" string. this means that the total number calculation is correct, but I don't know why scroll bar is missing. Can anyone help me to solve this problem?

我的 jqGrid 版本是:4.6.0.这是我的javascript代码:

My jqGrid version is: 4.6.0. Here is my javascript code:

 $(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 代码:

And this is my html code:

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

推荐答案

这个问题可能是因为你使用了非常多的行数，而当前的虚拟滚动实现不允许显示这么多的行数.最大行数的确切限制取决于您使用的 Web 浏览器.看看 我几年前发布的错误报告.请参阅 帖子另外.

The problem exist probably because you use very large number of rows and the current implementation of virtual scrolling don't allows to display such number of rows. The exact restriction of the maximal number of rows depend on the web browser which you use. Look at the bug report which I posted some years before. See the post additionally.

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

The problem is the following. jqGrid uses div outside of the grid and try to set its height to the value parseInt(ts.p.records,10) * rowHeight (see the line) where rowHeight is 23px. So jqGrid will try to set height to 23000000px in your case, but it will don't change the height value and one will see no vertical scroll bar.

大家可以尝试制作一些技巧，比如代码的用法之类的

One can try to make some tricks like the usage of the code like

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代码的某些部分.

see the demo. But such trick will allows to display only some first pages of the grid. The make jqGrid really able to display large number of rows in case of virtual scrolling (scroll: 1) one needs to rewrite some parts of jqGrid code.

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

I would suggest you better to use standard paging instead of virtual scrolling. The usage will have to use First/Previous/Next/Last buttons of the pager, but the most users who need to examine 1,000,000 rows of data can do this.

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

To tell the trust nobody will scroll over 1,000,000 rows. Instead of that one need provide good filtering/searching possibility. For example to use filterToolbar and advanced searching. After setting the corresponding filter the filtered data can be displayed in 1 till 10 pages and such data could be really interesting to display.

这篇关于jqGrid - 垂直滚动条不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！