easyui datagrid deleteRow(删除行)的BUG!
转自:http://my.oschina.net/fants/blog/77189
项目中又用到easyui 的datagrid做数据展示。功能很强大,很实用,但bug也很多。今天这个就够让人头疼。
如图,现在有个删除功能,选中一行,点击就可以删除。
easyui datagrid 提供了deleteRow方法。可以实现删除。
但还是出问题了。
第一次删除后,就会出现,点击一行,但是界面上选择的却是他上面那一行。百思不得其解。
google,baidu,各种搜索,得到的答案都是删除后,然后reload。重新加载数据。
我不想这样做也不可能用户一删除就要重新加载。并且第二次删除的话,行号也跟着乱的一塌糊涂。
这明显又是easyui的bug,于是开始一步步跟踪调试easyui所谓的开源代码(被混淆过)。
一下午的调试发现,easyui是根据datagrid-row-index和datagrid-row-r1-x-x来定位行的。
但在deleteRow方法中,删掉当前行后,作者只把当前行后面的行的datagrid-row-index更新了。也就是往前提1,弥补被删除行的空缺,但对datagrid-row-r1-x-x却没做任何改动。
这样就会造成下次执行 opts.finder.getTr的时候,获得的row错误,不是自己点击的row。造成上面所提的错误。
于是:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
deleteRow: function (target, index) { var opts = $.data(target, "datagrid" ).options; var data = $.data(target, "datagrid" ).data; opts.finder.getTr(target, index).remove(); var gd = $.data(target, "datagrid" ); for ( var i = index + 1; i < data.rows.length; i++) { opts.finder.getTr(target, i, "body" , 2).attr( "datagrid-row-index" , i - 1) .attr( "id" ,gd.rowIdPrefix+ "-2-" +(i-1)); var tr1 = opts.finder.getTr(target, i, "body" , 1).attr( "datagrid-row-index" , i - 1) .attr( "id" ,gd.rowIdPrefix+ "-1-" +(i-1)); if (opts.rownumbers) { tr1.find( "div.datagrid-cell-rownumber" ).html(i); } } data.total -= 1; data.rows.splice(index, 1); }, |
这是改进后的代码,第5行是我加的。
1
|
.attr( "id" ,gd.rowIdPrefix+ "-2-" +(i-1)); |
1
|
.attr( "id" ,gd.rowIdPrefix+ "-1-" +(i-1)); |
这个两行同时去设置他对应的datagrid-row-rx-x-x
这样两个标识就同步了。
哈哈,看上去多整齐,再看看没修改前:
好,到此这个bug就完美解决了。
easyui datagrid deleteRow(删除行)的BUG!的更多相关文章
- easyui datagrid deleteRow(删除行)的BUG
有时候想临时保存一些数据,等确定好后在批量一次提交,但EasyUI datagrid 用的时候添加可以正常,如果从中间删除那行号就全乱了.导致删除的时候有可能删除上一行数据. function ad ...
- easyui datagrid 遇到的坑 cannot read property ·· pageNum bug and so on
1 本人刚刚接到一个bug,就是初始化时若设置了datagrid到指定页数,点击下一页显示不对,4 --> ‘4’+1=41的字符串形式,再点击超出页码范围直接到最后一页: 原因:因为 page ...
- 学习日记6、easyui datagrid 新增一行,编辑行,结束编辑和删除行操作记录
1.新增一行并进入编辑状态 var index=$('#Numbers').datagrid('appendRow', { CardInformation: '开户行', CardNumber: '银 ...
- jquery easyui DataGrid
Easyui Demo网站: http://www.jeasyui.com/ 英文 http://www.phptogether.com/juidoc/ 中文 datagrip的基本属性方法:ht ...
- easyui DatagrId 的实例讲解
下面是代码实现 @{ ViewBag.Title = "人员查找"; ViewBag.LeftWidth = "200px"; ViewBag ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
随机推荐
- 《JavaScript高级程序设计》读书笔记 ---Function 类型
说起来ECMAScript 中什么最有意思,我想那莫过于函数了——而有意思的根源,则在于函数实际上是对象.每个函数都是Function 类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对 ...
- nagios监控mysql主从状态
看了网上很多mysql主从监控的,大部分都是shell的,就算是python的,也是在python下跑shell语句.我写了一个python的监控脚本,用到了mysqldb这个包.脚本如下: [roo ...
- lt>&eq
lt:less than,小于 gt:greater than,大于 eq:equal,等于 le:less equal,小于等于 ge:greater than,大于等于
- RabbitMQ持久化编码注意事项
以Java语言,MQ客户端为amqp-client作为示例 1.基本原则 direct模式,由生产者声明队列名,消费者也声明队列名 topic模式,由生产者声明交换器名,由消费者声明队列名+交换器名+ ...
- Redis高可用配置(Keepalived)
主:172.16.0.104 备:172.16.0.105 VIP:172.16.0.107 客户端直接连VIP,当master 104的redis挂掉后,105作为master.当104重启后,10 ...
- offsetWidth,offsetHeight到底该如何理解?
1.对象的可见宽度(对象指body.div等) 2.offsetWidth可以返回div的宽 3.offsetWidth=width+padding+border(不包括margin外边距) 4.返回 ...
- hdu_5903_Square Distance(dp)
题目链接:hdu_5903_Square Distance 题意: 给你一个长度为n的a串,一个数m,现在让你构造一个长度也为n的b串,使这个串是由两个相同的串拼起来的,并且和a串对应的位不同的数量为 ...
- 应用 Valgrind 发现 Linux 程序的内存问题(转)
Valgrind 概述 体系结构 Valgrind 是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合.Valgrind由内核(core)以及基于内核的其他调试工具组成.内核类似于一个 ...
- Linux的网卡由eth0变成了eth1,如何修复
Linux的网卡由eth0变成了eth1,如何修复 使用wmware安装了linux,安装成功后,使用的网卡是eth0,没有eth1.但是用过一段时间后,不知道为什么eth0无法使用,系统却自动生 ...
- MvcPager
站点网址:http://www.webdiyer.com/mvcpager/ 控制台命令:Install-Package Webdiyer.MvcPager