jQuery easyUI 1.3.2 删除编辑功能 行号混乱的bug
浏览数：99 /
时间：2015年06月09日
最近使用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控制点击时间，然后整行选中，再获取行号，搞掂。
效果图：
行内编辑
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
