Easyui如何實現(xiàn)datagrid多行刪除

小編給大家分享一下Easyui如何實現(xiàn)datagrid多行刪除，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了武邑免費建站歡迎大家使用！

如何實現(xiàn)datagrid多行刪除？

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

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

錯誤做法

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

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

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

這樣就能用一個array數(shù)組動態(tài)記錄用戶勾選行的索引數(shù)組。

然后遍歷這個array一行一行deleteRow不就可以了么。

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

正確做法：deleteRow，getChecked和getRowIndex配合使用

如果能夠?qū)rray中記錄的index值從小到大排序，然后依次從后向前刪除，就能解決行號錯亂的問題了。（從后向前刪，不會影響到前面行號的索引）。

根據(jù)這個思路，其實不用將array排序，利用datagird提供的方法，即可實現(xiàn)這個功能。

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

用戶在點擊刪除按鈕時，首先通過getChecked拿到用戶勾選的行的數(shù)據(jù)數(shù)組。

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

然后通過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);
}

效果展示

Easyui如何實現(xiàn)datagrid多行刪除

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多行刪除測試',
    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);
  }
}

看完了這篇文章，相信你對“Easyui如何實現(xiàn)datagrid多行刪除”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁標題：Easyui如何實現(xiàn)datagrid多行刪除
轉(zhuǎn)載源于：http://weahome.cn/article/goocoh.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Easyui如何實現(xiàn)datagrid多行刪除

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管