Javascript 如何从jqgrid表中清除大数据？
作为来自我的业务类的ajax调用的一部分提供的数据如下：Javascript 如何从jqgrid表中清除大数据？,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,作为来自我的业务类的ajax调用的一部分提供的数据如下： [{ "user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList('DIM 008065');'> <img src='/WIMS/images/icon_detail.png'></b
[{
"user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList('DIM 008065');'> <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('DIM 008065');'> <img src='/WIMS/images/icon_detail.png'></button>",
"activeFlag": "1"
}, {
"user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList('N 005276');'> <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('N 005276');'> <img src='/WIMS/images/icon_detail.png'></button>",
"activeFlag": "1"
}]
$.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});
}
}
[{
“用户操作”：“，
“车辆ID”：“DIM 008065”，
“设置标志”：“设置标志”，
“CLRFALG”：“，
“设定日期”：“2010年7月31日11:11”，
“lastClearDate”：“2010年8月24日07:26”，
“中午”：“24”，
“所有者代码”：“，
“运算符代码”：“，
“维护代码”：“，
“严重性10通过”：“~”，
“绘图”：“，
“活动标志”：“1”
}, {
“用户操作”：“，
“车辆识别号”：“N 005276”，
“设置标志”：“设置标志”，
“CLRFALG”：“，
“设定日期”：“2011年8月31日10:05”，
“lastClearDate”：“2011年3月24日10:45”，
“中午”：“0”，
“所有者代码”：“，
“运算符代码”：“，
“维护代码”：“，
“严重性10通过”：“~~~”，
“绘图”：“，
“活动标志”：“1”
}]
[{
"user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList('DIM 008065');'> <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('DIM 008065');'> <img src='/WIMS/images/icon_detail.png'></button>",
"activeFlag": "1"
}, {
"user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList('N 005276');'> <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('N 005276');'> <img src='/WIMS/images/icon_detail.png'></button>",
"activeFlag": "1"
}]
$.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});
}
}
$.ajax({
类型：“POST”，
url:f_reqAction，//已设置url
数据：{maintainer:maintainerValue，show:showValue}，
数据类型：'json'，
async:true，/*如果设置为非异步，浏览器将页面显示为“加载..”*/
cache:false，
超时：80000，/*以毫秒为单位的超时*/
成功：手动跳跃，快速响应，
错误：HandlerResponseError
});
功能handleAppYeventResponse（响应）{
//回应来自我的商务课
$（“#stepChangeData”）.jqGrid（'clearGridData'）；
如果（response.length>0）{
对于（var i=0；i用服务器的JSON数据填充jqGrid的最佳方法是使用datatype:'JSON'
并从服务器加载数据。jqGrid非常灵活，几乎可以加载任何数据。只需使用colModel
的相应jsonReader
或jsonmap
属性即可。有时需要在处理回调之前，另外使用ajaxGridOptions
选项、serializeGridData
或。还应使用jqGrid的gridview:true
选项
使用addRowData
的区别是巨大的。使用addRowData
的主要缺点是，每行的数据都将放在网格行中。问题是，如果修改页面上的元素或插入新元素，则web b必须重新计算页面上所有现有元素的位置rowser.因为您在循环中使用了addRowData
，所以在插入下一行之后，首先插入的行的位置也必须重新计算。因此插入的行越多，代码的速度就越慢。由于这个问题，jQuery 1.4引入了允许删除临时元素的方法从页面中删除，修改它，然后使用任何标准jQuery方法将其放回原处，如，和许多其他方法
如果使用datatype:'json'
和gridview:true
则整个网格将被构造为字符串，然后作为一个插入操作放入网格中。因此，在插入多行的情况下，您将获得比addRowData
更好的性能
已更新：在上，我演示了如何直接在jqGrid中加载数据。我建议您使用或jqGrid格式化程序。例如，为了能够正确排序数据，必须在格式中包含日期，并使用带有相应选项的格式化程序：“日期”
，以显示日期
此外，我不建议您在ID中使用空格。我假设VEHICLE\u 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');
});
你会出现哪一个错误？！除此之外，如果你格式化了代码，而不是仅仅发布一个不可读的文本块，那就太好了。你能发布你的jQGrid定义和导致错误的代码吗？谢谢你的快速回复，很抱歉没有格式化。作为我的实现的一部分，我在添加新数据之前正在清除网格但是当jQuery（“#gridtabID”）.jqGrid（'clearGridData'）时，您需要用新数据刷新网格？您不能使用$（“#gridtabID”）.trigger（“重新加载网格”）吗？请包含JavaScript代码，该代码显示如何创建jqGrid以及如何填充它。我想问题的根源就在这里。通常情况下，您不需要调用clearGridData
。我想您选择了一些非常无效的方法填充网格。如果您选择了更好的方法，则填充或清除大约1000 rows将非常快。此外，我不建议您在网格数据中使用HTML片段。例如，您可以更好地使用自定义格式化程序。我对问题进行了编辑，以便您更好地理解。请查看此编辑版本并帮助我解决此问题。非常感谢。您提供了一个出色的解决方案。我正在工作使用您的代码。现在，在将您的解决方案集成到我的代码中后，我的代码不会出现错误。再次感谢。