最近使用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)); }
相关推荐
easyui datagrid 删除多行操作时会出现异常,该方法可以直接加载一次数据,避免该问题的发生
兼容ie,火狐和谷歌,删除在 <a href="#" class="easyui-linkbutton" id="id_cancel " iconcls="icon-cancel" plain="true" onclick="delete_dg();">删除调用一下删除的方法即可;绝对可用,提供这方面学习和开发的...
最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能 用户在每次使用的时候,都需要去先...
query_easyui_datagrid的增加_修改_删除.
easyui-datagrid官方demo,包含datagrid中combobox的使用方法,以及选择行,删除行,编辑行等实现方法。浏览器直接打开html可能无法访问他的data/datagrid_data.json里的数据,可以将datagrid_data.json里的数据放到...
主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
DataGrid增删改查(EasyUI)示例源码 源码描述: 源码示例前台套用easyui,利用ajax调用sql数据库对学生信息表进行增删改查 兼容ie,火狐和谷歌,删除在 <a href="#" class="easyui-linkbutton" id="id_cancel " ...
easyUI相关,datagrid表格动态添加、删除、修改行内容,以及combobox动态加载下拉框内容,ajax提交后台接收解析参数
主要介绍了JQuery EasyUI datagrid 添加、修改、删除操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
本篇文章主要介绍了jquery Easyui Datagrid实现批量操作(编辑,删除,添加),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jquery EasyUI DataGrid 实现批量删除和批量添加和批量更新,减少服务器交互
详尽的easyui操作示例,便于新手测试学习应用,代码示例使用C#编写,可以方便的编译调测!
SSh结合Easyui实现Datagrid的分页显示(多个实例)。这篇写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加、修改、删除、批量删除等功能
使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了。 比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不...
查看easyui api,其中有一个deleteRow方法,传入要删除行的索引,即可删除该行。 错误做法 于是准备用deleteRow方法和onChecked和onUncheck事件配合使用,来完成多行删除功能。 当用户勾选一行时,触发onChecked...
struts2+ajax+easyui+json+datagrid增,删,改,查,分页,排序,有数据库
easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom操作将生成的展开按钮删除掉,但是...
源代码,实现通过JQuary EasyUI向后台添加或编辑数据