55面试教程网 jQuery EasyUI 技术教程
jQuery EasyUI 技术教程
jQuery EasyUI 教程jQuery EasyUI 简介jQuery EasyUI 应用 – 创建 CRUD 应用jQuery EasyUI 应用 – 创建 CRUD 数据网格jQuery EasyUI 应用 – 创建展开行明细编辑表单的 CRUD 应用jQuery EasyUI 应用 – 创建 RSS Feed 阅读器jQuery EasyUI 拖放 – 基本的拖动和放置jQuery EasyUI 拖放 – 创建拖放的购物车jQuery EasyUI 拖放 – 创建学校课程表jQuery EasyUI 菜单与按钮 – 创建简单的菜单jQuery EasyUI 菜单与按钮 – 创建链接按钮jQuery EasyUI 菜单与按钮 – 创建菜单按钮jQuery EasyUI 菜单与按钮 – 创建分割按钮jQuery EasyUI 布局 – 为网页创建边框布局jQuery EasyUI 布局 – 在面板中创建复杂布局jQuery EasyUI 布局 – 创建折叠面板jQuery EasyUI 布局 – 创建标签页(Tabs)jQuery EasyUI 布局 – 动态添加标签页(Tabs)jQuery EasyUI 布局 – 添加自动播放标签页(Tabs)jQuery EasyUI 布局 – 创建 XP 风格左侧面板jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格jQuery EasyUI 数据网格 – 取得选中行数据jQuery EasyUI 数据网格 – 添加查询功能jQuery EasyUI 数据网格 – 添加工具栏jQuery EasyUI 数据网格 – 创建复杂工具栏jQuery EasyUI 数据网格 – 设置冻结列jQuery EasyUI 数据网格 – 动态改变列jQuery EasyUI 数据网格 – 格式化列jQuery EasyUI 数据网格 – 设置排序jQuery EasyUI 数据网格 – 自定义排序jQuery EasyUI 数据网格 – 创建列组合jQuery EasyUI 数据网格 – 添加复选框jQuery EasyUI 数据网格 – 自定义分页jQuery EasyUI 数据网格 – 启用行内编辑jQuery EasyUI 数据网格 – 扩展编辑器jQuery EasyUI 数据网格 – 列运算jQuery EasyUI 数据网格 – 合并单元格jQuery EasyUI 数据网格 – 创建自定义视图jQuery EasyUI 数据网格 – 创建页脚摘要jQuery EasyUI 数据网格 – 条件设置行背景颜色jQuery EasyUI 数据网格 – 创建属性网格jQuery EasyUI 数据网格 – 扩展行显示细节jQuery EasyUI 数据网格 – 创建子网格jQuery EasyUI 数据网格 – 使用虚拟滚动视图显示海量数据jQuery EasyUI 数据网格 – 添加分页组件jQuery EasyUI 窗口 – 自定义窗口工具栏jQuery EasyUI 窗口 – 窗口与布局jQuery EasyUI 窗口 – 创建对话框jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框jQuery EasyUI 树形菜单 – 使用标记创建树形菜单jQuery EasyUI 树形菜单 – 创建异步树形菜单jQuery EasyUI 树形菜单 – 树形菜单添加节点jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单jQuery EasyUI 树形菜单 – 树形菜单拖放控制jQuery EasyUI 树形菜单 – 树形菜单加载父/子节点jQuery EasyUI 树形菜单 – 创建基础树形网格jQuery EasyUI 树形菜单 – 创建复杂树形网格jQuery EasyUI 树形菜单 – 树形网格动态加载jQuery EasyUI 树形菜单 – 树形网格添加分页jQuery EasyUI 树形菜单 – 树形网格惰性加载节点jQuery EasyUI 表单 – 创建异步提交表单jQuery EasyUI 表单 – 表单验证jQuery EasyUI 表单 – 创建树形下拉框(ComboTree)jQuery EasyUI 表单 – 格式化下拉框(ComboBox)jQuery EasyUI 表单 – 过滤下拉数据网格(ComboGrid)jQuery EasyUI 插件jQuery EasyUI 扩展

jQuery EasyUI 树形菜单 – 树形菜单添加节点

jQuery EasyUI 树形菜单 - 树形菜单添加节点

本教程向您展示如何附加节点到树形菜单(Tree)。我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点。

创建食品树

首先,我们创建食品树,代码如下所示:

    <div style="width:200px;height:auto;border:1px solid #ccc;">
        <ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
    </div>

请注意,树(Tree)组件是定义在 <ul> 标记中,树节点数据从 URL "tree_data.json" 加载。

得到父节点

然后我们通过点击节点选择水果节点,我们将添加一些其他的水果数据。执行 getSelected 方法得到处理节点:

    var node = $('#tt').tree('getSelected');

getSelected 方法的返回结果是一个 javascript 对象,它有一个 id、text、target 属性。target 属性是一个 DOM 对象,引用选中节点,它的 append 方法将用于附加子节点。

附加节点

    var node = $('#tt').tree('getSelected');
    if (node){
        var nodes = [{
            "id":13,
            "text":"Raspberry"
        },{
            "id":14,
            "text":"Cantaloupe"
        }];
        $('#tt').tree('append', {
            parent:node.target,
            data:nodes
        });
    }

当添加一些水果,您将看见:

正如您所看到的,使用 easyui 的树(Tree)插件去附加节点不是那么的难。

下载 jQuery EasyUI 实例

jeasyui-tree-tree3.zip