JQueryEasyUI 组件树形下拉框 ComboTree

最新推荐文章于 2024-04-07 10:33:57 发布

原创最新推荐文章于 2024-04-07 10:33:57 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #jquery #easyui #Web

JQueryEasyUI 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JQueryEasyUI中的 ComboTree 组件，这是一个结合了选择控件和下拉树的组件。内容包括树形下拉框的属性如id、text、state和checked，以及如何定义Json数据源格式。还涵盖了组件的方法和实际使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，介绍

定义树形下拉框结合选择控件和下拉树控件
继承关系 combo tree

每个节点都具备以下属性：

· id：节点ID，对加载远程数据很重要。

· text：显示节点文本。

· state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

· checked：表示该节点是否被选中。

· attributes: 被添加到节点的自定义属性。

· children: 一个节点数组声明了若干节点。

2，属性

属性名	属性值类型	描述
editable	boolean	定义用户是否可以直接输入文本到字段中

命名限制 id text children 否则无效

语法

ComboTree 组件 Json 数据源格式

[
          {
              'ID':1
              'text':第一级信息内容
               'children':[｛
                        'ID':11
                        'text':第二级信息内容
                        'children':[
                ]｝
           }
        ]

数据源中 ID 值不能重复

3，方法

方法名	方法参数类型	描述
getText	none	获取输入的文本
getValue	none	获取组件的值（ID值）

语法

$("#标签ID").combotree("方法名")

4，实例

<select id="data">
        <option value="0">加载</option>
    </select>
       <a href="#" id="btn" class="easyui-linkbuttion" data-options="iconCls:'icon-add'">获取</a>

 $(function () {
            $("#data").combotree({
                url: 'T8-1.aspx',
                method: 'post',
                editable: false,
                width:180
            })

            $("#btn").linkbutton({
                onClick: function () {
                    console.info($("#data").combotree("getText"));
                    console.info($("#data").combotree("getValue"));
                }
            });
        });