雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单添加节点
jQuery EasyUI 树形菜单 - 树形菜单添加节点
本教程向您展示如何附加节点到树形菜单(Tree)。我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点。
创建食品树
首先,我们创建食品树,代码如下所示:
请注意,树(Tree)组件是定义在
- 标记中,树节点数据从 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
本文转载自:w3cschool
(编辑:雷林鹏 来源:网络 侵删)
雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单添加节点的更多相关文章
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
- jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 使用标记创建树形菜单
jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建异步树形菜单
jQuery EasyUI 树形菜单 - 创建异步树形菜单 为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 'id' 属性,这个将提交回服务器去检索子节点数据. 创建树形菜单(Tree) ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单拖放控制
jQuery EasyUI 树形菜单 - 树形菜单拖放控制 当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置.启用拖拽(drag)和放置(drop) ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建复杂树形网格
jQuery EasyUI 树形菜单 - 创建复杂树形网格 树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格.本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建基础树形网格
jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...
随机推荐
- linux远程方式,以及基础命令
最近准备学习linux系统,购买了阿里巴巴的云服务器,系统为CentOS. 一.连接实例 1.使用管理终端. 这是阿里巴巴云服务器管理控制台,需要登录阿里巴巴,找到自己实例后,点击右侧远程连接即刻. ...
- scrapy - Request 中的回调函数不执行
在 scrapy 中, scrapy.Request(url, headers=self.header, callback=self.parse) 调试的时候,发现回调函数 parse_detail ...
- css的再深入4(更新中···)
两种居中的方式: Margin:0 auto;和text-align:center; Margin的居中是对自身,text-align对元素内部的文本来说. 隐藏的两种方式: visibility:h ...
- Win10子系统Ubuntu安装llvm+clang
https://apt.llvm.org/ 首先 然后 再然后修改/etc/apt/sources.list,添加下面的东西 然后 参考: https://blog.kowalczyk.info/ar ...
- 【做题】CF285E. Positions in Permutations——dp+容斥
题意:求所有长度为\(n\)的排列\(p\)中,有多少个满足:对于所有\(i \,(1 \leq i \leq n)\),其中恰好有\(k\)个满足\(|p_i - i| = 1\).答案对\(10^ ...
- 【resultType】Mybatis种insert或update的resultType问题
Attribute "resultType" must be declared for element type "insert"或"update&q ...
- R read.tabe line 5 did not have 2 elements
R read.tabe line 5 did not have 2 elements Reason: there are special characters such as # in file o ...
- 在Mac OSX下安装Microsoft Calibri字体
参考: Where can I find default Microsoft fonts Calibri, Cambria? 在Mac OSX下安装Microsoft Calibri字体 1.下载: ...
- gulp的使用介绍及技巧
gulp的使用介绍及技巧 转载: https://www.cnblogs.com/2050/p/4198792.html 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安 ...
- Java只给汉字转URLEncoder
public static String encode(String str, String charset) throws UnsupportedEncodingException { Patter ...