如何从 jqgrid 表中清除大数据

How to clear large data from jqgrid table?

本文关键字：清除 数据 jqgrid      更新时间：2023-09-26
作为

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。

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

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

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

与addRowData的使用差异是巨大的。使用 addRowData 的主要缺点是数据将逐行放置在网格中。问题是，如果您修改页面上的元素或插入新元素，则必须由 Web 浏览器重新计算页面上所有现有元素的位置。由于您在循环中使用addRowData，因此在插入下一行后也必须重新计算将首先插入的行的定位。因此，需要插入的行越多，代码就越慢。由于问题，jQuery 1.4引入了方法jQuery.detach，该方法允许从页面中删除临时元素，修改它，然后使用任何标准的jQuery方法(如jQuery.after，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');
});
相关文章：