jqgrid如何使用delRowData函式批量刪除 selarrrow獲取的多個選中行資料及注意事項
阿新 • • 發佈：2018-12-20
由於jqgrid沒有提供批量刪除行的函式，因此要實現批量刪除選中行資料，就只能：
- 先獲取選中行rowIds
- 遍歷選中行rowIds，逐個呼叫delRowData(string rowid)刪除行資料。
看上去挺簡單，但是這裡有個很大的坑，那就是jqgrid獲取選中行資料處理。本文通過一個案例詳細講述如何使用delRowData函式批量刪除 selarrrow獲取的多個選中行資料及注意事項。
1、獲取選中行集合
var rowIds = $("#orders").jqGrid("getGridParam", "selarrrow");
官方api對selarrrow引數說明：
This options is readonly. Gives the currently selected rows when multiselect is set to true. This is a one-dimensional array and the values in the array correspond to the selected id’s in the grid.
檢視jqgrid原始碼，發現$("#orders").jqGrid(“getGridParam”, “selarrrow”)返回的就是p.selarrrow
var p = 說到這兒，大家可能已經注意到了：
var rowIds = $("#orders").jqGrid(“getGridParam”, “selarrrow”)，rowids是p.selarrrow的一個引用，因此rowids會隨著選中行發生變化而變化：
- 增加選中行
- 取消選中行
- 刪除選中行
再次強調：
var rowIds = $("#orders").jqGrid(“getGridParam”, “selarrrow”)，rowids會隨著選中行發生變化。
2、案例展示
截圖
程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid多行刪除注意事項</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
</head>
<body>
<div class="page-content container">
<div class="page-head" style="padding: 15px 0"> <!-- page-head -->
<button type="button" class="btn btn-sm btn-azure" onclick="delRows()">刪除選中行</button>
<button type="button" class="btn btn-sm btn-azure" onclick="getSelectedRows()">獲取選中行</button>
</div><!-- page-head -->
<div class="page-body"> <!-- page-body -->
<div class="panel panel-default" id="panel-orders">
<table id="orders"></table>
</div>
</div>
</div>
<script type="text/javascript">
var data = [], rowIds = [];
function getBills() {
var rowCount = 50;
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
bill_id: i,
bill_detail: i,
goods_id: i,
unit_id: i,
package_id: i,
ref_detail: i,
goods_no: i + 1,
goods_name: '零件名稱' + rowCount + i,
car_type_name: '車型' + rowCount + i,
package_name: '包裝器具' + rowCount + i,
unit_name: '單位',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
qrcode: '1000000000' + i,
barcode: '1000000000' + i,
flag: i >= rowCount - 1 ? 1 : 0,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function delRows() {
rowIds = $("#orders").jqGrid("getGridParam", "selarrrow");
if(rowIds.length < 1) {
alert('請先選擇行記錄!');
}
for (var i = 0, l = rowIds.length; i < l; i++) {
$("#orders").jqGrid("delRowData", rowIds[0]);
}
}
function getSelectedRows() {
console.log('getSelectedRows-rowids: ', rowIds);
}
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件號", name: "goods_no", width: 60},
{label: "零件名稱", name: "goods_name", width: 180},
{label: "車型", name: "car_type_name", width: 70},
{label: "包裝器具", name: "package_name", width: 70},
{label: "單位", name: "unit_name", width: 40},
{label: "裝箱率", name: "snp", width: 50, sorttype: "number"},
{label: "箱數", name: "box_count", width: 40, sorttype: "number"},
{label: "需求總數", name: "total_count", width: 70, sorttype: "number"},
{label: "需求數量", name: "goods_count", width: 70,},
{label: "出庫數量", name: "out_count", width: 70, sorttype: "number"},
{label: "訂單號", name: "bill_no", width: 120},
{label: "二維碼", name: "qrcode", width: 130},
{label: "條碼", name: "barcode", width: 120}
],
datatype: 'local',
rownumbers: true,
multiselect: true,
height: 300,
rowNum: 1000
});
getBills();
});
</script>
</body>
</html>
3、案例說明
刪除選中行程式碼
// 全域性變數，rowIds
rowIds = $("#orders").jqGrid("getGridParam", "selarrrow");
if(rowIds.length < 1) {
alert('請先選擇行記錄!');
}
// 每次刪除rowIds[0]？
// 因為刪除行後rowIds陣列發生變化，假設刪除前['row1','row2','row3']
// 那麼第一次刪除後變成['row2','row3']
// 第二次刪除後變成['row3']
// 第三次刪除後變成[]，length = 0,for迴圈結束，當然也可以倒序刪除，每次刪除最後一行。
// 至於rowIds為什麼會變化，前面已經做了說明。
for (var i = 0, l = rowIds.length; i < l; i++) {
$("#orders").jqGrid("delRowData", rowIds[0]);
}
驗證：選中或取消選中，rowIds會發生變化
- 先執行"刪除選中行"，使rowIds指向jqgrid的selarrrow引數；
- 增加選中行、減少選中行，點選“獲取選中行”按鈕，檢視控制檯輸出：
getSelectedRows-rowids: Array [] //取消所有選中行
getSelectedRows-rowids: Array [ “2”, “5” ] //選中2,5
getSelectedRows-rowids: Array [ “7”, “8” ] //選中7,8