easyui datagrid 动态删除行

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

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值