Как очистить большие данные из таблицы jqgrid?

Question

Данные, поступающие как часть вызова ajax из моего бизнес-класса, выглядят следующим образом:

[{
    "user_action": "<button class='detail-icon' title='Vehicle Pass           History'onclick='javascript:openPopUpWagonList(&#39;DIM  008065&#39;);'> <img  src='/WIMS/images/icon_detail.png'></button>",
    "VEHICLE_ID": "DIM  008065",
    "setFlag": "<img src='/WIMS/images/wims-tick.gif'>",
    "clrFlag": "<img src='/WIMS/images/wims-tick.gif'>",
    "setDate": "31 Jul 2010 11:11",
    "lastClearDate": "24 Aug 2010 07:26",
    "noOfdays": "24",
    "ownerCode": "",
    "operatorCode": "",
    "maintainerCode": "",
    "severity10Pass": "~",
    "plot": "<button class='detail-icon' title='Plot' alt='Detail'onclick='javascript:popUpStepChangeListGraph(&#39;DIM  008065&#39;);'> <img src='/WIMS/images/icon_detail.png'></button>",
    "activeFlag": "1"
}, {
    "user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList(&#39;N    005276&#39;);'> <img src='/WIMS/images/icon_detail.png'></button>",
    "VEHICLE_ID": "N    005276",
    "setFlag": "<img src='/WIMS/images/wims-tick.gif'>",
    "clrFlag": "",
    "setDate": "31 Aug 2011 10:05",
    "lastClearDate": "24 Mar 2011 10:45",
    "noOfdays": "0",
    "ownerCode": "",
    "operatorCode": "",
    "maintainerCode": "",
    "severity10Pass": "~~~",
    "plot": "<button class='detail-icon' title='Plot' alt='Detail'onclick='javascript:popUpStepChangeListGraph(&#39;N    005276&#39;);'> <img src='/WIMS/images/icon_detail.png'></button>",
    "activeFlag": "1"
}]

Здесь я взял только 2 записи для удобства чтения, но я отображаю более 150 таких записей.

Теперь мой формат вызова ajax со страницы JSP выглядит следующим образом:

$.ajax({
    type: "POST",    
    url: f_reqAction, // url is set already    
    data : {maintainer:maintainerValue,show:showValue},    
    dataType:'json',    
    async: true, /* If set to non-async, browser shows page as "Loading.."*/     
    cache: false,
    timeout:80000, /* Timeout in ms */
    success: handleApplyEventResponse,
    error: handleResponseError
});

function handleApplyEventResponse(response) {
    // response is coming from my business class
    $("#stepChangeData").jqGrid('clearGridData');
    if(response.length > 0){
        for(var i=0;i<response.length;i++){
            jQuery("#stepChangeData").jqGrid('addRowData',i+1,response[i]);
        }  
        $('#stepChangeData').setGridParam({rowNum:response.length});
    }
}

Когда я хочу удалить данные, вызвав jQuery("#gridtabID").jqGrid('clearGridData');, появляется сообщение об ошибке JavaScript, предлагающее прекратить запуск скрипта. но если размер данных небольшой, например 20 или 30, проблема не возникает.

Я понимаю, что заполнение данных ответа вызовом jqGrid('addRowData' внутри цикла for неэффективно, когда данные настолько велики. но я не смог найти API jqgrid, который может добавить эти данные ответа непосредственно в сетку без каких-либо циклов.

И я не смог создать кнопки, содержащиеся в моих данных json, с помощью параметра форматирования colModel, так как мне было очень сложно создать этот тип кнопки с помощью formatter. Поэтому я создал ее в своем бизнес-лигике и отправил в jsp страница с данными json как часть ajax respose.

Так что в вышеприведенном контексте я бы хотел иметь API, который мог бы срочно установить эти данные json в сетку (т. Е. Без зацикливания). И я думаю, что таким образом эту проблему сценария можно было бы избежать.

Answer 1

Лучший способ заполнить jqGrid данными JSON с сервера, чтобы использовать datatype: 'json' и загрузки данных с сервера. jqGrid очень гибок, и можно загружать практически любые данные. Нужно просто использовать соответствующее jsonReader или jsonmap свойство colModel. Иногда необходимо дополнительно использовать опцию ajaxGridOptions, serializeGridData или beforeProcessing обратные вызовы. Следует дополнительно использовать gridview: true параметр jqGrid.

Разница в использовании addRowData огромна. Основным недостатком использования addRowData является то, что данные будут размещаться в строке сетки для каждой строки. Проблема заключается в том, что если вы изменяете элемент на странице или вставляете новый , то позиция всех существующих элементов на странице должна быть пересчитана веб-браузером. Поскольку вы используете addRowData в цикле, то положение строки, которая будет вставлена ​​первой, должно быть пересчитано также после любой вставки следующих строк. Таким образом, чем больше строк нужно вставить, тем медленнее будет код. Из-за проблемы в jQuery 1.4 был введен метод jQuery.detach , который позволяет временно удалить элемент со страницы, изменить его и затем поместить обратно любым стандартным методом jQuery, таким как jQuery.after * 1023. *, jQuery.append и многие другие.

Если вы используете datatype: 'json' и gridview: true, полное тело сетки будет построено как строка, а затем помещено в сетку как одна операция вставки . Таким образом, вы получите намного лучшую производительность, как с addRowData в случае большого количества вставленных строк.

ОБНОВЛЕНО : На демоверсия Я показываю, как можно реализовать загрузку данных непосредственно в jqGrid. Я рекомендую вам использовать предопределенные или пользовательские jqGrid форматеры. Например, для правильной сортировки данных необходимо включить дату в формате ISO 8601 и использовать formatter: 'date' с соответствующими параметрами для отображения даты.

Кроме того, я не рекомендую вам использовать пробелы внутри ID. Я предположил, что VEHICLE_ID является уникальным id ваших данных. Я использовал его, но удалил все пробелы из значения.

О функции использования внутри postData Рекомендую прочитать мой старый ответ .

Самая важная часть кода демки, которую вы найдете ниже

var maintainerValue = 1, showValue = 200, $grid = $("#list");

$grid.jqGrid({
    url: 'DebaprasadJana.json',
    datatype: 'json',
    mtype: "POST",
    postData: {
        maintainer: function () {
            // if maintainerValue will be get from a field on the page
            // one can get the data here directly like
            //     return $("#maintainer").val();
            return maintainerValue;
        },
        show: function () {
            return showValue;
        }
    },
    loadonce: true,
    gridview: true,
    jsonReader: {
        repeatitems: false,
        id: function (obj) {
            // we can use VEHICLE_ID as the rowid, but cut spaces
            return obj.VEHICLE_ID.replace(/\s/g, '');
        },
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
});
$("#reload").click(function () {
    // next two lines simulate reading of the
    // current values of maintainerValue and showValue 
    maintainerValue++;
    showValue--;
    // we need reset datatype only if we use loadonce:true
    $grid.jqGrid('setGridParam', {datatype: 'json'})
        .trigger('reloadGrid');
});