EasyUI扩展组件、自定义组件

时间 2019-11-30 标签 easyui 扩展组件自定义

EasyUI自己自带一个很是隐蔽但很是强大的功能——扩展自定义组件。其功能和微软的用户组件功能如出一辙，但EasyUI的好用多了。举例：一个项目中多个地方须要部门下拉框组件，咱们能够这样写：css

<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>

效果以下：html

其中，代码中的js代码最好写到单独的js文件中。该例子可经过如下百度云盘连接下载：http://pan.baidu.com/s/1sjzB4s9jquery

另外，departmentbox这个扩展组件与easyui中的组件使用方法是如出一辙的，故也能够这么写：app

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