擴展jquery easyui datagrid編輯單元格

時間 2019-11-12

標籤擴展 jquery easyui datagrid 編輯單元格欄目 JQuery 简体版

原文原文鏈接

1.隨便聊聊

　　這段時間因爲工做上的業務需求,對jquery easyui比較感興趣,根據比較淺薄的js知識,對jquery easyui中的datagrid的源碼進行解讀,想從中擴展一些實用方法出來.初次打開源碼拜讀時,嗚呼呀,(用東北話說就是,哎呀媽呀),介些都是啥子玩意啊?原來,我從晚上下載的是min版的,衆所周知,min版即爲壓縮版那啊,不過我先前覺得只是將空格和回車刪除掉了.出乎意料的是並不是如此,各位請看:javascript

 1 function _195(_196, _197) {  
 2     var opts = $.data(_196, "progressbar").options;  
 3     var bar = $.data(_196, "progressbar").bar;  
 4     if (_197) {  
 5         opts.width = _197;  
 6     }  
 7     bar._outerWidth(opts.width)._outerHeight(opts.height);  
 8     bar.find("div.progressbar-text").width(bar.width());  
 9     bar.find("div.progressbar-text,div.progressbar-value").css({height: bar.height() + "px", lineHeight: bar.height() + "px"});  
10 };

　　以上是我摘自1.8.0版本中的一段代碼.能夠看出,排版後仍然沒法很輕易地閱讀.在此插一句,若是各位誰有非min版本,請告之在下,在此感謝!css

2.知識梳理

　　不過,在此也要告訴你們一個好消息,在本人的悉心研究下,已經有了重大突破!(怎麼像發佈會,抱歉抱歉),如今就將實踐經驗和代碼呈上,請各位賜教!我所作的擴展是對單元格的操做,目前僅僅擴展了兩個方法:beginEditCell和endEditCell,參照beginEdit和endEdit兩個方法而來,有所改動還需完善.後者兩個方法能夠參照API,分別表示開始編輯一行和結束編輯一行,很顯然這是針對可編輯的datagrid而言的.
　　擴展jquery有一個基本的框架,在這個框架以內是很普通寫js代碼是同樣的的.下面看這個框架:html

 1 (function ($) {  
 2     $.extend($.fn.datagrid.methods, {  
 3         beginEditCell: function (target, options) {  
 4             return target.each(function () {  
 5                 beginEditCell(this, options);  
 6             });  
 7         },  
 8         endEditCell: function (target, options) {  
 9             return target.each(function () {  
10                 endEditCell(this, options);  
11             });  
12         }  
13     });  
14 })(jQuery);

