EasyUI扩展组件、自定义组件
EasyUI本身自带一个非常隐蔽但非常强大的功能——扩展自定义组件。其功能和微软的用户组件功能一模一样，但EasyUI的好用多了。举例：一个项目中多个地方需要部门下拉框组件，我们可以这样写：
<html> <head> <title>测试扩展组件</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="JQueryEasyUI/jquery.easyui.min.js"></script> <link href="JQueryEasyUI/themes/default/easyui.css" rel="stylesheet" /> <script> $.parser.plugins.push("departmentbox");//注册扩展组件 $.fn.departmentbox = function (options, param) {//定义扩展组件 //当options为字符串时，说明执行的是该插件的方法。 if (typeof options == "string") { return $.fn.combobox.apply(this, arguments); } options = options || {}; //当该组件在一个页面出现多次时，this是一个集合，故需要通过each遍历。 return this.each(function () { var jq = $(this); //$.fn.combobox.parseOptions(this)作用是获取页面中的data-options中的配置 var opts = $.extend({}, $.fn.combobox.parseOptions(this), options); //把配置对象myopts放到$.fn.combobox这个函数中执行。 var myopts = $.extend(true, { data: [{ Id: '1', Name: '人事部' }, { Id: '2', Name: '财务部' }, { Id: '3', Name: '研发部' }, { Id: '4', Name: '销售部' }], valueField: 'Id', textField: 'Name' }, opts); $.fn.combobox.call(jq, myopts); }); }; </script> </head> <body> <label>所属部门：</label> <input class="easyui-departmentbox">//html代码中只需要这么简单的一句代码 </body> </html>
效果如下：
其中，代码中的js代码最好写到单独的js文件中。该例子可通过以下百度云盘链接下载：http://pan.baidu.com/s/1sjzB4s9
另外，departmentbox这个扩展组件与easyui中的组件使用方法是一模一样的，故也可以这么写：
<html> <head> <title>测试扩展组件</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="JQueryEasyUI/jquery.easyui.min.js"></script> <link href="JQueryEasyUI/themes/default/easyui.css" rel="stylesheet" /> <script> $.parser.plugins.push("departmentbox");//注册扩展组件 $.fn.departmentbox = function (options, param) {//定义扩展组件 //当options为字符串时，说明执行的是该插件的方法。 if (typeof options == "string") { return $.fn.combobox.apply(this, arguments); } options = options || {}; //当该组件在一个页面出现多次时，this是一个集合，故需要通过each遍历。 return this.each(function () { var jq = $(this); //$.fn.combobox.parseOptions(this)作用是获取页面中的data-options中的配置 var opts = $.extend({}, $.fn.combobox.parseOptions(this), options); var myopts = $.extend(true, { data: [{ Id: '1', Name: '人事部' }, { Id: '2', Name: '财务部' }, { Id: '3', Name: '研发部' }, { Id: '4', Name: '销售部' }], valueField: 'Id', textField: 'Name' }, opts); $.fn.combobox.call(jq, myopts); }); }; </script> </head> <body> <label>所属部门：</label> <input id="department"> </body> </html> <script> $(document).ready(function () { $('#department').departmentbox(); }); </script>
当然，真正用到项目中的组件肯定不止这么简单，但原理一样，都是把一些公共的配置写到扩展组件里边去，例如通过url获取数据、多个下拉框联动等都可以通过扩展来完成。
