最近使用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));
- }
-