jQuery jqgrid加载大数据集无需分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5664587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqgrid load large data set without pagination
提问by Sam
I was wondering whether there is a better way to load large Json data set from the server.
我想知道是否有更好的方法从服务器加载大型 Json 数据集。
I am using jqgrid as loadonce:true. i need to load around 1500 records at once and also i don't use pagination options. is there any better way to achieve this? Thank you in advance.
我使用 jqgrid 作为 loadonce:true。我需要一次加载大约 1500 条记录，而且我不使用分页选项。有没有更好的方法来实现这一目标？先感谢您。
This is my Grid code -
这是我的网格代码 -
$(function(){
$("#testgrid").jqGrid({
url:getGridUrl,
datatype: 'json',
mtype: 'GET',
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int",search:false},
{name:'invdate',index:'invdate', width:90, sorttype:"date",search:false},
{name:'name',index:'name', width:100,search:false},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float",search:false},
{name:'total',index:'total', width:80,align:"right",sorttype:"float",search:false},
{name:'note',index:'note', width:150, sortable:false,search:false}
],
multiselect: true,
multiboxonly:true,
caption: "Manipulating Array Data",
pager: '#testgridpager',
//Auto load while scrolling
//scroll: true,
//to hide pager buttons
pgbuttons:false,
recordtext:'',
pgtext:'',
loadonce: true,
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
multiselect: true,
jsonReader : {
root: "rows",
//page: "page",
//total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
},
loadComplete: function(data) {
var rowId;
//alert(data.length);
//alert('load complete'+data.rows.length);
//set checkboxes false if mode is set to true
if(mode){
for(var i=0;i<data.rows.length;i++){
rowId=data.rows[i].id;
disableRow(rowId);
var searchVal = $("#gs_amount").val().trim();
if(searchVal ==data.rows[i].amount){
jQuery("#testgrid").jqGrid('setSelection',rowId);
//heighlightSearch();
}
}
}
}
});
//toolbar search
$("#testgrid").jqGrid('filterToolbar',{stringResult:true,searchOnEnter:false});
});
function disableRow(rowId){
$("#testgrid").jqGrid('setRowData', rowId, false, {color:'gray'});
var trElement = jQuery("#"+ rowId,$('#testgrid'));
trElement.removeClass("ui-state-hover");
trElement.addClass('ui-state-disabled');
trElement.attr("disabled",true);
}
回答by Oleg
On example of this demoyou can see the time of loading 1500 rows for your grid in case of usage of gridview: true.
在此演示的示例中，您可以看到在使用gridview: true.
The most performance problem of your example are inside of loadCompletefunction. If you do need to make some modifications on the grid you should use jQuery to manipulate the grid contain. The best performance you can archive if you use DOM elements of the grid directly like in the example
您的示例中最大的性能问题是在loadComplete函数内部。如果您确实需要对网格进行一些修改，您应该使用 jQuery 来操作网格包含。如果像示例中那样直接使用网格的 DOM 元素，则可以获得最佳性能
loadComplete: function() {
var i=0, indexes = this.p._index, localdata = this.p.data,
rows=this.rows, rowsCount = rows.length, row, rowid, rowData, className;
for(;i<rowsCount;i++) {
row = rows[i];
className = row.className;
//if ($(row).hasClass('jqgrow')) { // test for standard row
if (className.indexOf('jqgrow') !== -1) {
rowid = row.id;
rowData = localdata[indexes[rowid]];
if (rowData.amount !== "200") {
// if (!$(row).hasClass('ui-state-disabled')) {
if (className.indexOf('ui-state-disabled') === -1) {
row.className = className + ' ui-state-disabled';
}
//$(row).addClass('ui-state-disabled');
}
}
}
}
You can see the corresponding example live here.
您可以在此处查看相应的示例。
In the implementation of loadCompletefunction I use the fact, that jqGrid having loadonce:trueparameter use internal parameters _indexand datawhich can be used to access the contain of the grid. In the example I disabled the rows which not contain "200" in the amountcolumn.
在执行loadComplete函数I使用事实，即具有的jqGridloadonce:true参数使用内部参数_index和data其可用于访问包含网格的。在示例中，我禁用了列中不包含“200”的amount行。
UPDATED: The answerdescribes how to use rowattrcallback to simplify the solution and to have the best performance (in case of gridview: trueof cause).
更新：答案描述了如何使用rowattr回调来简化解决方案并获得最佳性能（以防万一gridview: true）。
回答by redsquare
I would be tempted to look into the Autoloading on scroll feature of jqGrid. I would never load 1500 rows upfront. Any reason you cannot page?
我很想研究 jqGrid 的滚动自动加载功能。我永远不会预先加载 1500 行。有什么原因不能翻页？
