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获取数据、多个下拉框联动等都可以通过扩展来完成。

 

转自：http://www.cnblogs.com/xuguanbao/p/4496888.html

posted @ 2016-06-19 08:54  losesea  阅读(1200)  评论(0)    收藏  举报