码迷,mamicode.com
首页 > 其他好文 > 详细

easyui combotree combobox 使用例子

时间:2017-09-13 01:43:59      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:document   .json   tree   require   iss   message   ref   模糊   disable   

一:引入easyui

二:使用例子

<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: 请选择下拉...
            });
            $(#dd).combobox({
                method: get, //必须指明
                url: Data/combox1.json,//必须指明
                valueField:id,
                textField:text,
                editable: true,   //编辑,支持模糊查询
                multiple: true,   //为true,出来多选框,勾选多个
                required: true                
            });
        });
        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>

 三:数据格式

1.tree_data1.json

[{
    "id":1,
    "text":"My Documents",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":111,
            "text":"Friend"
        },{
            "id":112,
            "text":"Wife"
        },{
            "id":113,
            "text":"Company"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":121,
            "text":"Intel"
        },{
            "id":122,
            "text":"Java",
            "attributes":{
                "p1":"Custom Attribute1",
                "p2":"Custom Attribute2"
            }
        },{
            "id":123,
            "text":"Microsoft Office"
        },{
            "id":124,
            "text":"Games",
            "checked":true
        }]
    },{
        "id":13,
        "text":"index.html"
    },{
        "id":14,
        "text":"about.html"
    },{
        "id":15,
        "text":"welcome.html"
    }]
}]

2.combox1.json

[{
    "id":11,
    "text":"My Documents"     
    },{
        "id":12,
        "text":"Program Files"         
    }]

 

easyui combotree combobox 使用例子

标签:document   .json   tree   require   iss   message   ref   模糊   disable   

原文地址:http://www.cnblogs.com/ligenyun/p/7512991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!