1. 程式人生 > >EasyUI DataGrid 單元格編輯 註釋版

EasyUI DataGrid 單元格編輯 註釋版

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

效果圖:

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>

總結:

    一種學習的方式叫做站在巨人的肩膀上,首先研究別人的程式碼,然後改進程式碼,最後成為自己的程式碼。實現功能是一種學習,更重要的是能夠融匯貫通,而這需要對知識有一個靜下心瞭解和探索的過程;