easyui datagrid deleteRow(刪除行)的BUG！

項目中又用到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。形成上面所提的錯誤。

因而：

 

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