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

这个方法主要是对“终止编辑”这个操作做一个校验，并且做一些收尾的工作，比如翻译一些代码，将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打下的一个良好的基础。