easyUI 附加tree节点到tree

本文介绍如何使用EasyUI树插件添加节点。通过实例演示了创建食品树,并向现有节点添加新节点的过程。

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

@author YHC

这个教程向你展示如何附加节点到tree,我们将创建一个食品tree包含水果和蔬菜节点,然后添加一些其他水果到已存在的水果节点.


创建 foods(食品) 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"加载.

得到父节点
然后我们通过点击节点选择fruit (食品节点),我们将添加一些其他的食品(fruit)数据,执行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  
    });  
}  
当添加一些fruit(食品),你将看见:


正如你所看见的,使用easyui的tree 插件去附加节点不是那么的难.

下载 EasyUI 示例:








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值