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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
jquery构造器的实现代码小结
May 16 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
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
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
python更新列表的方法
2015/07/28 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python变量和字符串详解
2017/04/29 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python支持多继承吗
2020/06/19 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
三八妇女节活动总结
2014/05/04 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
公司经营目标责任书
2015/01/29 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
JavaScript 对象创建的3种方法
2021/11/17 Javascript