easyui datagrid 动态删除行

最近使用easyui的datagrid插件，在做删除行的时候发现了一个问题：

代码如下：

Js代码  

1. Grid:{  
2.             _index:undefined,  
3.             _grid:$("#grid_set"),  
4.             load:function(){  
5.                 $("#grid_set").datagrid({  
6.                     striped: true,  
7.                     fit:false,  
8.                     singleSelect:true,  
9.                     columns:[[  
10.                         {field:'name',align:'left',width:100,title:'行/列名称',sortable:true,  
11.                             editor:{  
12.                                 type:'validatebox',  
13.                                 options:{  
14.                                     required:true,  
15.                                     missingMessage:"数据不可为空",  
16.                                     tipPosition:"right",  
17.                                     valueField:"name"  
18.                                 }  
19.                             }  
20.                         },  
21.                         {field:'type',align:'left',width:120,title:'行/列值类型',sortable:true,  
22.                             editor:{type:'combobox',options:{  
23.                                 editable:false,  
24.                                 data:[{text:"浮点型",value:1,selected:true},{text:"整型",value:2}]  
25.                             },},  
26.                             formatter:function(value,rowData,rowIndex){  
27.                                 if(value==0){  
28.                                     return;  
29.                                 }  
30.                                 if(value==1){  
31.                                     return "浮点型";  
32.                                 }else if(value==2){  
33.                                     return "整型";  
34.                                 }  
35.                             }  
36.                         },  
37.                         {field:'opertaion',align:'left',width:30,title:'操作',  
38.                             formatter: function(value,row,index){  
39.                                 if(value) return value;  
40.                                 return '<span class="ico2 icon-del delRows" onClick="$$.Grid.remove();">&nbsp;</span>';  
41.                             }  
42.                         }  
43.                     ]]  
44.                 });  
45.                 //初始化空行  
46.                 $$.Grid.add();  
47.                 //点击“添加”按钮触发的事件  
48.                 $("#js_addLine").on("click",function(){  
49.                     if ($(this).linkbutton('options').disabled == false) {  
50.                         $$.Grid.add();  
51.                     }  
52.                 });  
53.             },  
54.             edit:function(){  
55.                 var _this = $$.Grid, _grid = _this._grid,_index = _this._index;  
56.                 if (_index == undefined){return true;}  
57.                 if (_grid.datagrid('validateRow', _index)){  
58.                     // _grid.datagrid('endEdit', _index);  
59.                     _this._index = undefined;  
60.                     return true;  
61.                 } else {  
62.                     return false;  
63.                 }  
64.             },  
65.             add:function(){  
66.                 var _this = $$.Grid, _grid = _this._grid,_index = _this._index;  
67.                 if (_this.edit()){  
68.                     _grid.datagrid('appendRow',{});  
69.                     _index = _grid.datagrid('getRows').length-1;  
70.                     _grid.datagrid('selectRow', _index).datagrid('beginEdit', _index);  
71.                     _this._index = _index;  
72.                 }  
73.   
74.             },  
75.             remove:function(){  
76.                 var _this = $$.Grid, _grid = _this._grid,_index = _this._index;  
77.                 if (_index == undefined){  
78.                     var rows = _grid.datagrid("getSelections");  
79.                     for(var i in rows){  
80.                         var index = _grid.datagrid("getRowIndex",rows[i]);  
81.                         _grid.datagrid("deleteRow",index);  
82.                     }  
83.                 }  
84.                 _grid.datagrid('cancelEdit', _index).datagrid('deleteRow', _index);  
85.                 _this._index = undefined;  
86.             },  
87.            
88.         }  

 在删除的时候rows[]为空或不是对象的错误，所以将remove方法修改成有一个index参数的方法：

Js代码  

1. remove:function(id){  
2.    var _this = $$.Grid, _grid = _this._grid;  
3.    var index = _grid.datagrid("getRowIndex",id);  
4.    _index=index;  
5.    if (_index != undefined){  
6.       _grid.datagrid("deleteRow",_index);  
7.     }  
8. }  

又发现传入的index不正确，比如我有三行数据，我删除第二行，index为1(index从0开始)，这是正确的，当我再删除原来的第三行数据(现在的第二行数据)，发现传入的index仍未2，但是id和datagrid-row-index都已经改变了，使用

Js代码  

1. _grid.datagrid("reload");  

重新加载，没有效果。

后再在网上找了到一个列子，是根据当前元素找到tr元素，然后获取datagrid-row-index属性的值，这样来获取index的，最终实现了删除的方法：

Js代码  

1. onClick="$$.Grid.remove(this);"  
2.   
3. getRowIndex:function (target){  
4.   //获取匹配的第一个祖元素  
5.    var tr = $(target).closest('tr.datagrid-row');  
6.    return parseInt(tr.attr('datagrid-row-index'));  
7. },  
8. remove:function(target){  
9.    var _this = $$.Grid, _grid = _this._grid;  
10.    _grid.datagrid('deleteRow', $$.Grid.getRowIndex(target));  
11. }  
12. 
    

转载自http://yingruochen.iteye.com/blog/1973818