我想知道是否有更好的方法从服务器加载大型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",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); }
在此演示的示例中,您可以看到在使用的情况下为网格加载1500行的时间gridview: true。
gridview: true
您的示例最大的性能问题在loadComplete函数内部。如果确实需要在网格上进行一些修改,则应使用jQuery来操纵网格包含。如果像示例中一样直接使用网格的DOM元素,则可以实现最佳性能
loadComplete
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'); } } } }
您可以在此处看到相应的示例。
在loadComplete函数的实现中,我使用了这样的事实:具有loadonce:true参数的jqGrid 使用内部参数_index,data并且可以用来访问网格的包含物。在示例中,我禁用了该列中不包含“ 200”的amount行。
loadonce:true
_index
data
amount