javascript - 如何清除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 条此类记录。

现在我的jsp页面的ajax调用格式如下:

$.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，则问题不会出现。

我知道当数据这么大时，通过在 for 循环中调用 jqGrid('addRowData' ) 来填充响应数据效率不高。但是我找不到可以添加此响应数据的 jqgrid api直接在网格中，没有任何循环。

我无法通过 colModel 的格式化程序选项创建 json 数据中包含的按钮，因为我发现通过格式化程序创建此类按钮非常困难。所以我在我的业务逻辑中创建了它并将其发送到 jsp 页面，其中包含 json 数据作为 ajax 响应的一部分。

因此，在上述上下文中，我希望有一个 api 可以一次性将此 json 数据设置到网格中(即没有任何循环)。我认为这样也可以避免这个脚本问题。

Answer 1

使用服务器中的 JSON 数据填充 jqGrid 的最佳方法是使用datatype: 'json' 并加载来自服务器的数据。 jqGrid 非常灵活，几乎可以加载任何数据。只需使用 colModel 相应的 jsonReader 或 jsonmap 属性即可。有时还需要使用 ajaxGridOptions 选项、serializeGridData 或 beforeProcessing 回调。还应该使用 jqGrid 的 gridview: true 选项。

addRowData 的用法差异巨大。使用addRowData 的主要缺点是数据将逐行放置在网格行中。问题是，如果您修改页面上的元素或插入新元素，则网络浏览器必须重新计算页面上所有现有元素的位置。因为您在循环中使用了addRowData，所以在插入下一行之后也必须重新计算首先插入的行的位置。因此需要插入的行越多，代码就越慢。由于这个问题jQuery 1.4引入了方法jQuery.detach它允许从页面中删除临时元素，修改它，然后使用任何标准 jQuery 方法(如 jQuery.after)将其放回原处。 , jQuery.append以及许多其他。

如果您使用 datatype: 'json' 和 gridview: true 网格的完整主体将被构造为字符串，然后放置在将网格作为一个插入操作。因此，在插入许多行的情况下，与 addRowData 一样，您将获得更好的性能。

已更新:关于 the demo我展示了如何直接在 jqGrid 中加载数据。我建议您使用predefined或custom jqGrid 格式化程序。例如，为了能够正确对数据进行排序，必须在 ISO 8601 中包含日期。格式化并使用 formatter: 'date' 以及相应的选项来显示日期。

此外，我不建议您在 ID 内使用空格。我认为 VEHICLE_ID 是您数据的唯一 id。我使用了它，但删除了值中的所有空格。

关于postData内部的使用函数我建议你阅读我的old answer .

下面是演示代码中最重要的部分

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