1.随便聊聊
这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的datagrid的源码进行解读,想从中扩展一些实用方法出来.初次打开源码拜读时,呜呼呀,(用东北话说就是,哎呀妈呀),介些都是啥子玩意啊?原来,我从晚上下载的是min版的,众所周知,min版即为压缩版那啊,不过我先前以为只是将空格和回车删除掉了.出乎意料的是并非如此,各位请看:
function _195(_196, _197) { var opts = $.data(_196, "progressbar").options; var bar = $.data(_196, "progressbar").bar; if (_197) { opts.width = _197; } bar._outerWidth(opts.width)._outerHeight(opts.height); bar.find("div.progressbar-text").width(bar.width()); bar.find("div.progressbar-text,div.progressbar-value").css({height: bar.height() + "px", lineHeight: bar.height() + "px"}); };
以上是我摘自1.8.0版本中的一段代码.可以看出,排版后仍然无法很轻易地阅读.在此插一句,如果各位谁有非min版本,请告之在下,在此感谢!
2.知识梳理
不过,在此也要告诉大家一个好小心,在本人的悉心研究下,已经有了重大突破!(怎么像发布会,抱歉抱歉),现在就将实践经验和代码呈上,请各位赐教!我所做的扩展是对单元格的操作,目前仅仅扩展了两个方法:beginEditCell和endEditCell,参照beginEdit和endEdit两个方法而来,有所改动还需完善.后者两个方法可以参照API,分别表示开始编辑一行和结束编辑一行,很显然这是针对可编辑的datagrid而言的.
扩展jquery有一个基本的框架,在这个框架之内是很普通写js代码是一样的的.下面看这个框架:
(function ($) { $.extend($.fn.datagrid.methods, { beginEditCell: function (target, options) { return target.each(function () { beginEditCell(this, options); }); }, endEditCell: function (target, options) { return target.each(function () { endEditCell(this, options); }); } }); })(jQuery);
其中,代码中的beginEditCell和endEditCell就是我写的扩展方法,前者是开始编辑单元格,后者是结束编辑单元格. 下面简单介绍一下,juqery使用的引擎是sizzle,sizzle可以为你提供多元素操作,这也就是我提供的基本框架中有each的缘故了,并且还有将该元素返回,以便实现级联处理的效果.下面就把完整的代码展示出来,不做过多的解释,因为其中比较复杂,一一注释比较繁琐,不过有时间我会加上的.
(function ($) { //开启编辑单元格状态 function beginEditCell(target, options) { var opts = $.data(target, "datagrid").options; var tr = opts.finder.getTr(target, options.index); var row = opts.finder.getRow(target, options.index); // //暂时还不知道该代码的含义,忽略使用 // if (tr.hasClass("datagrid-row-editing")) { // return; // } // tr.addClass("datagrid-row-editing"); _initCellEditor(target, options.index, options.field); _outerWidthOfEditable(target); //$.validateRow(target, options.index);暂时先不使用,不知道该方法作用 } function _initCellEditor(target, _index, _field) { var opts = $.data(target, "datagrid").options; var tr = opts.finder.getTr(target, _index); var row = opts.finder.getRow(target, _index); tr.children("td").each(function () { var cell = $(this).find("div.datagrid-cell"); var field = $(this).attr("field"); if (field == _field) {//找到与传递参数相同field的单元格 var col = $(target).datagrid("getColumnOption", field); if (col && col.editor) { var editorType, editorOp; if (typeof col.editor == "string") { editorType = col.editor; } else { editorType = col.editor.type; editorOp = col.editor.options; } var editor = opts.editors[editorType]; if (editor) { var html = cell.html(); var outerWidth = cell._outerWidth(); cell.addClass("datagrid-editable"); cell._outerWidth(outerWidth); cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"1\"><tr><td></td></tr></table>"); cell.children("table").bind( "click dblclick contextmenu", function (e) { e.stopPropagation(); }); $.data(cell[0], "datagrid.editor", { actions: editor, target: editor.init(cell.find("td"), editorOp), field: field, type: editorType, oldHtml: html }); } } tr.find("div.datagrid-editable").each(function () { var field = $(this).parent().attr("field"); var ed = $.data(this, "datagrid.editor"); ed.actions.setValue(ed.target, row[field]); }); } }); } //为可编辑的单元格设置外边框 //来自jquery.easyui.1.8.0.js的 function _4d8()方法 function _outerWidthOfEditable(target) { var dc = $.data(target, "datagrid").dc; dc.view.find("div.datagrid-editable").each(function () { var _this = $(this); var field = _this.parent().attr("field"); var col = $(target).datagrid("getColumnOption", field); _this._outerWidth(col.width); var ed = $.data(this, "datagrid.editor"); if (ed.actions.resize) { ed.actions.resize(ed.target, _this.width()); } }); } //关闭编辑单元格状态 function endEditCell(target, options) { var opts = $.data(target, "datagrid").options; var updatedRows = $.data(target, "datagrid").updatedRows; var insertedRows = $.data(target, "datagrid").insertedRows; var tr = opts.finder.getTr(target, options.index); var row = opts.finder.getRow(target, options.index); // //与beginEditCell相呼应,暂时取消 // if (!tr.hasClass("datagrid-row-editing")) {//行不能编辑时,返回 // return; // } // tr.removeClass("datagrid-row-editing"); var _535 = false; var _536 = {}; tr.find("div.datagrid-editable").each(function () { var _537 = $(this).parent().attr("field"); var ed = $.data(this, "datagrid.editor"); var _538 = ed.actions.getValue(ed.target); if (row[_537] != _538) { row[_537] = _538; _535 = true; _536[_537] = _538; } }); if (_535) { if (_45f(insertedRows, row) == -1) { if (_45f(insertedRows, row) == -1) { updatedRows.push(row); } } } _destroyCellEditor(target, options); $(target).datagrid("refreshRow", options.index); opts.onAfterEdit.call(target, options.index, row, _536); } function _45f(a, o) { for (var i = 0, len = a.length; i < len; i++) { if (a[i] == o) { return i; } } return -1; } //销毁单元格编辑器 function _destroyCellEditor(target, options) { var opts = $.data(target, "datagrid").options; var tr = opts.finder.getTr(target, options.index); tr.children("td").each(function () { var field = $(this).attr("field"); if (field == options.field) {//找到与传递参数相同field的单元格 var cell = $(this).find("div.datagrid-editable"); if (cell.length) { var ed = $.data(cell[0], "datagrid.editor"); if (ed.actions.destroy) { ed.actions.destroy(ed.target); } cell.html(ed.oldHtml); $.removeData(cell[0], "datagrid.editor"); cell.removeClass("datagrid-editable"); cell.css("width", ""); } } }); } $.extend($.fn.datagrid.methods, { beginEditCell: function (target, options) { return target.each(function () { beginEditCell(this, options); }); }, endEditCell: function (target, options) { return target.each(function () { endEditCell(this, options); }); } }); })(jQuery);
测试页面也展示出来,方便大家使用,不过需要加上必需的jquery easyui代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Row Editing DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../plugins/jquery.datagrid.cellextend.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#dg").datagrid({ rownumbers:true, iconCls: 'icon-edit', singleSelect: true, toolbar: '#tb', url: '../datagrid/datagrid_data1.json', onDblClickCell: onClickRow, onAfterEdit:onAfterEdit, striped:true, columns:[[ {field: 'itemid', title: 'Item ID', width: 80, fitColumns: true}, {field: 'productid', title: 'Product', width: 100, formatter: function (value, row) { return row.productname; }, editor: { type: 'combobox', options: { valueField: 'productid', textField: 'productname', url: '../datagrid/products.json', required: true } }}, {field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: {type: 'numberbox', options: {precision: 1}}}, {field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox'}, {field: 'attr1', title: 'Attribute', width: 250, editor: 'text'}, {field: 'status', title: 'Status', width: 60, align: 'center', editor: {type: 'checkbox', options: {on: 'P', off: ''}}}, {field: 'link', title: 'Link', width: 60, align: 'center', formatter: function (value, rowData, rowIndex) { return "<a href='" + value.href + "' onclick='test(" + rowIndex + ");return false;'>" + value.text + "</a>" } }, {field: 'isFamle', title: 'IsFamle', width: 60, align: 'center', formatter: function (value, rowData, rowIndex) { var str = value=="true" ? "checked" : ""; return "<input type='checkbox' " + str + ">"; //return "<a href='" + value.href + "' onclick='test(" + rowIndex + ");return false;'>" + value.text + "</a>" } } ]] }); }); function test(obj){ alert(obj); } </script> </head> <body> <h2>Row Editing DataGrid</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click the row to start editing.</div> <a href="#">asdf</a> </div> <div style="margin:10px 0;"></div> <table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:800px;height:auto"> <thead> <tr> </tr> </thead> </table> <script type="text/javascript"> var _rowIndex = undefined; var _field = undefined; function endEditing() { if (_rowIndex == undefined || _field == undefined) { return true; } $('#dg').datagrid('endEditCell', {index: _rowIndex, field: _field}); _rowIndex = undefined; _field = undefined; return true; } function onClickRow(rowIndex, field, value) { //$('#dg').datagrid('beginEdit', rowIndex); //$('#dg').datagrid('getEditors', rowIndex); if (_rowIndex != rowIndex || _field != field) { if (endEditing()){ $('#dg').datagrid('beginEditCell', {index: rowIndex, field: field}); _rowIndex = rowIndex; _field = field; } } var data = $('#dg').datagrid('getSelected'); // alert(data.link.href); } function onAfterEdit(rowIndex, rowData, changes){ if(changes.status=="P"){ rowData["attr1"]="12312312"; $('#dg').datagrid('updateRow',{ index: rowIndex, row: rowData }); $('#dg').datagrid('acceptChanges'); var data = $('#dg').datagrid('getSelected'); alert(data.status); }else if(changes.status==""){ rowData["attr1"]="12312312"; $('#dg').datagrid('updateRow',{ index: rowIndex, row: rowData }); $('#dg').datagrid('acceptChanges'); var data = $('#dg').datagrid('getSelected'); alert(data.status); alert(data.attr1); } } </script> </body> </html>
感谢大家阅读,请多指教!谢谢