Row Editing in DataGrid簡單講解

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打下的一個良好的基礎。