最近項目前端使用 jquery+easyui來做，用了幾個月，覺得easyui是一個很不錯的開源前端UI框架，
雖然偶爾會遇到一些小問題，但是憑借多年前端開發的實力積累 都一一解決了，其中比較典型的就是
這個 easyui.editgrid插件了，是基於easyui.datagrid擴展的。其實只用easyui.datarid也能實現
類似的功能，但是速度很慢，用戶體驗極差，所以拋棄了原來easyui.datagrid 中編輯功能的架構
自己擴展實現了其可編輯部分，就是現在的easyui.editgrid.
easyui.editgrid主要側重於編輯功能，當然也可以當做datagrid使用，主要增加功能如下：
1.顯著提升了easyui.datagrid 中beginEdit的性能 使得大量的行處於編輯狀態成為可能，並提供了快速調用函數allBeginEdit
2.封裝了鍵盤控制單元格元素間的切換功能，並作為一個單獨的模塊提供
3.在控件內封裝了一個請求函數，請求后台數據時，控件處於等待狀態
4.增加了一個自由選擇列，可以點擊選擇按鈕后彈出任意內容
5.提供了一個提示氣泡的功能 只要指定行號 氣泡就附着在該行上顯示提示消息
6.增加了各種和編輯相關的事件，如行失去焦點，獲得焦點，新建行，下一行，上一行
easyui.editgrid滿足了這次項目的需求，做出了一些很好，很復雜的效果。
說明：默認上下左右鍵盤切換行和列（可設置），enter鍵盤切換元素（可設置）
下載地址：http://files.cnblogs.com/dint/jquery_easyuiplus_editgrid.zip
具體實現，熟悉easyui.datagrid的朋友應該一下就能看明白,使用方法和easyui.datagrid大體相同，只不過擴展了些方法和事件：
1 window.JLBH=1; 2 window._autoRefresh=false; 3 function delete_fn_row(jlbh){ 4 var rows = $('#dg-dint').editgrid('getRows'); 5 for (var i = 0, il = rows.length; i < il; i++) { 6 if (rows[i].JLBH == jlbh) { 7 var rinx = $('#dg-dint').editgrid('getRowIndex',rows[i]); 8 $('#dg-dint').editgrid('deleteRow', rinx); 9 break; 10 } 11 } 12 } 13 $(function(){ 14 //初始化控件-設置其列名 ，綁定字段等 15 $('#dg-dint').editgrid({ 16 title: 'jquery.easyui.editgrid演示 - http://www.cnblogs.com/dint/', 17 rownumbers: true, 18 showFooter: true, 19 height: 330, 20 width:1000, 21 remoteSort: true, 22 singleSelect: true, 23 onAppendRow:function(nrow){ 24 nrow.JLBH=window.JLBH; 25 window.JLBH++; 26 }, 27 kBoard:{ 28 autoNewRow: true, 29 kLeft: 37, 30 kTop: 38, 31 kRight: 39, 32 kDown: 40 33 }, 34 onRowBlur: function (rowIndex, rowData) { 35 if(window._autoRefresh===false){ 36 var crow=$('#dg-dint').editgrid('getRowData',rowIndex); 37 if(!parseFloat(crow.INTCCC)){ 38 $('#dg-dint').editgrid('toolTipTim',rowIndex,'列 ‘必須大於零的列’ 的值必須大於0！！！！'); 39 return false; 40 } 41 } 42 }, 43 columns: [[ 44 { 45 title: 'DELETE', field: 'DELXXXXXX', width: 100, align: 'center', 46 formatter: function (val, rowData, rowIndex) { 47 return "<a href='#' onclick=\"delete_fn_row('" + rowData.JLBH + "')\">刪除</a>" 48 } 49 }, 50 { title: '改變此列的值可以提交給后台', field: 'AAA', width: 150, align: 'center',sortable:true,editor:{ 51 type:'text', 52 options:{ 53 onChange:function(n,o,row){ 54 var rowIndex =parseInt($(this).parents('td[field=AAA]').parent().attr('datagrid-row-index'),10); 55 row.AAA=n; 56 //請求后台數據 57 $('#dg-dint').editgrid('postData', 58 { 59 m: 'POSTDAT-AAA', 60 d:n, 61 rIndex:rowIndex 62 }, 63 'Default.aspx', function (d) { 64 var data=JSON.parse(d); 65 var rowObj0 = $('#dg-dint').datagrid('getRows')[this.mData.rIndex]; 66 rowObj0.INTBBB=data.INTBBB; 67 rowObj0.INTCCC=data.INTCCC; 68 rowObj0.GGG=data.GGG 69 rowObj0.FFF=data.FFF; 70 window._autoRefresh=true;
//給行賦值后刷新行，ui才能顯示
71 $('#dg-dint').editgrid('refreshRow', this.mData.rIndex); 72 $('#dg-dint').editgrid('beginEdit', this.mData.rIndex); 73 $('#dg-dint').editgrid('rowFocus', this.mData.rIndex); 74 window._autoRefresh=false; 75 }); 76 } 77 } 78 } }, 79 { 80 title: ' 必須大於零的列 ', field: 'INTCCC', width: 100, align: 'center', editor: { 81 type: 'numberbox' 82 } 83 }, 84 { 85 title: '此列是數字列只能輸入數字', field: 'INTBBB', width: 150, align: 'center', editor: { 86 type: 'numberbox', options: { 87 min: 0, 88 validType: 'INTBBB', 89 onChange: function (n,o,row) { 90 91 } 92 } 93 } 94 }, 95 96 { 97 title: '日期選擇列', field: 'DTEDDD', width: 100, align: 'center', editor: { 98 type: 'datebox' 99 } 100 }, 101 { title: 'EEEE', field: 'EEE', width: 100, align: 'center' }, 102 { 103 title: '自定義選擇列', field: 'FFF', width: 100, align: 'center', editor: { 104 type: 'selectbox', 105 options: { 106 onSelectHandler: function () { 107 alert(this.value+' ^_^這里可以做很多事情，比如彈出一個選擇的對話框'); 108 } 109 } 110 } 111 }, 112 { title: 'GGGG', field: 'GGG', width: 100, align: 'center',editor:{type:'text'} }, 113 { title: 'HHHH', field: 'HHH', width: 100, align: 'center' }, 114 { title: 'IIII', field: 'III', width: 100, align: 'center' ,editor:{type:'text'}}, 115 { title: 'JJJJ', field: 'JJJ', width: 100, align: 'center' }, 116 { title: 'KKKK', field: 'KKK', width: 100, align: 'center' ,editor:{type:'text'}}, 117 { title: 'LLLL', field: 'LLL', width: 100, align: 'center' }, 118 { title: 'MMMM', field: 'MMM', width: 100, align: 'center',editor:{type:'text'} }, 119 { title: 'NNNN', field: 'NNN', width: 100, align: 'center' }, 120 { title: 'OOOO', field: 'OOO', width: 100, align: 'center',editor:{type:'text'} }, 121 { title: 'PPPP', field: 'PPP', width: 100, align: 'center' }, 122 { title: 'QQQQ', field: 'QQQ', width: 100, align: 'center',editor:{type:'text'} }, 123 { title: 'RRRR', field: 'RRR', width: 100, align: 'center' }, 124 { title: 'SSSS', field: 'SSS', width: 100, align: 'center',editor:{type:'text'} }, 125 { title: 'TTTT', field: 'TTT', width: 100, align: 'center' }, 126 { title: 'UUUU', field: 'UUU', width: 100, align: 'center',editor:{type:'text'} }, 127 { title: 'VVVV', field: 'VVV', width: 100, align: 'center',editor:{type:'text'} }, 128 { title: 'WWWW', field: 'WWW', width: 100, align: 'center' }, 129 { title: 'XXXX', field: 'XXX', width: 100, align: 'center',editor:{type:'text'} }, 130 { title: 'YYYY', field: 'YYY', width: 100, align: 'center' }, 131 { title: 'ZZZZ', field: 'ZZZ', width: 100, align: 'center',editor:{type:'text'} } 132 ]] 133 }); 134 //啟用鍵盤操作，如果不執行這一句 那么不能用鍵盤在單元格之間切換焦點 135 $('#dg-dint').editgrid('keyBoardInit'); 136 137 //加載數據 138 $.post('Default.aspx?m=DATA',function(d){ 139 var data=JSON.parse(d); 140 for(var i=0,il=data.length;i<il;i++){ 141 $('#dg-dint').editgrid('appendRow',data[i]); 142 } 143 $('#dg-dint').editgrid('allBeginEdit'); 144 }); 145 146 });
效果圖：
