如何實(shí)現(xiàn)datagrid多行刪除？
最近在前端界面開發(fā)中，使用了datagrid組件。需要完成一個(gè)多行勾選并刪除的功能。
查看easyui api，其中有一個(gè)deleteRow方法，傳入要?jiǎng)h除行的索引，即可刪除該行。
錯(cuò)誤做法
于是準(zhǔn)備用deleteRow方法和onChecked和onUncheck事件配合使用，來(lái)完成多行刪除功能。
當(dāng)用戶勾選一行時(shí)，觸發(fā)onChecked事件，將onChecked事件傳進(jìn)來(lái)的index索引push到一個(gè)全局array中。
當(dāng)用戶取消勾選的時(shí)候，觸發(fā)onUncheck事件，得到onUncheck時(shí)間傳進(jìn)來(lái)的index索引，用splice方法把a(bǔ)rray中的該索引值去掉。
這樣就能用一個(gè)array數(shù)組動(dòng)態(tài)記錄用戶勾選行的索引數(shù)組。
然后遍歷這個(gè)array一行一行deleteRow不就可以了么。
然而實(shí)際情況并不是這樣，當(dāng)deleteRow的時(shí)候，該行后面的索引值全部向前挪一位。比如，一共有10行（第一行索引為0），我刪除了第5行，后面6~9行的索引變成了5~8。這樣對(duì)于之前記錄在array中的索引值就不準(zhǔn)確了，會(huì)導(dǎo)索引錯(cuò)亂，不能刪掉想要?jiǎng)h的行。
正確做法：deleteRow，getChecked和getRowIndex配合使用
如果能夠?qū)rray中記錄的index值從小到大排序，然后依次從后向前刪除，就能解決行號(hào)錯(cuò)亂的問(wèn)題了。（從后向前刪，不會(huì)影響到前面行號(hào)的索引）。
根據(jù)這個(gè)思路，其實(shí)不用將array排序，利用datagird提供的方法，即可實(shí)現(xiàn)這個(gè)功能。
這里就不需要onChecked和onUncheck事件了。
用戶在點(diǎn)擊刪除按鈕時(shí)，首先通過(guò)getChecked拿到用戶勾選的行的數(shù)據(jù)數(shù)組。
var deletedData = $('#dg').datagrid('getChecked');然后通過(guò)for循環(huán)，從最后一行開始向前遍歷，每次遍歷，用getRowIndex方法得到該行的索引，然后用deleteRow刪除該行即可！
for (var i = deletedData.length - 1; i >= 0; i--) { var rowIndex = $('#dg').datagrid('getRowIndex', deletedData[i]); $('#dg').datagrid('deleteRow', rowIndex);}效果展示
html代碼：
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="easyui_1.5/jquery.min.js"></script> <link rel="stylesheet" href="easyui_1.5/themes/icon.css"> <link rel="stylesheet" href="easyui_1.5/themes/bootstrap/easyui.css"> <script type="text/javascript" src="easyui_1.5/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui_1.5/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/deleteRows.js"></script></head><body><div> <table id="dg" toolbar="#tb"></table> <div id="tb"> <a id="delete" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="deleteRows()">刪除</a> </div></div></body></html>
js代碼：
var dataStr = '{"total": 7, "rows": [{"test": 1}, {"test": 2}, {"test": 3}, {"test": 4}, {"test": 5}, {"test": 6}, {"test":7}]}';var data = $.parseJSON(dataStr);$(function () { $('#dg').datagrid({ width: 'auto', height: 'auto', title: 'datagrid多行刪除測(cè)試', fitColumns: true, rownumbers: true, columns: [[ { field: 'checkbox', checkbox: true, }, { field: 'test', title: 'test', width: '100px', } ]], }); $('#dg').datagrid('loadData', data);});function deleteRows() { var deletedData = $('#dg').datagrid('getChecked'); for (var i = deletedData.length - 1; i >= 0; i--) { var rowIndex = $('#dg').datagrid('getRowIndex', deletedData[i]); $('#dg').datagrid('deleteRow', rowIndex); }}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
