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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。