位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享Easyui笔记2:实现datagrid多行删除的示例代码(easyui demo),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:easyui multiple,easyui onchange,easyui multiple,easyui region,easyui-dialog,easyui-dialog,easyui multiple,easyui实例,内容如对您有帮助,希望把文章链接给更多的朋友!

如何实现datagrid多行删除?

最近在前端界面开发中,使用了datagrid组件。需要完成一个多行勾选并删除的功能。

查看easyui api,其中有一个deleteRow方法,传入要删除行的索引,即可删除该行。

错误做法

于是准备用deleteRow方法和onChecked和onUncheck事件配合使用,来完成多行删除功能。

当用户勾选一行时,触发onChecked事件,将onChecked事件传进来的index索引push到一个全局array中。

当用户取消勾选的时候,触发onUncheck事件,得到onUncheck时间传进来的index索引,用splice方法把array中的该索引值去掉。

这样就能用一个array数组动态记录用户勾选行的索引数组。

然后遍历这个array一行一行deleteRow不就可以了么。

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

然而实际情况并不是这样,当deleteRow的时候,该行后面的索引值全部向前挪一位。比如,一共有行(第一行索引为0),我删除了第5行,后面6~9行的索引变成了5~8。这样对于之前记录在array中的索引值就不准确了,会导索引错乱,不能删掉想要删的行。

正确做法:deleteRow,getChecked和getRowIndex配合使用

如果能够将array中记录的index值从小到大排序,然后依次从后向前删除,就能解决行号错乱的问题了。(从后向前删,不会影响到前面行号的索引)。

根据这个思路,其实不用将array排序,利用datagird提供的方法,即可实现这个功能。

这里就不需要onChecked和onUncheck事件了。

用户在点击删除按钮时,首先通过getChecked拿到用户勾选的行的数据数组。

然后通过for循环,从最后一行开始向前遍历,每次遍历,用getRowIndex方法得到该行的索引,然后用deleteRow删除该行即可!

效果展示

html代码:

js代码:

标签: easyui demo

本文链接地址:https://www.jiuchutong.com/biancheng/370582.html 转载请保留说明!

上一篇:jQuery实现select模糊查询(反射机制)

下一篇:jquery mobile移动端幻灯片滑动切换效果(jquery移动节点的方法)

  • 进口报关商品的完税价格包含运费吗
  • 个人所得税计提分录怎么写
  • 视同销售是指什么
  • 出售其他债权投资
  • 个税漏申报了一个月在哪里申报
  • 委托加工物资属于在产品吗
  • 委托开发费用免所得税和增值税
  • 土地使用费怎么申报
  • 存在弃置费用的固定资产有哪些
  • 装修费用如何摊销成本
  • 财产租赁所得如何申报
  • 委托销售怎么做分录
  • 个人代垫公司费用微信转账如何报销
  • 农民工的工资是当月工作过月几号发工资政府有没有规定
  • 公司购买住宅可以分期付款吗
  • 实收资本印花税是一年一交吗
  • 进项5万出项6万,需交多少税
  • 出售报废电脑要交什么税
  • 公司出租商铺要交哪些税
  • 总资产报酬率
  • 新注册的公司用不用开公户
  • 废品损失账户借方反映
  • 手工做账月末怎么结转
  • windows7旗舰版最新版本
  • 怎么增加c盘空间容量
  • 为员工租房租金怎么入账
  • 企业公益性捐赠扣除比例
  • 错账是什么
  • vue app打包
  • Laravel 5.5官方推荐的Nginx配置学习教程
  • 给php开发者的编程代码
  • php的序列化操作生成的哪种格式
  • 生产企业计提车折旧年限
  • java web购物系统
  • 微信公众号php开发教程
  • element-ui 表格
  • java 通配符
  • python如何删除字典中的键值对
  • 企业领用低值易耗品计入
  • 企业所得税预缴纳税申报表
  • 冲红怎么做会计科目
  • mysql数据库sid
  • mariadb10安装
  • 无形资产分期付款会计分录?
  • 土地租金计入什么会计科目
  • 闲置土地属于哪个部门
  • 农产品收购进项税抵扣会计分录
  • 商场预付卡
  • 个人所得税专项扣除需要交钱吗
  • 确定固定资产的标准
  • 正常在职员工的工作时间
  • 为什么工程施工图纸不能泄露
  • 发票开错了记账凭证如何做?
  • 数电怎么增加开票员
  • 印花税怎么新增税源
  • bios如何关闭网卡
  • win10应用商店应用少
  • 删除 ubuntu
  • ubuntu命令行中文乱码怎么解决
  • 安装win8.1系统步骤
  • vnc登录linux
  • win8谷歌浏览器出现无法访问此网站
  • perl入门
  • 2015.3.25--2.cocos精灵移动 动画控制(一)
  • 微信小程序wx.request实现后台数据交互功能分析
  • 环境篇作文
  • jQuery中serializeArray()与serialize()的区别实例分析
  • Node.js生成HttpStatusCode辅助类发布到npm
  • jquery 选择器 空格
  • jquery的checkbox,radio,select等方法小结
  • 国家税务总局12366上海(国际)纳税服务中心
  • 原单位已交社保,新单位怎么办
  • 没有核定印花税罚款吗
  • 增值税发票勾选是什么意思
  • 无锡车辆购置税缴纳地点
  • 外地人在秦皇岛买房
  • 济宁高新区税务局办税大厅电话
  • 河南旧县为什么叫新县
  • 小店区国税地税局地址
  • 社会保险登记表下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设