首页 > 代码库 > jQuery easyUI 1.3.2 删除编辑功能 行号混乱的bug
jQuery easyUI 1.3.2 删除编辑功能 行号混乱的bug
最近使用jQuery easyUI 1.3.2 开发。在记录行设置一操作列,包含删除和编辑功能,操作后不reload重载(不发送新的数据库查询请求)。网上教程是在初始化数据的时候,将行号index传入,如下代码
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控制点击时间,然后整行选中,再获取行号,搞掂。
效果图:
行内编辑
jQuery easyUI 1.3.2 删除编辑功能 行号混乱的bug
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。