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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
一个php作的文本留言本的例子(二)
2006/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
自我评价200字分享
2013/12/17 职场文书
公司成立感言
2014/01/11 职场文书
师德学习感言
2014/01/31 职场文书
腾讯广告词
2014/03/19 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
护士找工作求职信
2014/07/02 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
场地使用证明模板
2014/10/25 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python