项目中又用到easyui 的datagrid作数据展现。功能很强大,很实用,但bug也不少。今天这个就够让人头疼。html
如图,如今有个删除功能,选中一行,点击就能够删除。ui
easyui datagrid 提供了deleteRow方法。能够实现删除。google
但仍是出问题了。spa
第一次删除后,就会出现,点击一行,可是界面上选择的倒是他上面那一行。百思不得其解。调试
google,baidu,各类搜索,获得的答案都是删除后,而后reload。从新加载数据。code
我不想这样作也不可能用户一删除就要从新加载。而且第二次删除的话,行号也跟着乱的一塌糊涂。orm
这明显又是easyui的bug,因而开始一步步跟踪调试easyui所谓的开源代码(被混淆过)。htm
一下午的调试发现,easyui是根据datagrid-row-index和datagrid-row-r1-x-x来定位行的。ci
但在deleteRow方法中,删掉当前行后,做者只把当前行后面的行的datagrid-row-index更新了。也就是往前提1,弥补被删除行的空缺,但对datagrid-row-r1-x-x却没作任何改动。rem
这样就会形成下次执行 opts.finder.getTr的时候,得到的row错误,不是本身点击的row。形成上面所提的错误。
因而:
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行是我加的。
.attr("id",gd.rowIdPrefix+"-2-"+(i-1));
.attr("id",gd.rowIdPrefix+"-1-"+(i-1));
这个两行同时去设置他对应的datagrid-row-rx-x-x
这样两个标识就同步了。
哈哈,看上去多整齐,再看看没修改前:
好,到此这个bug就完美解决了。