如何通過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事件了。

ADVERTISEMENT

用戶在點擊刪除按鈕時,首先通過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);

}

效果展示

html代碼:

Title

刪除

js代碼:

ADVERTISEMENT

var dataStr = '{"total": 7, "rows": [{"test": 1}, {"test": 2}, {"test": 3}, {"test": 4}, {"test": 5}, {"test": 6}, ';

var data = $.parseJSON(dataStr);

$(function () {

$('#dg').datagrid({

width: 'auto',

height: 'auto',

title: 'datagrid多行刪除測試',

fitColumns: true,

rownumbers: true,

columns: [[

{

field: 'checkbox',

checkbox: true,

},

ADVERTISEMENT

{

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);

}

}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持路飯。

本文地址:

ADVERTISEMENT