`
yingruochen
  • 浏览: 75107 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

easyui datagrid 动态删除行

    博客分类:
  • WEb
阅读更多

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

 

 

 

分享到:
评论
1 楼 duninet 2015-07-15  
不用这么复杂,其实获取index变通一下即可:
先调用getRowIndex方法,返回一个索引号,这个索引号就是tr的datagrid-row-index值,然后再调用deleteRow方法,传入上面或的索引号,这样就好了。
var row = $("#sku").datagrid('getSelected');
if(row!==null){
     var index = $("#sku").datagrid('getRowIndex',row.skuId);
     $("#sku").datagrid('deleteRow',index);
}

相关推荐

    easyui DataGrid动态编辑

    在本文中,我们将深入探讨EasyUI的DataGrid组件如何实现动态编辑功能。EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的UI组件,DataGrid就是其中之一,常用于展示和管理表格数据。 DataGrid是...

    easyui datagrid 删除多行操作

    easyui datagrid 删除多行操作时会出现异常,该方法可以直接加载一次数据,避免该问题的发生

    easyui datagrid 拖拽到 tree

    Tree组件同样支持动态加载数据和多种操作,如添加、删除、移动节点等。 要实现拖拽功能,我们需要利用EasyUI提供的drag and drop(DnD)功能。在本案例中,是从datagrid拖拽行到tree,这涉及到对`datagrid-dnd.js`...

    EasyUI DataGrid 添加工具

    例如:添加、删除或编辑数据行等。 ##### 2. 按钮属性 每个按钮都是一个对象,其中包含以下关键属性: - **text**:指定按钮上显示的文本内容。例如:“添加”、“删除”等。 - **iconCls**:指定按钮左侧显示的...

    JqueryEasyUI DataGrid例子

    4. **增删改查操作**:DataGrid 提供了内置的编辑功能,可以通过工具栏的按钮或双击行来触发。在 JavaScript 中监听这些事件,向 Servlet 发送相应的请求,并更新 DataGrid 显示的数据。 5. **数据库交互**:...

    EasyUIDataGrid(net)

    EasyUIDataGrid在.NET环境中,提供了与服务器端交互的能力,能够动态加载数据,并且支持各种自定义样式和行为。 2. **主要功能** - **数据绑定**:EasyUIDataGrid能够绑定到各种.NET数据源,如DataTable、List、...

    EasyUI DataGrid及Pagination(源码)

    DataGrid是一个强大的表格控件,它可以动态加载数据、排序、过滤、编辑和删除数据等。在DataGrid中,你可以通过配置列定义来展示不同的数据字段,并且可以设置各种样式和交互效果,如固定列、行选择、单元格编辑等。...

    EasyUI的DataGrid每行数据添加操作按钮的实现代码

    在某些情况下,我们可能需要在DataGrid的每行数据后面添加操作按钮,以便用户可以执行特定的操作,如编辑、删除或查看详细信息。下面我们将详细介绍如何在EasyUI的DataGrid中实现这一功能。 首先,我们需要在HTML...

    easyUidataGrid

    `easyUidataGrid`是一个基于`EasyUI`框架的数据网格组件的使用示例,适合初学者学习和使用。`EasyUI`是一个轻量级的前端JavaScript库,它基于jQuery,提供了丰富的用户界面组件,包括数据网格、下拉框、表单、窗口等...

    WebForm中EasyUI DataGrid

    1. 数据绑定:DataGrid能够轻松地与后台数据库进行数据绑定,通过AJAX技术动态加载数据,无需手动刷新页面。 2. 分页功能:内置分页控件,支持自定义每页显示条数,使大量数据的浏览变得轻松。 3. 排序功能:用户...

    EasyUi DataGrid增删改查(EasyUI)示例源码

    兼容ie,火狐和谷歌,删除在 &lt;a href="#" class="easyui-linkbutton" id="id_cancel " iconcls="icon-cancel" plain="true" onclick="delete_dg();"&gt;删除调用一下删除的方法即可;绝对可用,提供这方面学习和开发的...

    EasyUI DataGrid 增删改查源码

    此外,EasyUI DataGrid还支持各种定制化,如自定义列、行样式、工具栏和操作按钮。源码分析可以帮助我们理解如何通过配置选项和事件监听来实现这些定制。例如,我们可以通过监听`onClickRow`事件来实现单击行时的...

    EasyUI中datagrid 分页,僧删改查,上下移动数据.net案例

    本文将深入探讨标题中的"EasyUI中datagrid分页,增删改查,上下移动数据"的.NET案例。 **EasyUI的datagrid组件**: EasyUI的datagrid是一个表格控件,它具有数据展示、排序、过滤、分页等功能,非常适合用于数据...

    easyui DataGrid 数据表格 属性

    通过阅读文档中的 `.doc` 文件,你可以更全面地了解 EasyUI DataGrid 的各种属性和用法,包括一些高级特性,如动态加载数据、数据绑定、异步操作等。同时,结合实际项目实践,这些知识将有助于提升你的前端开发技能...

    easyui使用datagrid定制生成一个table

    ### EasyUI 使用 DataGrid 定制生成 Table 的关键技术点 #### 一、数据绑定 **1.1 DataGrid 自动生成列与用户自定义列** EasyUI 的 DataGrid 控件支持两种方式的数据绑定:自动列生成和用户自定义列。 - **自动...

    easyUI的dataGrid的使用DEMO

    这个“easyUI的dataGrid的使用DEMO”包含了数据库脚本文件,意味着它不仅展示了如何在前端使用 dataGrid,还可能涉及到了后端数据的处理和交互。 1. **jQuery EasyUI 数据网格(dataGrid)**: - `dataGrid` 是 ...

    easy ui datagrid项目完整源代码

    &lt;table id="datagrid" class="easyui-datagrid" title="数据表格" style="width:100%;height:250px" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" url="get_data.json" method=...

    query_easyui_datagrid的增加_修改_删除.

    ### Query EasyUI Datagrid 的增加、修改与删除 在探讨如何使用`query_easyui_datagrid`进行数据的增加、修改和删除之前,我们先来了解EasyUI库的基础知识及其提供的Datagrid组件。EasyUI是一个基于jQuery的用户...

    easyUI datagrid 做的工程

    5. **动态加载**:对于大数据量的情况,datagrid 可以实现动态加载,只加载可视区域内的数据,提高页面性能。 6. **数据分页**:datagrid 自带分页功能,可以设置每页显示的数据量,并实时更新数据显示。 7. **...

    jquery easyui datagrid demo 详解

    Datagrid 提供了选中行的处理,可以通过 `getSelections` 获取选中的行,然后发送请求删除: ```javascript $('#delBtn').click(function(){ var selectedRows = $('#datagrid').datagrid('getSelections'); if ...

Global site tag (gtag.js) - Google Analytics