jqgrid加载没有分页的大数据集

Question

我想知道是否有更好的方法从服务器加载大型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);
}

Answer 1

在本演示的示例中,您可以看到在使用时为网格加载1500行的时间gridview: 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');
            }
        }
    }
}

你可以在这里看到相应的例子.

在loadComplete函数的实现中我使用的事实是,jqGrid有loadonce:true参数使用内部参数_index,data并且可以用来访问网格的包含.在示例中,我禁用了列中不包含"200"的amount行.

更新:答案描述了如何使用rowattr回调来简化解决方案并获得最佳性能(如果gridview: true有原因).