如何通過Easyui實現datagrid多行刪除效果?

ADVERTISEMENT

如何通過Easyui實現datagrid多行刪除效果?

如何實現datagrid多行刪除?

最近在前端界面開發中,使用了datagrid組件。需要完成一個多行勾選並刪除的功能。

查看easyui api,其中有一個deleteRow方法,傳入要刪除行的索引,即可刪除該行。

錯誤做法

於是準備用deleteRow方法和onChecked和onUncheck事件配合使用,來完成多行刪除功能。

當用戶勾選一行時,觸發onChecked事件,將onChecked事件傳進來的index索引push到一個全局array中。

當用戶取消勾選的時候,觸發onUncheck事件,得到onUncheck時間傳進來的index索引,用splice方法把array中的該索引值去掉。

這樣就能用一個array數組動態記錄用戶勾選行的索引數組。

然後遍曆這個array一行一行deleteRow不就可以了麼。

然而實際情況並不是這樣,當deleteRow的時候,該行後面的索引值全部向前挪一位。比如,一共有10行(第一行索引為0),我刪除了第5行,後面6~9行的索引變成了5~8。這樣對於之前記錄在array中的索引值就不準確了,會導索引錯亂,不能刪掉想要刪的行。

正確做法:deleteRow,getChecked和getRowIndex配合使用

如果能夠將array中記錄的index值從小到大排序,然後依次從後向前刪除,就能解決行號錯亂的問題了。(從後向前刪,不會影響到前面行號的索引)。

根據這個思路,其實不用將array排序,利用datagird提供的方法,即可實現這個功能。

這里就不需要onChecked和onUncheck事件了。

用戶在點擊刪除按鈕時,首先通過getChecked拿到用戶勾選的行的數據數組。


 var deletedData = $('#dg').datagrid('getChecked');

然後通過for循環,從最後一行開始向前遍曆,每次遍曆,用getRowIndex方法得到該行的索引,然後用deleteRow刪除該行即可!


 for (var i = deletedData.length - 1; i >= 0; i--) {
 var rowIndex = $('#dg').datagrid('getRowIndex', deletedData[i]);
 $('#dg').datagrid('deleteRow', rowIndex);
 }
ADVERTISEMENT

效果展示

html代碼:


 
 
 Title

本文地址:
ADVERTISEMENT
ADVERTISEMENT