easyui datagrid 动态删除行

最新推荐文章于 2024-11-26 10:39:48 发布

原创最新推荐文章于 2024-11-26 10:39:48 发布 · 837 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui datagrid #删除单行 #下拉框text、value

WEb 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了使用EasyUI的datagrid插件时遇到的删除行问题，详细介绍了如何通过改进remove方法解决删除行时出现的错误，并给出了具体的实现代码。

最近使用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();">&nbsp;</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));
}