轉自：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就完美解決了。