easyui combotree combobox 使用例子

本文轉載自查看原文 2017-09-13 00:13 5428 EasyUI/ easyui combobox combotree

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Resurces/themes/easyui.css" rel="stylesheet" />
    <link href="Resurces/themes/icon.css" rel="stylesheet" />
    <script src="Resurces/Javascript/jquery.min.js"></script>
    <script src="Resurces/Javascript/jquery.easyui.min.js"></script>
    <script>
        $(function () {
            $('#cc').combotree({
                method: 'get', //必須指明
                url: 'Data/tree_data1.json',//必須指明
                editable: true,   //編輯，支持模糊查詢
                multiple: true,   //為true，出來多選框，勾選多個
                required: true,
                missingMessage: '不能為空，請選擇',
                prompt: '請選擇下拉...',
                onHidePanel: function () {
                    var _options = $(this).combobox('options');
                    var _data = $(this).combobox('getData');/* 下拉框所有選項 */
                    var _value = $(this).combobox('getValue');/* 用戶輸入的值 */
                    var _b = false;/* 標識是否在下拉列表中找到了用戶輸入的字符 */
                    for (var i = 0; i < _data.length; i++) {
                        if (_data[i][_options.valueField] == _value) {
                            _b = true;
                            break;
                        }
                    }
                    if (!_b) {
                        $(this).combobox('setValue', '');
                    }
                }
            });
            $('#dd').combobox({
                method: 'get', //必須指明
                url: 'Data/combox1.json',//必須指明
                valueField: 'id',
                textField: 'text',
                editable: true,   //編輯，支持模糊查詢
                //multiple: true,   //為true，出來多選框，勾選多個
                required: true,
                onChange: function (newValue, oldValue) {
                    reload();//實現聯動
                }
            });
        });
        function reload() {
            $('#dd').combobox({
                method: 'reload', //必須指明
                url: 'Data/combox1.json?param='+'這里是傳的新值'+'&a='+Math.random()//必須指明
            });
        }
        function GetData() {
            var t = $('#cc').combotree('getData');
            alert(t.length);
        }
        function SetDefault() {
            var t = $('#cc').combotree('getData');
            $('#cc').combotree('select',t[0].id);
        }
        function getValues() {
            var t = $('#cc').combotree('getValues');
            alert(t);
        }
        function getValue() {
            var t = $('#cc').combotree('getValue');
            alert(t);
        }
        function setValues() {
            $('#cc').combotree('setValues', ['111', '112']);
        }
        function setValue() {
            $('#cc').combotree('setValue', '11');
        }
        function disable() {
            $('#cc').combotree('disable');
        }
        function enable() {
            $('#cc').combotree('enable');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id="cc" />
            <input id="dd" />
            <input type="button" value="getValue" onclick="getValue()" />
            <input type="button" value="getValues" onclick="getValues()" />
            <input type="button" value="setValue" onclick="setValue()" />
            <input type="button" value="setValues" onclick="setValues()" />
            <input type="button" value="disable" onclick="disable()" />
            <input type="button" value="enable" onclick="enable()" />
        </div>
    </form>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 EasyUI combotree的使用 Jquery-easyui-combotree使用心得 easyui combotree模糊查詢 Easyui Combotree問題及其相關 Jquery easyui----combotree easyUI combobox使用方法總結 jquery easyUI中combobox的使用總結 jquery easyui combotree獲取值， combotree獲取多個值 easyui combobox 的取值問題 Easyui combobox 怎么加載數據