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獲取數據、多個下拉框聯動等都可以通過擴展來完成。