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 页面全选框实践代码
Apr 02 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
关于JSON解析的实现过程解析
Oct 08 Javascript
jQuery实现简单全选框
Sep 13 jQuery
基于Cesium绘制抛物弧线
Nov 18 Javascript
JavaScript中遍历的十种方法总结
Dec 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
论建造顺序的重要性
2020/03/04 星际争霸
提升PHP执行速度全攻略(上)
2006/10/09 PHP
国内php原创论坛
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
由php if 想到的些问题
2008/03/22 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
Javascript中的delete介绍
2012/09/02 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
解析Python3中的Import
2019/10/13 Python
python装饰器使用实例详解
2019/12/14 Python
python与pycharm有何区别
2020/07/01 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
简历自我评价怎么写呢?
2014/01/06 职场文书
美术教师个人总结
2015/02/06 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
创业计划书之水果店
2019/07/18 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL