我想知道是否有更好的方法从服务器加载大型Json数据集.
我使用jqgrid作为loadonce：true.我需要一次加载大约1500条记录,我也不使用分页选项.有没有更好的方法来实现这一目标？先感谢您.
这是我的网格代码 –
$(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",{name:'name',index:'name',width:100,{name:'amount',index:'amount',width:80,align:"right",sorttype:"float"},{name:'tax',index:'tax',sorttype:"float",{name:'total',index:'total',{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,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);
}
解决方法
在
this demo的示例中,您可以看到在使用gridview时为网格加载1500行的时间：true.
您的示例中性能最高的问题是在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');
}
}
}
}
您可以看到相应的示例直播here.
在loadComplete函数的实现中我使用的事实是,jqGrid有loadonce：true参数使用内部参数_index和数据,可用于访问网格的包含.在示例中,我禁用了amount列中不包含“200”的行.
更新：The answer描述了如何使用rowattr回调来简化解决方案并获得最佳性能(在gridview的情况下：原因).
