jqgrid 加载大数据集而不分页-前端问题

jqgrid load large data set without pagination(jqgrid 加载大数据集而不分页)

本文介绍了jqgrid 加载大数据集而不分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道是否有更好的方法从服务器加载大型 Json 数据集.

我使用 jqgrid 作为 loadonce:true.我需要一次加载大约 1500 条记录，而且我不使用分页选项.有没有更好的方法来实现这一目标?提前谢谢你.

这是我的网格代码 -

 $(function(){$("#testgrid").jqGrid({网址:getGridUrl，数据类型:'json'，mtype: 'GET',身高:250，colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],col型号:[{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}],多选:真，multiboxonly:真，标题:操作数组数据"，寻呼机:'#testgridpager',//滚动时自动加载//滚动:真，//隐藏寻呼机按钮pgbuttons:假，记录文本:''，pgtext:'',加载一次:真，排序名称:'id'，排序顺序:'asc'，观看记录:真实，多选:真，jsonReader:{根:行"，//页面:页面"，//总计:总计"，记录:记录"，重复项:错误，细胞:细胞"，身份证:身份证"},加载完成:函数(数据){变量行号；//警报(数据长度)；//alert('加载完成'+data.rows.length);//如果模式设置为真，则设置复选框为假如果(模式){for(var i=0;i

解决方案

以this demo 你可以看到在使用 gridview: true 的情况下为你的网格加载 1500 行的时间.

您的示例的最大性能问题是在 loadComplete 函数内部.如果您确实需要对网格进行一些修改，您应该使用 jQuery 来操作网格包含.如果您像示例中那样直接使用网格的 DOM 元素，则可以归档的最佳性能

loadComplete: function() {var i=0, 索引 = this.p._index, localdata = this.p.data,rows=this.rows, rowsCount = rows.length, row, rowid, rowData, className;for(;i

您可以在这里查看相应的示例..p>

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

更新:答案描述了如何使用rowattr回调以简化解决方案并获得最佳性能(在 gridview: true 的情况下).

I was wondering whether there is a better way to load large Json data set from the server.



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.

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);
}

 解决方案 
On example of this demo you can see the time of loading 1500 rows for your grid in case of usage of gridview: true.

The most performance problem of your example are inside of loadComplete function. 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: 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 loadComplete function I use the fact, that jqGrid having loadonce:true parameter use internal parameters _index and data which can be used to access the contain of the grid. In the example I disabled the rows which not contain "200" in the amount column.

UPDATED: The answer describes how to use rowattr callback to simplify the solution and to have the best performance (in case of gridview: true of cause).

                        这篇关于jqgrid 加载大数据集而不分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！