jqgrid загружает большой набор данных без нумерации страниц

Question

Мне было интересно, есть ли лучший способ загрузить большой набор данных Json с сервера.

Я использую jqgrid в качестве loadonce:true. Мне нужно загрузить около 1500 записей одновременно, а также я не использую параметры нумерации страниц. Есть ли лучший способ добиться этого? Заранее спасибо.

Это мой Grid-код -

  $(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 причины).

Answer 2

Я бы хотел посмотреть на функцию автозагрузки при прокрутке в jqGrid. Я бы никогда не загрузил 1500 строк заранее. По какой причине вы не можете пейджировать?