easyui combotree combobox 使用例子

<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>
posted on 2017-09-13 00:13 biind 阅读(5989) 评论(0) 编辑收藏举报
easyui combotree combobox 使用例子

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论
