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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
岗位说明书范文
2014/05/07 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL