可編輯表格使用經驗分享(持續更新)

對於Easyui的可編輯表格，個人也是較為陌生的，儘管在操作方式上可能比使用表單修改的方式便捷，但是可編輯表格對程式碼質量的要求往往更高一些，不熟練的話，容易出現這樣或者那樣的問題，本篇文章就自己使用的經歷做一些總結。

相關介面方法

列屬性formatter

formatter屬性對於可編輯表格來講是非常重要的，想combobox，checkbox這些編輯器，如果不用formatter進行格式化的話，最終datagrid會顯示我們的key而不是我們想要的desc，所以formatter屬性非常重要。

編輯器型別

根據Easyui datagrid的設計，每一列可以對應一種編輯器型別，比如說校驗框，下拉框等。框架自帶了以下幾種編輯器：
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree

除了框架自帶的編輯器，datagrid還提供了靈活的擴充套件介面，使用者可以方便地自己擴充套件編輯器，比如官方提到的一個例子：

1. $.extend($.fn.datagrid.defaults.editors, {
2.     text: {
3.         init: function(container, options){
4.             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
5.             return input;
6.         },
7.         getValue: function(target){
8.             return $(target).val();
9.         },
10.         setValue: function(target, value){
11.             $(target).val(value);
12.         },
13.         resize: function(target, width){
14.             var input = $(target);
15.             if ($.boxModel == true){
16.                 input.width(width - (input.outerWidth() - input.width()));
17.             } else {
18.                 input.width(width);
19.             }
20.         }
21.     }
22. });

基於my97的編輯器

這裡提別提一下將my97日期控制元件整合到可編輯表格的方法，只要擴充套件編輯器型別就可以了，當然了網頁首先要引入my97的WdatePicker.js檔案，然後仿照text編輯器寫my97日期型編輯器：

1. $.extend($.fn.datagrid.defaults.editors, {
2.     my97 : {
3.         init : function(container, options) {
4.             var input = $('<input class="Wdate" type="text" onclick="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\',readOnly:true});"  />')
5.                     .appendTo(container);
6.             return input;
7.         },
8.         getValue : function(target) {
9.             return $(target).val();
10.         },
11.         setValue : function(target, value) {
12.             $(target).val(value);
13.         },
14.         resize : function(target, width) {
15.             var input = $(target);
16.             if ($.boxModel == true) {
17.                 input.width(width - (input.outerWidth() - input.width()));
18.             } else {
19.                 input.width(width);
20.             }
21.         }
22.     }
23. });

為什麼要將my97整合到可編輯表格中？無非是垂涎它的強大功能，特別是時間限制，方便的格式化定義等。而對於時間限制，好像僅僅靠擴充套件這個編輯器還遠遠不夠，比如說我兩個欄位，一個是開始日期，一個結束日期，兩個欄位彼此是有約束關係的，我們該如何處理？這個後面會進一步給出解決方案。

簡單的密碼編輯器

動態增加/刪除編輯器

這兩個方法原文出自夏悸的http://easyui.btboys.com/post-83.html，我在此基礎上稍微做了修改，主要是將方法體放到each裡面了，從而支援多個grid一起操作。

1. $.extend($.fn.datagrid.methods, {
2.     addEditor : function(jq, param) {
3.         return jq.each(function(){
4.             if (param instanceof Array) {
5.                 $.each(param, function(index, item) {
6.                     var e = $(jq).datagrid('getColumnOption', item.field);
7.                     e.editor = item.editor;
8.                 });
9.             } else {
10.                 var e = $(jq).datagrid('getColumnOption', param.field);
11.                 e.editor = param.editor;
12.             }
13.         });
14.     },
15.     removeEditor : function(jq, param) {
16.         return jq.each(function(){
17.             if (param instanceof Array) {
18.                 $.each(param, function(index, item) {
19.                     var e = $(jq).datagrid('getColumnOption', item);
20.                     e.editor = {};
21.                 });
22.             } else {
23.                 var e = $(jq).datagrid('getColumnOption', param);
24.                 e.editor = {};
25.             }
26.         });
27.     }
28. });

這兩個擴充套件適合動態控制某列是否可編輯以及該列的編輯器型別，但是使用的時候要特別注意：當前表格還有處於編輯狀態行的時候不要用這兩個方法，會造成getEditor方法獲取資料不準確，所以這兩個擴充套件方法較為適合單行編輯模式。

欄位的級聯操作

combobox的級聯操作

那例子來分析，比如行政區域分級別，南京市下面有江寧區，棲霞區等；而連雲港市下面有灌雲縣等。當我們選擇不同城市的時候，區縣級別的行政區域combobox內容要動態變化，這就是級聯。

combobox要想實現級聯，方式其實很簡單，利用combobox的onSelect和onShowPanel事件就可以較為輕鬆地實現。onSelect事件用於我們例子提到的市級行政區域，而onShowPanel使用用於我們提到的區縣級行政區域。兩者都是為了動態載入區縣級區域的內容。例如：

1. <th rowspan="2" data-options="field:'city',width:100,align:'center',formatter:regionFormatter,
2.     editor:{
3.         type:'combobox',
4.         options:{
5.             valueField:'id',
6.             textField:'name',
7.             data:getRegions(''),
8.             required:true,
9.             onSelect:function(record){
10.                 var target = $('#tt').datagrid('getEditor',{'index':editingIndex,'field':'county'}).target;
11.                 target.combobox('clear');
12.                 target.combobox('loadData',getRegions(record.id));
13.                 target.combobox('setValue',getRegions(record.id)[0].id);
14.             }
15.         }
16. }">城市</th>
17. <th rowspan="2" data-options="field:'county',width:100,align:'center',formatter:regionFormatter,
18.     editor:{
19.         type:'combobox',
20.         options:{
21.             valueField:'id',
22.             textField:'name',
23.             data:regions,
24.             required:true,
25.             onShowPanel:function(){
26.                 var targetCity = $('#tt').datagrid('getEditor',{'index':editingIndex,'field':'city'}).target;
27.                 var targetCounty = $('#tt').datagrid('getEditor',{'index':editingIndex,'field':'county'}).target;
28.                 var valueCity = targetCity.combobox('getValue');
29.                 var valueCounty = targetCounty.combobox('getValue');
30.                 targetCounty.combobox('clear');
31.                 targetCounty.combobox('loadData',getRegions(valueCity));
32.                 targetCounty.combobox('setValue',valueCounty);
33.             }
34.         }
35. }">區縣</th>

需要注意的是，程式碼中我們大量使用了getEditor方法，這個方法其實才是聯動的紐帶，通過它，我們可以實現編輯器之間互動的載體，通過它，我們可以定位到任意一個存在的編輯器，進而對其進行必要的操作。

文字型別編輯器的級聯

類似文字型別編輯器主要是text,textarea,numberbox,validatebox,datebox這些編輯器。這個地方，我們拿前面提到的例子，日期框，而是使用我們擴充套件的my97編輯器，我們利用它來實現兩個日期間的約束。

首先最重要的還是getEditor方法，它負責不同編輯器之間互動的載體；再者，對於文字，我們要自己繫結事件去實現對其它編輯器的約束，而且繫結的事情最好是有自己的名稱空間，防止跟datagrid自帶的事件衝突，這地方我們使用click.myNameSpace。直接看實現日期框聯動的程式碼可能更為清晰：

1. onClickRow:function (rowIndex) {
2.     editingIndex = rowIndex;
3.     if (lastIndex != rowIndex) {
4.         if ($(this).datagrid('validateRow', lastIndex)) {
5.             $(this).datagrid('endEdit', lastIndex);
6.             $(this).datagrid('beginEdit', rowIndex);
7.             var startTimeEditor = $('#tt').datagrid('getEditor', {
8.                         index : rowIndex,
9.                         field : "startTime"
10.                     });
11.             var endTimeEditor = $('#tt').datagrid('getEditor', {
12.                         index : rowIndex,
13.                         field : "endTime"
14.                     });
15.             if (startTimeEditor) {
16.                 startTimeEditor.target.attr("onclick", "");
17.                 startTimeEditor.target.unbind("click.myNameSpace").bind(
18.                         "click.myNameSpace", function(e) {
19.                             var initObj = {
20.                                 dateFmt : 'yyyy-MM-dd',
21.                                 readOnly : false
22.                             };
23.                             if (endTimeEditor.target.val() != "")
24.                                 initObj["maxDate"] = endTimeEditor.target.val();
25.                             WdatePicker(initObj);
26.                         });
27.             }
28.             if (endTimeEditor) {
29.                 endTimeEditor.target.attr("onclick", "");
30.                 endTimeEditor.target.unbind("click.myNameSpace").bind(
31.                         "click.myNameSpace", function(e) {
32.                             var initObj = {
33.                                 dateFmt : 'yyyy-MM-dd',
34.                                 readOnly : false
35.                             };
36.                             if (startTimeEditor.target.val() != "")
37.                                 initObj["minDate"] = startTimeEditor.target
38.                                         .val();
39.                             WdatePicker(initObj);
40.                         });
41.             }
42.             lastIndex = rowIndex;
43.         } else {
44.             $(this).datagrid('selectRow', lastIndex);
45.         }
46.     }
47. }

我們首先使用startTimeEditor.target.attr("onclick", "");將這種事情繫結方式刪除，然後利用jQuery的事件機制做繫結，可以看到程式碼裡面其實是對my97編輯器進行了重構，從而實現my97日期框可選日期範圍的限制。

編輯欄位對非編輯欄位的依賴

有時候可編輯欄位對不可編輯欄位也有依賴關係。一個典型的場景，如飯店結賬表格，有“應收金額（自動計算，不可編輯）”欄位和“實收金額（收銀員手工填寫，可編輯）”欄位，這種情況下，實收金額顯然是不能大於應收金額的。

其實這種情況的處理比兩個可編輯欄位的級聯更為簡單，利用前面提到的“動態增加/刪除編輯器”擴充套件，我們只要在onClickRow事件中動態設定“實收金額”欄位的編輯器型別就可以了。

假設“實收金額”欄位的編輯器型別是validatebox，使用自己擴充套件的max最大值規則，我們只要動態設定最大值就行了，如下程式碼僅供參考：

1. onClickRow:function(rowIndex){
2.     if (lastIndex != rowIndex){
3.         $('#tt').datagrid('endEdit', lastIndex);
4.         //獲取當前行的應收金額值作為新的校驗規則
5.         var newMax = 'max[' + $('#tt').datagrid('getSelected').receivable + ']';
6.         //動態改變實收金額欄位的編輯器型別（只有在整個表格都沒有處於編輯狀態的行時改變編輯器型別才是安全的）
7.         $('#tt').datagrid('addEditor ',{field:'paid',editor:{type:'validatebox',options:{validType:newMax}}});
8.         $('#tt').datagrid('beginEdit', rowIndex);
9.     }
10.     lastIndex = rowIndex;
11. }

注意：因為動態改變編輯器型別需要在所有行都退出可編輯狀態時才是安全的，所以這種方式只適合單行編輯模式。

資料提交與恢復

利用loading提高使用者體驗

這個地方我們要臨時改變loadMsg，因為預設的提示是“正在載入中……”，我們提交資料的時候應改為“正在儲存中……”，儲存成功後再還原loadMsg屬性，例如：

1. if ($.isEmptyObject(chanages) == false) {
2.     var bakMsg = $(this).datagrid('options').loadMsg;
3.     $(this).datagrid('options').loadMsg = "正在儲存中……";
4.     $('#tt').datagrid('loading');
5.     setTimeout(function() {
6.                 $('#tt').datagrid('loaded');
7.                 $('#tt').datagrid('options').loadMsg = bakMsg;
8.             }, 1000);
9. }

結束編輯後獲取原始資料

在呼叫acceptChanges之前，表格的原始行資料都可以通過繫結到DOM上的物件的originalRows屬性獲取，即：

1. var originalRows = $('#tt').data('datagrid').originalRows;

而在呼叫acceptChanges之後，原始資料便是徹底消失，再也找不回來了。
目前就總結這麼多，後面再有的話會陸續補上，本文提到的所有功能均在演示頁面中可以找到。