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) {//定义扩展组件
if (typeof options == "string") { return $.fn.combobox.apply(this, arguments); }//当options为字符串时，说明执行的是该插件的方法。
options = options || {};
return this.each(function () {//当该组件在一个页面出现多次时，this是一个集合，故需要通过each遍历。
var jq = $(this);
var opts = $.extend({}, $.fn.combobox.parseOptions(this), options);//$.fn.combobox.parseOptions(this)作用是获取页面中的data-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);//把配置对象myopts放到$.fn.combobox这个函数中执行。
});
};
</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) {//定义扩展组件
if (typeof options == "string") { return $.fn.combobox.apply(this, arguments); }//当options为字符串时，说明执行的是该插件的方法。
options = options || {};
return this.each(function () {//当该组件在一个页面出现多次时，this是一个集合，故需要通过each遍历。
var jq = $(this);
var opts = $.extend({}, $.fn.combobox.parseOptions(this), options);//$.fn.combobox.parseOptions(this)作用是获取页面中的data-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获取数据、多个下拉框联动等都可以通过扩展来完成。
时间： 2024-10-12 16:05:24