jQuery easyUI 1.3.2 删除编辑功能 行号混乱的bug
2014-12-03 10:39
225 查看
最近使用jQuery easyUI 1.3.2 开发。在记录行设置一操作列,包含删除和编辑功能,操作后不reload重载(不发送新的数据库查询请求)。网上教程是在初始化数据的时候,将行号index传入,如下代码
开始没有发现问题。能删除能编辑。后来发现,连续删除,或者删除后编辑,将出现很多奇怪的bug,比如删除错误数据,点击编辑,是另外的行触发了。究其原因,是这个行号index的问题。因为index是在初始化数据时定死的,但执行删除操作后,各行index是会变更的。而代码中的a标签调用的onclick方法里面的index已经固定,所以bug就来了。
最新版的1.4.1不知道有没有针对这个bug或者效果上做了调整,反正网上的处理方法很多是教直接修改easyUI的源码。
这里介绍一个简便一点的方法。
首先,将onclick方法传入index改为传this。
然后,再各个onclick方法里面,就不能直接获取index使用了,需要改为
用js控制点击时间,然后整行选中,再获取行号,搞掂。
效果图:
行内编辑
formatter:function(value,row,index){ if (row.editing){ var s = '<a href="javascript:void(0);" class="savebtn" onclick="saverow("+index+")">保存</a> '; var c = '<a href="javascript:void(0);" class="cancelbtn" onclick="cancelrow("+index+")">取消</a>'; return s+c; } else { var e = '<a href="javascript:void(0);" class="editbtn" onclick="editrow("+index+")">编辑</a> '; var d = '<a href="javascript:void(0);" class="delbtn" onclick="deleterow("+index+")">删除</a>'; return e + d; } }
开始没有发现问题。能删除能编辑。后来发现,连续删除,或者删除后编辑,将出现很多奇怪的bug,比如删除错误数据,点击编辑,是另外的行触发了。究其原因,是这个行号index的问题。因为index是在初始化数据时定死的,但执行删除操作后,各行index是会变更的。而代码中的a标签调用的onclick方法里面的index已经固定,所以bug就来了。
最新版的1.4.1不知道有没有针对这个bug或者效果上做了调整,反正网上的处理方法很多是教直接修改easyUI的源码。
这里介绍一个简便一点的方法。
首先,将onclick方法传入index改为传this。
formatter:function(value,row,index){ if (row.editing){ var s = '<a href="javascript:void(0);" class="savebtn" onclick="saverow(this)">保存</a> '; var c = '<a href="javascript:void(0);" class="cancelbtn" onclick="cancelrow(this)">取消</a>'; return s+c; } else { var e = '<a href="javascript:void(0);" class="editbtn" onclick="editrow(this)">编辑</a> '; var d = '<a href="javascript:void(0);" class="delbtn" onclick="deleterow(this)">删除</a>'; return e + d; } }
然后,再各个onclick方法里面,就不能直接获取index使用了,需要改为
$(item).parents("tr").click(); var row = $dg.datagrid('getSelected'); var rowIndex = $dg.datagrid('getRowIndex', row);
用js控制点击时间,然后整行选中,再获取行号,搞掂。
效果图:
行内编辑
相关文章推荐
- GridView动态绑定数据、编辑、修改、删除及分页功能
- (VB.net) 利用DataGrid实现查找, 编辑, 修改, 更新, 删除的功能。
- FckEditor添加右键菜单;增加编辑区右键图片删除功能(asp.net )
- ASP.NET中运用DataList控件来实现编辑、更新、删除、取消等功能
- 使用DataList实现 加入购物车,编辑,删除,更新,取消功能
- datagrid多项功能(编辑,修改,删除)
- 使用DataList实现 加入购物车,编辑,删除,更新,取消功能。
- FckEditor添加右键菜单;增加编辑区右键图片删除功能(asp.net )(一)
- asp.net中用LinkButton控制后台代码使其可以进行编辑,预览,删除功能
- 1模拟网易邮箱实现全选,全不的功能(服务端和客户端) 2 使用DataList实现 加入购物车,编辑,删除,更新,取消功能。要求连一个产品表。
- GridView实现编辑,选择删除,分页功能
- GridView的绑定,编辑,删除功能 (非常棒)
- GridView自带删除编辑功能的事件编写
- FckEditor添加右键菜单;增加编辑区右键图片删除功能(asp.net )(二)
- GridView实现 "插入" 编辑更新删除功能
- 390开发实用技术: 重拳出击,CICS联机程序开发新手必看---一个典型的CICS程序,所有完备功能包括上下翻屏,增加/编辑/删除/拷贝纪录等
- 四.用户管理页面(显示所有的用户信息,同时为用户的添加,编辑,修改密码,删除,修改权限等功能提供相应的链接) UserMange.aspx
- 手工实现GridView排序、删除、编辑、新增数据功能
- ExpandableListView实例(三)_实现QQ中"未分组"效果和"未分组"不可编辑删除功能
- 使用DataList实现 加入购物车,编辑,删除,更新,取消功能。要求连一个产品表。