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(请参阅

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));
}

请参见演示.但是这种技巧只能显示网格的某些首页.在进行虚拟滚动(scroll: 1)的情况下，使jqGrid真正能够显示大量行是需要重写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.

我建议您最好使用标准分页而不是虚拟滚动.用法必须使用寻呼机的上一个"/上一个"/下一个"/最后一个"按钮，但是大多数需要检查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 和

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屋！