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

如何解决jqgrid加载没有分页的大数据集

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

    

解决方法

在此演示的示例中，您可以看到在使用

gridview: true

的情况下为网格加载1500行的时间。 您的示例最大的性能问题在are2ѭ函数内部。如果确实需要在网格上进行一些修改，则应使用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

函数的实现中，我使用了一个事实，即具有

loadonce:true

参数的jqGrid使用内部参数

_index

和

data

，它们可用于访问网格的包含。在示例中，我在

amount

列中禁用了不包含\“ 200 \”的行。 更新：答案描述了如何使用

rowattr

回调来简化解决方案并获得最佳性能（如果原因为

gridview: true

）。     ,我很想研究jqGrid的滚动自动加载功能。我永远不会预先加载1500行。有什么原因您无法寻呼？