Easyui笔记2：实现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);
}

效果展示

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多行删除测试',
    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);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

    一篇关于JQueryEasyUI学习之datagrid 添加.修改.删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细 <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记 //因为layout框架指向href时,只取htm

  • jquery easyui datagrid实现增加，修改，删除方法总结

    本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: <body> <form id="form1" runat="server"> <table id="tt"> </table> </form> </body> 引用的JS: <link rel="stylesheet" t

  • Easyui笔记2：实现datagrid多行删除的示例代码

    Easyui笔记2：实现datagrid多行删除的示例代码

    如何实现datagrid多行删除? 最近在前端界面开发中,使用了datagrid组件.需要完成一个多行勾选并删除的功能. 查看easyui api,其中有一个deleteRow方法,传入要删除行的索引,即可删除该行. 错误做法 于是准备用deleteRow方法和onChecked和onUncheck事件配合使用,来完成多行删除功能. 当用户勾选一行时,触发onChecked事件,将onChecked事件传进来的index索引push到一个全局array中. 当用户取消勾选的时候,触发onUnch

  • JQuery中dataGrid设置行的高度示例代码

    复制代码 代码如下: columns:[[ {field:"activitycontent",title:'活动内容',width:fixWidth(0.18),align:"center",halign:"center", formatter:function(value,rec){ if(value.indexOf("src")<0){ if(rec.activitycontent.length>Math.ce

  • 实现easyui的datagrid导出为excel的示例代码

    之前有介绍过如何实现easyui里datagrid内容的打印,今天给大家介绍下如何实现datagrid内容导出为excel文件.以下为代码实现: export.js function ChangeToTable(printDatagrid) { var tableString = '<table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("o

  • git中submodule子模块的添加、使用和删除的示例代码

    背景 项目中经常使用别人维护的模块,在git中使用子模块的功能能够大大提高开发效率. 使用子模块后,不必负责子模块的维护,只需要在必要的时候同步更新子模块即可. 本文主要讲解子模块相关的基础命令,详细使用请参考man page. 子模块的添加 添加子模块非常简单,命令如下: git submodule add <url> <path> 其中,url为子模块的路径,path为该子模块存储的目录路径. 执行成功后,git status会看到项目中修改了.gitmodules,并增加了一

  • JavaScript实现串行请求的示例代码

    使用async和await var fn = async function(promiseArr) { for(let i = 0,len = arr.length; i<len; i++) { currentPromise = (promiseArr[i] instanceOf Promise) ? promiseArr[i] : Promise.resolve(promiseArr[i]); var result = await currentPromise; console.log(res

  • pandas实现按行选择的示例代码

    pandas实现按行选择的示例代码

    目录 1.自定义行索引 2. 按普通索引选择数据 2.1 按普通索引选择单行数据 2.2 按行索引选择多行数据 3.按位置索引选择数据 3.2 按位置索引选择多行数据 4.选择连续多行数据 5.选择满足条件的行 5.1单个条件选择 5.2 多个条件选择 5.2.1 多个条件是且的关系 5.2.2 多个条件是或的关系 本文所用到的Excel表格内容如下: 1.自定义行索引 dataframe读取Excel表格时是由自定义行索引的.这里为了展示效果,先进行自定义行索引的操作 import panda

  • MyBatis-Plus实现逻辑删除的示例代码

    目录 一.引言 二.具体实现 步骤一:首先我们需要配置未删除.已删除分别标识的状态码是什么,这里采用的yml格式. 步骤二:在实体类对应的字段上加上注解@TableLogic即可. 步骤三:测试测试,现在我们测试通过ID来删除某一个用户的时,看看执行的SQL语句是UPDATE了. 三.使用注意细节 一.引言 之前小编讲了MP从入门到核心功能的使用,接下来这几天小编会把MP在实际项目中,一些常用的高级功能给记录一下. 高级功能分为:逻辑删除.自动填充.乐观锁插件.性能分析插件.多租户SQL解析器.

  • EasyUI的DataGrid绑定Json数据源的示例代码

    EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累. 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: <table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" title="需要设置表格标题" data-options=" rownumbers:tr

  • asp批量添加修改删除操作示例代码

    核心代码: <title>asp批量添加修改删除操作示例</title> <% if request.Form("op")="update" then'表单提交 ids=request.Form("ids") if ids<>"" then response.Write "要删除的数据id集合:"&ids&"<br>"

  • vue+element的表格实现批量删除功能示例代码

    vue+element的表格实现批量删除功能示例代码

    最近写了一个批量删除功能,遇到了不少坑,特此记录一下 表格的代码如下 复制代码 代码如下: <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descendin

随机推荐