　　其中,代碼中的beginEditCell和endEditCell就是我寫的擴展方法,前者是開始編輯單元格,後者是結束編輯單元格. 下面簡單介紹一下,juqery使用的引擎是sizzle,sizzle能夠爲你提供多元素操做,這也就是我提供的基本框架中有each的緣故了,而且還有將該元素返回,以便實現級聯處理的效果.下面就把完整的代碼展現出來,不作過多的解釋,由於其中比較複雜,一一註釋比較繁瑣,不過有時間我會加上的.java

  1 (function ($) {  
  2   
  3     //開啓編輯單元格狀態  
  4     function beginEditCell(target, options) {  
  5   
  6         var opts = $.data(target, "datagrid").options;  
  7         var tr = opts.finder.getTr(target, options.index);  
  8         var row = opts.finder.getRow(target, options.index);  
  9   
 10 //        //暫時還不知道該代碼的含義,忽略使用  
 11 //        if (tr.hasClass("datagrid-row-editing")) {  
 12 //            return;  
 13 //        }  
 14 //        tr.addClass("datagrid-row-editing");  
 15   
 16         _initCellEditor(target, options.index, options.field);  
 17         _outerWidthOfEditable(target);  
 18         //$.validateRow(target, options.index);暫時先不使用,不知道該方法做用  
 19     }  
 20   
 21     function _initCellEditor(target, _index, _field) {  
 22         var opts = $.data(target, "datagrid").options;  
 23         var tr = opts.finder.getTr(target, _index);  
 24         var row = opts.finder.getRow(target, _index);  
 25   
 26         tr.children("td").each(function () {  
 27             var cell = $(this).find("div.datagrid-cell");  
 28             var field = $(this).attr("field");  
 29   
 30             if (field == _field) {//找到與傳遞參數相同field的單元格  
 31                 var col = $(target).datagrid("getColumnOption", field);  
 32                 if (col && col.editor) {  
 33                     var editorType, editorOp;  
 34                     if (typeof col.editor == "string") {  
 35                         editorType = col.editor;  
 36                     } else {  
 37                         editorType = col.editor.type;  
 38                         editorOp = col.editor.options;  
 39                     }  
 40                     var editor = opts.editors[editorType];  
 41                     if (editor) {  
 42                         var html = cell.html();  
 43                         var outerWidth = cell._outerWidth();  
 44                         cell.addClass("datagrid-editable");  
 45                         cell._outerWidth(outerWidth);  
 46                         cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"1\"><tr><td></td></tr></table>");  
 47                         cell.children("table").bind(  
 48                             "click dblclick contextmenu",  
 49                             function (e) {  
 50                                 e.stopPropagation();  
 51                             });  
 52                         $.data(cell[0], "datagrid.editor", {  
 53                             actions: editor,  
 54                             target: editor.init(cell.find("td"),  
 55                                 editorOp),  
 56                             field: field,  
 57                             type: editorType,  
 58                             oldHtml: html  
 59                         });  
 60                     }  
 61                 }  
 62   
 63                 tr.find("div.datagrid-editable").each(function () {  
 64                     var field = $(this).parent().attr("field");  
 65                     var ed = $.data(this, "datagrid.editor");  
 66                     ed.actions.setValue(ed.target, row[field]);  
 67                 });  
 68             }  
 69         });  
 70     }  
 71   
 72     //爲可編輯的單元格設置外邊框  
 73     //來自jquery.easyui.1.8.0.js的 function _4d8()方法  
 74     function _outerWidthOfEditable(target) {  
 75         var dc = $.data(target, "datagrid").dc;  
 76         dc.view.find("div.datagrid-editable").each(function () {  
 77             var _this = $(this);  
 78             var field = _this.parent().attr("field");  
 79             var col = $(target).datagrid("getColumnOption", field);  
 80             _this._outerWidth(col.width);  
 81             var ed = $.data(this, "datagrid.editor");  
 82             if (ed.actions.resize) {  
 83                 ed.actions.resize(ed.target, _this.width());  
 84             }  
 85         });  
 86     }  
 87   
 88     //關閉編輯單元格狀態  
 89     function endEditCell(target, options) {  
 90         var opts = $.data(target, "datagrid").options;  
 91   
 92         var updatedRows = $.data(target, "datagrid").updatedRows;  
 93         var insertedRows = $.data(target, "datagrid").insertedRows;  
 94   
 95         var tr = opts.finder.getTr(target, options.index);  
 96         var row = opts.finder.getRow(target, options.index);  
 97   
 98 //        //與beginEditCell相呼應,暫時取消  
 99 //        if (!tr.hasClass("datagrid-row-editing")) {//行不能編輯時,返回  
100 //            return;  
101 //        }  
102 //        tr.removeClass("datagrid-row-editing");  
103   
104         var _535 = false;  
105         var _536 = {};  
106         tr.find("div.datagrid-editable").each(function () {  
107             var _537 = $(this).parent().attr("field");  
108             var ed = $.data(this, "datagrid.editor");  
109             var _538 = ed.actions.getValue(ed.target);  
110             if (row[_537] != _538) {  
111                 row[_537] = _538;  
112                 _535 = true;  
113                 _536[_537] = _538;  
114             }  
115         });  
116         if (_535) {  
117             if (_45f(insertedRows, row) == -1) {  
118                 if (_45f(insertedRows, row) == -1) {  
119                     updatedRows.push(row);  
120                 }  
121             }  
122         }  
123   
124         _destroyCellEditor(target, options);  
125         $(target).datagrid("refreshRow", options.index);  
126         opts.onAfterEdit.call(target, options.index, row, _536);  
127     }  
128   
129     function _45f(a, o) {  
130         for (var i = 0, len = a.length; i < len; i++) {  
131             if (a[i] == o) {  
132                 return i;  
133             }  
134         }  
135         return -1;  
136     }  
137   
138     //銷燬單元格編輯器  
139     function _destroyCellEditor(target, options) {  
140   
141         var opts = $.data(target, "datagrid").options;  
142         var tr = opts.finder.getTr(target, options.index);  
143   
144         tr.children("td").each(function () {  
145             var field = $(this).attr("field");  
146   
147             if (field == options.field) {//找到與傳遞參數相同field的單元格  
148   
149                 var cell = $(this).find("div.datagrid-editable");  
150                 if (cell.length) {  
151                     var ed = $.data(cell[0], "datagrid.editor");  
152                     if (ed.actions.destroy) {  
153                         ed.actions.destroy(ed.target);  
154                     }  
155                     cell.html(ed.oldHtml);  
156                     $.removeData(cell[0], "datagrid.editor");  
157                     cell.removeClass("datagrid-editable");  
158                     cell.css("width", "");  
159                 }  
160             }  
161         });  
162     }  
163   
164     $.extend($.fn.datagrid.methods, {  
165         beginEditCell: function (target, options) {  
166             return target.each(function () {  
167                 beginEditCell(this, options);  
168             });  
169         },  
170         endEditCell: function (target, options) {  
171             return target.each(function () {  
172                 endEditCell(this, options);  
173             });  
174         }  
175     });  
176 })(jQuery);

View Code

