Row Editing in DataGrid简单讲解

电玩女神 2022-08-13 00:37 85阅读 0赞

具体例子可以去官网上看，官网的demo和documentation都是非常有用的。

下面是从官网上拿来的代码，这里只看js吧，底下做了分析

var editIndex = undefined;
            function endEditing(){
                if (editIndex == undefined){return true}
                if ($('#dg').datagrid('validateRow', editIndex)){
                    var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
                    var productname = $(ed.target).combobox('getText');
                    $('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
                    $('#dg').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }
            function onClickRow(index){
                if (editIndex != index){
                    if (endEditing()){
                        $('#dg').datagrid('selectRow', index)
                                .datagrid('beginEdit', index);
                        editIndex = index;
                    } else {
                        $('#dg').datagrid('selectRow', editIndex);
                    }
                }
            }
            function append(){
                if (endEditing()){
                    $('#dg').datagrid('appendRow',{status:'P'});
                    editIndex = $('#dg').datagrid('getRows').length-1;
                    $('#dg').datagrid('selectRow', editIndex)
                            .datagrid('beginEdit', editIndex);
                }
            }
            function removeit(){
                if (editIndex == undefined){return}
                $('#dg').datagrid('cancelEdit', editIndex)
                        .datagrid('deleteRow', editIndex);
                editIndex = undefined;
            }
            function accept(){
                if (endEditing()){
                    $('#dg').datagrid('acceptChanges');
                }
            }
            function reject(){
                $('#dg').datagrid('rejectChanges');
                editIndex = undefined;
            }
            function getChanges(){
                var rows = $('#dg').datagrid('getChanges');
                alert(rows.length+' rows are changed!');
            }

重点放在js上，可以看到首先定义了一个变量editIndex，这个变量记录了当前的编辑行索引

可以想的到，这个变量将会在“编辑开始”时被赋值，而在“编辑终止”时被还原成undefined，这个也就是各个方法之间通信的公共变量。

**下面要介绍一个最重要的方法——endEditing**，可以看到这个方法在下面的好几个方法中都用到了，非常的关键。

那么endEditing是用来做什么的呢？首先看名字来猜猜，这个方法大概是用来结束编辑的，再看看代码

需要校验通过才能终止编辑，返回true，由于终止编辑了那么editIndex又被置为undefined。否则返回false

这个方法主要是对“终止编辑”这个操作做一个校验，若通过校验则做一些收尾的工作，比如endEditing这行记录，翻译一些代码，将editIndex置为undefined等。

从而印证了刚才观察到的，这个方法是要配合别的方法一起使用的，也就是所谓的需要“终止编辑”的方法，先来看看它们吧

onClickRow(index)

这是datagrid提供的一个**onClickRow**事件的处理函数，当点击某一行时触发，在Row Editing中我们希望点击某一行时可以将那一行变为可编辑行。

那么很简单：

$('#dg').datagrid('beginEdit', index)

若是已经在编辑其中一行了，然后再点击另一行的这种clickRow呢？那么需要判断editIndex和index是否相等了

若不相等，则要先将当前编辑行“终止编辑”，再“开始编辑”新点击的那一行。若相等，那么还是选中当前编辑行

function onClickRow(index){
                if (editIndex != index){
                    if (endEditing()){
                        $('#dg').datagrid('beginEdit', index);
                        editIndex = index;
                    } else {
                        $('#dg').datagrid('selectRow', editIndex);
                    }
                }
            }

接下来的几个方法其实也都是围绕着editIndex来进行的。其中datagrid的appenRow方法可以给新增行赋初始值

在accept时需要调用**acceptChanges**方法，这个方法是接受之前的改变用的，也就是说这个方法真正的将刚才所改变的值保存了下来

若是没有调用这个方法前，即使“终止编辑”了，但是若按cancel那个按钮，则未acceptChanges的row全部复原。另外，还可以通过**getChanges**来查看还未accept的changes的条数

搞懂这个demo其实也就掌握了大多数情况datagrid的编辑情况，为之后更复杂的datagrid打下的一个良好的基础。

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

相关简单讲解RabbitMQ

[简单讲解RabbitMQ][RabbitMQ] [RabbitMQ应用][RabbitMQ 1] -------------------- 文章目录

Bertha 。/ 2023年09月28日 11:51/ 0 赞/ 121 阅读

相关【easyui】datagrid-updateRow函数，更新row时object对象数据无法显示问题

前提今天遇到一个需求，上传文件成功后，需要把文件名和文件ID重新写入到datagrid中进行显示但是这个文件名和文件ID，只在前台保存了，并没有在后台和主数据关联到

我不是女神ヾ/ 2023年01月11日 01:11/ 0 赞/ 122 阅读

相关 Get GridView selected row DataKey in Javascript

<asp:TemplateField ShowHeader = "False" > <ItemTemplate> <asp:HiddenField ID

爱被打了一巴掌/ 2022年09月18日 15:57/ 0 赞/ 60 阅读

相关 datagrid进阶——subGrid讲解

subGrid，也就是datagrid中再套一层datagrid，比较适合用于显示一些带有层次的数据，比如要显示一批订单，订单包含具体的货物。这样一个需求，就可以用到subGr

àì夳堔傛蜴生んèń/ 2022年08月13日 00:41/ 0 赞/ 267 阅读

相关 Row Editing in DataGrid简单讲解

具体例子可以去官网上看，官网的demo和documentation都是非常有用的。下面是从官网上拿来的代码，这里只看js吧，底下做了分析 var editInde

电玩女神/ 2022年08月13日 00:37/ 0 赞/ 86 阅读

相关 IOS block简单讲解

1、block 定义及调用 block定义 int (^sum) (int a,int b)=^(int a,int b) \{ return a+b;

- 日理万妓/ 2022年08月06日 14:25/ 0 赞/ 189 阅读

相关 Mysql Row_Format 参数讲解

下面是对于Row\_Format参数的讲解: 在MYSQL中，若一张表里面不存在varchar、text以及其变形、blob以及其变形的字段的话，那么张这个表其实也叫静态表

我会带着你远行/ 2022年03月31日 07:42/ 0 赞/ 219 阅读

相关 Easyui datagrid getData简单使用

`var cx = $("cxTable").datagrid('getData');` 通过上面的语句获得的cx变量，在控制台输出一下，显示为： `conso

浅浅的花香味﹌/ 2022年02月03日 17:39/ 0 赞/ 374 阅读

相关 C# in Depth Third Edition 学习笔记-- 可空类型

1. 没有值怎么办？客户下了一份订单，有订货日期，但尚未发货，但没有发货日期，怎么表述发货日期？ C\2以后使用可空类型。 2. 为什么值类型的变量不能是null？引

雨点打透心脏的1/2处/ 2021年11月23日 04:40/ 0 赞/ 200 阅读

相关 MVVM下DataGrid的简单应用

基于MVVM模式下DataGrid的简单应用，本实例将实现一个用户列表的展示和一些数据操作功能，如图1。 ![Center][] 图1 实例要求：（1）实现用户列表的

心已赠人/ 2021年09月10日 22:40/ 0 赞/ 349 阅读