jqGrid - 垂直滚动条不显示
jqGrid - vertical scrollbar not showing
我正在开发 jquery jqgrid 插件。在这个网格中,我有 1,000,000 条带有 scroll: 1
选项的记录。而且我的网格中还有 rowNum: 10
选项。但是只显示在网格中的前 10 行和垂直滚动条丢失了。在标题中,我有 "display 1-10 from 1,000,000" 字符串。这意味着总数计算是正确的,但我不知道为什么缺少滚动条。谁能帮我解决这个问题?
编辑: 我的 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>
问题的存在可能是因为您使用了非常多的行,而当前的虚拟滚动实现不允许显示如此多的行。最大行数的确切限制取决于您使用的网络浏览器。另外看看the bug report which I posted some years before. See 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 行。取而代之的是需要提供良好的 filtering/searching 可能性。例如使用 filterToolbar and advanced searching。设置相应的过滤器后,过滤后的数据可以显示在1到10页中,这样的数据显示起来真的很有趣。
我正在开发 jquery jqgrid 插件。在这个网格中,我有 1,000,000 条带有 scroll: 1
选项的记录。而且我的网格中还有 rowNum: 10
选项。但是只显示在网格中的前 10 行和垂直滚动条丢失了。在标题中,我有 "display 1-10 from 1,000,000" 字符串。这意味着总数计算是正确的,但我不知道为什么缺少滚动条。谁能帮我解决这个问题?
编辑: 我的 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>
问题的存在可能是因为您使用了非常多的行,而当前的虚拟滚动实现不允许显示如此多的行。最大行数的确切限制取决于您使用的网络浏览器。另外看看the bug report which I posted some years before. See 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 行。取而代之的是需要提供良好的 filtering/searching 可能性。例如使用 filterToolbar and advanced searching。设置相应的过滤器后,过滤后的数据可以显示在1到10页中,这样的数据显示起来真的很有趣。