EasyUI DataGrid 單元格編輯 註釋版

    最近做組織部專案的時候，需要點選Datagrid，然後能夠寫入數值；研究了半天沒明白是什麼意思，後來查資料的時候，直接在easyUI 中文網的Demo中找到了相同的程式碼，但是程式碼沒有註釋，依然不是很理解，後來找同伴一塊推敲，基本掌握了整個思路，寫出註釋來給大家分享；

EeayUI中文網Demo及展示效果：http://www.jeasyui.net/demo/332.html

效果圖：

HTML程式碼；

                    <table id="dg" class="easyui-datagrid" style="width: 1000px; height: 280px;"
                        data-options=" iconCls: 'icon-edit',
                                        toolbar: '#tb',
                                        rownumbers:true,
                                        singleSelect: false,
                                        url: 'QuantifyRecord.ashx/ProcessRequest',
                                        method:'get',
                                        pagination:true,
                                        onClickCell: onClickCell">
                        <thead>
                            <%--field中帶有editor的是能夠編輯的，其他列是不能編輯的--%>
                            <tr>
                                <th data-options="field:'ck',checkbox:true"></th>
                                <th data-options="field:'DepartmentName',width:200">單位名稱</th>
                                <th data-options="field:'Name',width:350">指標名稱</th>
                                <%--數字，小數點4位，--%>
                                <th data-options="field:'Data',width:150,editor:{type:'numberbox',options:{ precision:4}}">成績</th>
                                <th data-options="field:'remarks',width:150,editor:'text'">備註</th>
                            </tr>
                        </thead>
                    </table>

Js程式碼：

 <script type="text/javascript">

        //可編輯的datagrid  --TODO:範曉權 給EasyUI擴充套件方法；新增editCell方法；
        //方法擴充套件editCell；
        $.extend($.fn.datagrid.methods, {
            //兩個引數
            // jq: 
            // param:物件，包含index 和 滑鼠點選的列屬性；
            //jq = [table#dg.easyui-datagrid, context: document, selector: "#dg"], param = Object {index: 1, field: "Data"}  選擇的是Data列，
            editCell: function (jq, param) {
                //each() 遍歷；
                return jq.each(function () {
                    //options:返回屬性物件。 這個時候的this代表：jq;
                    var opts = $(this).datagrid('options');                                                                                                       
                    //getColumnFields:返回列的欄位，如果 frozen 設定為 true，則凍結列的欄位被返回。
                    //concat:用於連線兩個或多個陣列。該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本
                    //與HTML的editor屬性有關；能夠編輯的列和不能編輯的列；
                    //fields的值，和上面HTML對應；
                        //Array[5]
                        //0: "ck"
                        //1: "DepartmentName"
                        //2: "Name"
                        //3: "Data"
                        //4: "remarks"
                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                    //下面for迴圈，設定列能夠編輯。當不能編輯時，editor的值為undefined，能夠編輯值為text;
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        //迴圈到的列，不等於滑鼠點選的那一列時，設定列的editor的值為null；
                        if (fields[i] != param.field) {
                            col.editor = null;
                        }
                    }
                    //開始對一行進行編輯。param.index 為行號；對選中的一行進行編輯；
                    $(this).datagrid('beginEdit', param.index);
                    //for迴圈，設定col
                    for (var i = 0; i < fields.length; i++) {
                        //getColumnOption:返回指定列的選項。
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        //給列的editor屬性賦值；text 或者其他；
                        col.editor = col.editor1;
                    }
                });
            }
        });
        //定義一個 行號遍歷 賦值為undefined；
        var editIndex = undefined;
        //該函式的返回值為Boolean；
        function endEditing() {
            if (editIndex == undefined) { return true }
            //驗證指定的行，有效時返回 true。 -範曉權
            if ($('#dg').datagrid('validateRow', editIndex)) {
                //結束對一行進行編輯。
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

        //雙擊單元格，index是行值，field是列的欄位名；
        function onClickCell(index, field) {
          
            //endEditing 的返回值是boolean 值；當返回值為true的時候；
            if (endEditing()) {
                //選中一行，行索引從 0 開始。
                $('#dg').datagrid('selectRow', index)
                    //行值和欄位內容  TODO：範曉權
                        .datagrid('editCell', { index: index, field: field });
                //選中的行值賦值給editIndex;
                editIndex = index;
            }
        }

    </script>

總結：