編輯單元格

<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>  
    
    //可編輯的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;  
           }  
       }