1.随便聊聊
这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的datagrid的源码进行解读,想从中扩展一些实用方法出来.初次打开源码拜读时,呜呼呀,(用东北话说就是,哎呀妈呀),介些都是啥子玩意啊?原来,我从晚上下载的是min版的,众所周知,min版即为压缩版那啊,不过我先前以为只是将空格和回车删除掉了.出乎意料的是并非如此,各位请看:
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版本,请告之在下,在此感谢!
2.知识梳理
不过,在此也要告诉大家一个好消息,在本人的悉心研究下,已经有了重大突破!(怎么像发布会,抱歉抱歉),现在就将实践经验和代码呈上,请各位赐教!我所做的扩展是对单元格的操作,目前仅仅扩展了两个方法:beginEditCell和endEditCell,参照beginEdit和endEdit两个方法而来,有所改动还需完善.后者两个方法可以参照API,分别表示开始编辑一行和结束编辑一行,很显然这是针对可编辑的datagrid而言的.
扩展jquery有一个基本的框架,在这个框架之内是很普通写js代码是一样的的.下面看这个框架:
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的缘故了,并且还有将该元素返回,以便实现级联处理的效果.下面就把完整的代码展示出来,不做过多的解释,因为其中比较复杂,一一注释比较繁琐,不过有时间我会加上的.
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);