最近使用easyui的datagrid插件,在做删除行的时候发现了一个问题:
代码如下:
Grid:{ _index:undefined, _grid:$("#grid_set"), load:function(){ $("#grid_set").datagrid({ striped: true, fit:false, singleSelect:true, columns:[[ {field:'name',align:'left',width:100,title:'行/列名称',sortable:true, editor:{ type:'validatebox', options:{ required:true, missingMessage:"数据不可为空", tipPosition:"right", valueField:"name" } } }, {field:'type',align:'left',width:120,title:'行/列值类型',sortable:true, editor:{type:'combobox',options:{ editable:false, data:[{text:"浮点型",value:1,selected:true},{text:"整型",value:2}] },}, formatter:function(value,rowData,rowIndex){ if(value==0){ return; } if(value==1){ return "浮点型"; }else if(value==2){ return "整型"; } } }, {field:'opertaion',align:'left',width:30,title:'操作', formatter: function(value,row,index){ if(value) return value; return '<span class="ico2 icon-del delRows" onClick="$$.Grid.remove();"> </span>'; } } ]] }); //初始化空行 $$.Grid.add(); //点击“添加”按钮触发的事件 $("#js_addLine").on("click",function(){ if ($(this).linkbutton('options').disabled == false) { $$.Grid.add(); } }); }, edit:function(){ var _this = $$.Grid, _grid = _this._grid,_index = _this._index; if (_index == undefined){return true;} if (_grid.datagrid('validateRow', _index)){ // _grid.datagrid('endEdit', _index); _this._index = undefined; return true; } else { return false; } }, add:function(){ var _this = $$.Grid, _grid = _this._grid,_index = _this._index; if (_this.edit()){ _grid.datagrid('appendRow',{}); _index = _grid.datagrid('getRows').length-1; _grid.datagrid('selectRow', _index).datagrid('beginEdit', _index); _this._index = _index; } }, remove:function(){ var _this = $$.Grid, _grid = _this._grid,_index = _this._index; if (_index == undefined){ var rows = _grid.datagrid("getSelections"); for(var i in rows){ var index = _grid.datagrid("getRowIndex",rows[i]); _grid.datagrid("deleteRow",index); } } _grid.datagrid('cancelEdit', _index).datagrid('deleteRow', _index); _this._index = undefined; }, }
在删除的时候rows[]为空或不是对象的错误,所以将remove方法修改成有一个index参数的方法:
remove:function(id){ var _this = $$.Grid, _grid = _this._grid; var index = _grid.datagrid("getRowIndex",id); _index=index; if (_index != undefined){ _grid.datagrid("deleteRow",_index); } }
又发现传入的index不正确,比如我有三行数据,我删除第二行,index为1(index从0开始),这是正确的,当我再删除原来的第三行数据(现在的第二行数据),发现传入的index仍未2,但是id和datagrid-row-index都已经改变了,使用
_grid.datagrid("reload");
重新加载,没有效果。
后再在网上找了到一个列子,是根据当前元素找到tr元素,然后获取datagrid-row-index属性的值,这样来获取index的,最终实现了删除的方法:
onClick="$$.Grid.remove(this);" getRowIndex:function (target){ //获取匹配的第一个祖元素 var tr = $(target).closest('tr.datagrid-row'); return parseInt(tr.attr('datagrid-row-index')); }, remove:function(target){ var _this = $$.Grid, _grid = _this._grid; _grid.datagrid('deleteRow', $$.Grid.getRowIndex(target)); }