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


Posted in Javascript onJanuary 14, 2017

如何实现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);
}

效果展示

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
jQuery实现select模糊查询(反射机制)
Jan 14 #Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 #Javascript
Angular2 PrimeNG分页模块学习
Jan 14 #Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 #Javascript
详解jQuery事件
Jan 13 #Javascript
js实现固定宽高滑动轮播图效果
Jan 13 #Javascript
JavaScript利用闭包实现模块化
Jan 13 #Javascript
You might like
PHP 手机归属地查询 api
2010/02/08 PHP
php header功能的使用
2013/10/28 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Python给你的头像加上圣诞帽
2018/01/04 Python
Django视图和URL配置详解
2018/01/31 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python访问hdfs的操作
2020/06/06 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Python文件操作的面试题
2013/06/22 面试题
会计学个人自荐信模板
2013/12/13 职场文书
考试不及格的检讨书
2014/01/22 职场文书
报告会主持词
2014/04/02 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
大学生英文求职信范文
2015/03/19 职场文书
教师求职信怎么写
2015/03/20 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
观后感开头
2015/06/19 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书