　　測試頁面也展現出來,方便你們使用,不過須要加上必需的jquery easyui代碼:jquery

  1 <!DOCTYPE html>  
  2 <html>  
  3 <head>  
  4     <meta charset="UTF-8">  
  5     <title>Row Editing DataGrid - jQuery EasyUI Demo</title>  
  6     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
  7     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
  8     <link rel="stylesheet" type="text/css" href="../demo.css">  
  9     <script type="text/javascript" src="../../jquery-1.8.0.js"></script>  
 10     <script type="text/javascript" src="../../jquery.easyui.min.js"></script>  
 11     <script type="text/javascript" src="../../plugins/jquery.datagrid.cellextend.js"></script>  
 12     <script type="text/javascript">  
 13         $(document).ready(function(){  
 14             $("#dg").datagrid({  
 15                 rownumbers:true,  
 16                 iconCls: 'icon-edit',  
 17                 singleSelect: true,  
 18                 toolbar: '#tb',  
 19                 url: '../datagrid/datagrid_data1.json',  
 20                 onDblClickCell: onClickRow,  
 21                 onAfterEdit:onAfterEdit,  
 22                 striped:true,  
 23                 columns:[[  
 24                     {field: 'itemid', title: 'Item ID', width: 80, fitColumns: true},  
 25                     {field: 'productid', title: 'Product', width: 100,  
 26                         formatter: function (value, row) {  
 27                             return row.productname;  
 28                         },  
 29                         editor: {  
 30                             type: 'combobox',  
 31                             options: {  
 32                                 valueField: 'productid',  
 33                                 textField: 'productname',  
 34                                 url: '../datagrid/products.json',  
 35                                 required: true  
 36                             }  
 37                         }},  
 38                     {field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: {type: 'numberbox', options: {precision: 1}}},  
 39                     {field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox'},  
 40                     {field: 'attr1', title: 'Attribute', width: 250, editor: 'text'},  
 41                     {field: 'status', title: 'Status', width: 60, align: 'center', editor: {type: 'checkbox', options: {on: 'P', off: ''}}},  
 42                     {field: 'link', title: 'Link', width: 60, align: 'center',  
 43                         formatter: function (value, rowData, rowIndex) {  
 44                             return "<a href='" + value.href + "' onclick='test(" + rowIndex + ");return false;'>" + value.text + "</a>"  
 45                         }  
 46                     },  
 47                     {field: 'isFamle', title: 'IsFamle', width: 60, align: 'center',  
 48                         formatter: function (value, rowData, rowIndex) {  
 49                             var str = value=="true" ? "checked" : "";  
 50                             return "<input type='checkbox' " + str + ">";  
 51                             //return "<a href='" + value.href + "' onclick='test(" + rowIndex + ");return false;'>" + value.text + "</a>"  
 52                         }  
 53                     }  
 54                 ]]  
 55             });  
 56         });  
 57   
 58         function test(obj){  
 59             alert(obj);  
 60         }  
 61     </script>  
 62 </head>  
 63 <body>  
 64 <h2>Row Editing DataGrid</h2>  
 65   
 66 <div class="demo-info">  
 67     <div class="demo-tip icon-tip"></div>  
 68     <div>Click the row to start editing.</div>  
 69     <a href="#">asdf</a>  
 70 </div>  
 71 <div style="margin:10px 0;"></div>  
 72   
 73 <table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:800px;height:auto">  
 74     <thead>  
 75     <tr>  
 76   
 77     </tr>  
 78     </thead>  
 79 </table>  
 80   
 81 <script type="text/javascript">  
 82   
 83     var _rowIndex = undefined;  
 84     var _field = undefined;  
 85   
 86     function endEditing() {  
 87         if (_rowIndex == undefined || _field == undefined) {  
 88             return true;  
 89         }  
 90   
 91         $('#dg').datagrid('endEditCell', {index: _rowIndex, field: _field});  
 92         _rowIndex = undefined;  
 93         _field = undefined;  
 94         return true;  
 95     }  
 96   
 97     function onClickRow(rowIndex, field, value) {  
 98         //$('#dg').datagrid('beginEdit', rowIndex);  
 99         //$('#dg').datagrid('getEditors', rowIndex);  
100         if (_rowIndex != rowIndex || _field != field) {  
101   
102             if (endEditing()){  
103                 $('#dg').datagrid('beginEditCell', {index: rowIndex, field: field});  
104                 _rowIndex = rowIndex;  
105                 _field = field;  
106             }  
107   
108         }  
109   
110         var data = $('#dg').datagrid('getSelected');  
111 //        alert(data.link.href);  
112     }  
113     function onAfterEdit(rowIndex, rowData, changes){  
114   
115         if(changes.status=="P"){  
116             rowData["attr1"]="12312312";  
117             $('#dg').datagrid('updateRow',{  
118                 index: rowIndex,  
119                 row: rowData  
120             });  
121   
122             $('#dg').datagrid('acceptChanges');  
123             var data = $('#dg').datagrid('getSelected');  
124             alert(data.status);  
125         }else if(changes.status==""){  
126             rowData["attr1"]="12312312";  
127             $('#dg').datagrid('updateRow',{  
128                 index: rowIndex,  
129                 row: rowData  
130             });  
131   
132             $('#dg').datagrid('acceptChanges');  
133             var data = $('#dg').datagrid('getSelected');  
134             alert(data.status);  
135             alert(data.attr1);  
136         }  
137     }  
138 </script>  
139 </body>  
140 </html>