我在項目中使用jqGrid時,采用異步加載伺服器資料,例如點選翻頁、搜尋時都重新加載資料。這樣就會産生一個問題。
問題描述:
當對清單批量删除時,可以選擇多個記錄資訊,選擇目前頁的第一條,如圖:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICdzFWRoRXdvN1LclHdpZXYyd2LcBzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX9smeNhXRU50dBpXTmZEWjZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TM4UjMykDM2EzMxIDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
點選下一頁再選擇一些記錄,點選删除時,則無法删除前面頁所選擇的記錄。
解決辦法:jqGrid貌似沒有解決這個問題的方法,是以隻能自己寫代碼儲存所選擇的記錄。需要借助jqGrid的兩個事件方法:
/**
multiselect為ture,且點選頭部的checkbox時才會觸發此事件。aRowids:所有選中行的id集合,為一個數組。status:boolean變量說明checkbox的選擇狀态,true選中false不選中。無論checkbox是否選擇,aRowids始終有 值
**/
onSelectAll(aRowids,status)
/**
當選擇行時觸發此事件。rowid:目前行id;status:選擇狀态,當multiselect 為true時此參數才可用
**/
onSelectRow(aRowids,status)
大體代碼
//儲存選擇記錄的數組
var selectIds = new Array();
jQuery("#gridid").jqGrid({
onSelectAll:function(aRowids,status){
if(status==true){
$.each(aRowids,function(i,item){
saveIdToArray(item);
})
}else{
$.each(aRowids,function(i,item){
deleteIdFromArray(item);
})
}
},
onSelectRow:function(aRowids,status){
if(status==true){ //選擇
saveIdToArray(aRowids);
}else{ //取消選擇
deleteIdFromArray(aRowids);
}
}
})
//儲存到數組
function saveIdToArray(item){
var exit = false;
for(var i = ;i < selectIds.length;i++){
if(item == selectIds[i]){
exit = true;
break;
}
}
selectAssets.push(item);
}
}
//從數組中删除
function deleteIdFromArray(item){
if(selectIds.length > ){
for(var i = ;i < selectIds.length;i++){
if(item == selectIds[i]){
selectIds.splice(i,);
break;
}
}
}
}
操作時,隻對數組進行操作就可以了。