Row Editing in DataGrid简单讲解

具体例子可以去官网上看，官网的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打下的一个良好的基础。