1、 http:/xueyuan.lanqiao.org创建简单树课程目标 掌握 Tree的使用方法TreeTree简介树控件在 web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。这种控件在 web应用中会经常使用到，如菜单，部门的组织结构等。效果如图：开发 Tree程序一个树形菜单（Tree）可以从标记创建。easyui 树形菜单（Tree）也可以定义在 元素中。无序列表的 元素提供一个基础的树（Tree）结构。每一个 元素将产生一个树节点，子 元素将产生一个子树节点。复制1. 2. Folder3. 4. 5. Sub Folder 16. 7.
2、http:/xueyuan.lanqiao.org8. File 119. 10. File 1211. File 1312. 13. 14. File 215. File 316. 17. File2118.参考代码:17/tree01.html效果如下图：树控件也可以定义在一个空元素中并使用 data属性加载数据。复制1. 2. 3. $(function() 4. $(“#tt“).tree(5. data: 6. text: Item1,7. state: closed,8. children: 9. text: Item1110. ,11. text: Item1212. 13. ,
3、14. text: Item2http:/xueyuan.lanqiao.org15. ,16. onClick: function(node)17. /编辑树节点名称18. $(this).tree(beginEdit,node.target);19. 20. );21. );22.参考代码:17/tree02.html效果如下图：树控件也可以定义在一个空元素中并使用 Javascript加载数据。复制1. 2. 3. $(function() 4. $(“#tt“).tree(5. url:/dist/data/tree_data.json6. );7. );8. json文件内容：复制1
4、. 2. “id“:0,3. “text“:“Foods“,4. “children“:5. “id“:1,6. “text“:“Fruits“,7. “children“:8. “id“:11,9. “checked“:“true“,http:/xueyuan.lanqiao.org10. “text“:“apple“11. ,12. “id“:12,13. “text“:“orange“14. 15. ,16. “id“:2,17. “text“:“Vegetables“,18. “state“:“closed“,19. “children“:20. “id“:21,21. “text“:
5、“tomato“22. ,23. “id“:22,24. “text“:“carrot“25. ,26. “id“:23,27. “text“:“cabbage“28. ,29. “id“:24,30. “text“:“potato“31. ,32. “id“:25,33. “text“:“lettuce“34. 35. 36.参考代码:17/tree03.html效果如下图：树控件数据格式化每个节点都具备以下属性： id：节点 ID，对加载远程数据很重要。http:/xueyuan.lanqiao.org text：显示节点文本。 state：节点状态，open 或 closed，默认：op
6、en。如果为closed的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数组声明了若干节点。 iconCls:节点前显示的图标。创建异步树形菜单树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回 JSON数据来填充树并完成异步请求。树控件读取 URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点 id的值作为 http请求参数并命名为id，通过 URL发送到服务器上面检索子节点。为了创建异步的树形菜单，每一
7、个树节点必须要有一个id属性，这个将提交回服务器去检索子节点数据。HTML代码：复制1. 2.3. 4. $(function() 5. $(“#tt“).tree(6. url:具体的地址 7. );8. );9. tree需要的 json格式的字符串必须使用双引号。如果换成单引号是不能正常显示的。Tree常用属性http:/xueyuan.lanqiao.org属性名 属性值类型 描述 默认值url string 检索远程数据的 URL地址。 nullmethod string 检索数据的 HTTP方法。（POST / GET）postanimate boolean 定义节点在展开或折叠的
8、时候是否显示动画效果。falsecheckbox boolean 定义是否在每一个借点之前都显示复选框。falsecascadeCheck boolean 定义是否层叠选中状态。 trueonlyLeafCheck boolean 定义是否只在末级节点之前显示复选框。falselines boolean 定义是否显示树控件上的虚线。 falsednd boolean 定义是否启用拖拽功能。 falseformatter function(node) 定义如何渲染节点的文本。 falseloader function(param,success,error) 定义如何从远程服务器加载数据。jso
9、n loaderloadFilter function(data,parent) 返回过滤过的数据进行展示。案例：复制http:/xueyuan.lanqiao.org1. $(“#tt“).tree(2. url:/dist/data/tree_data.json ,3. onClick: function(node)4. /编辑树节点名称5. $(this).tree(beginEdit,node.target);6. 7. );参考代码:17/tree03.htmlTree常用方法方法名 方法参数描述options none 返回树控件属性。loadData data 读取树控件数据。g
10、etNode target 获取指定节点对象。getData target 获取指定节点数据，包含它的子节点。reload target 重新载入树控件数据。getRoot none 获取根节点，返回节点对象。getRoots none 获取所有根节点，返回节点数组。getParent target 获取父节点，target参数代表节点的 DOM对象。getChildren target 获取所有子节点，target参数代表节点的 DOM对象。getChecked state 获取所有选中的节点。http:/xueyuan.lanqiao.orggetSelected none 获取选择节点并
11、返回它，如果未选择则返回 null。isLeaf target 判断指定的节点是否是叶子节点，target 参数是一个节点 DOM对象。find id 查找指定节点并返回节点对象。select target 选择一个节点，target参数表示节点的 DOM对象。check target 选中指定节点。uncheck target 取消选中指定节点。collapse target 折叠一个节点，target参数表示节点的 DOM对象。expand target 展开一个节点，target参数表示节点的 DOM对象。collapseAll target 折叠所有节点。expandAll targe
12、t 展开所有节点。expandTo target 打开从根节点到指定节点之间的所有节点。scrollTo target 滚动到指定节点。append param 追加若干子节点到一个父节点。toggle target 打开或关闭节点的触发器，target 参数是一个节点 DOM对象。insert param 在一个指定节点之前或之后插入节点。http:/xueyuan.lanqiao.orgremove target 移除一个节点和它的子节点，target参数是该节点的 DOM对象。pop target 移除一个节点和它的子节点，该方法跟 remove方法一样，不同的是它将返回被移除的节点数据
13、。update param 更新指定节点。enableDnd none 启用拖拽功能。disableDnd none 禁用拖拽功能。beginEdit target 开始编辑一个节点。endEdit target 结束编辑一个节点。cancelEdit target 取消编辑一个节点。Tree常用事件很多事件的回调函数都包含node参数，其具备如下属性： id：绑定节点的标识值。 text：显示的节点文本。 iconCls：显示的节点图标 CSS类 ID。 checked：该节点是否被选中。 state：节点状态，open 或 closed。 attributes：绑定该节点的自定义属性。 t
14、arget：目标 DOM对象。http:/xueyuan.lanqiao.org方法名 方法参数 描述onClick node 在用户点击一个节点的时候触发。onDblClick node 在用户双击一个节点的时候触发。onBeforeLoad node，param 在请求加载远程数据之前触发，返回 false可以取消加载操作。onLoadSuccess node,data 在数据加载成功以后触发。onLoadError arguments 在数据加载失败的时候触发，arguments 参数和jQuery的$.ajax()函数里面的error回调函数的参数相同。onBeforeExpand n
15、ode 在节点展开之前触发，返回 false可以取消展开操作。onExpand node 在节点展开的时候触发。onBeforeCollapse node 在节点折叠之前触发，返回 false可以取消折叠操作。onBeforeCheck node,checked 在用户点击勾选复选框之前触发，返回 false可以取消选择动作。onCheck node,checked 在用户点击勾选复选框的时候触发。onBeforeSelect node 在用户选择一个节点之前触发，返回 false可以取消选择动作。onSelect node 在用户选择节点的时候触发。http:/xueyuan.lanqiao
16、.orgonContextMenu e,node 在右键点击节点的时候触发。onBeforeDrag node 在开始拖动节点之前触发，返回 false可以拒绝拖动。onStartDrag node 在开始拖动节点的时候触发。onStopDrag node 在停止拖动节点的时候触发。onDragEnter target, source 在拖动一个节点进入到某个目标节点并释放的时候触发，返回 false可以拒绝拖动。onDragOver target, source 在拖动一个节点经过某个目标节点并释放的时候触发。onDragLeave target, source 在拖动一个节点离开某个目标节
17、点并释放的时候触发。onBeforeDrop target, source, point在拖动一个节点之前触发，返回 false可以拒绝拖动。onDrop target, source, point当节点位置被拖动时触发。onBeforeEdit node 在编辑节点之前触发。onAfterEdit node 在编辑节点之后触发。onCancelEdit node 在取消编辑操作的时候触发。代码如下：HTML代码：复制http:/xueyuan.lanqiao.org1. 2. 3. 4. 追加5. 移除6. 7.8. 9. 10.11.12.JS代码：复制1. 2. $(function()
18、 3. $(“#tt“).tree(4. animate:true,5. checkbox:true,6. cascadeCheck:false,7. onlyLeafCheck:true,8. lines:true,9. onContextMenu: function(e, node)10. e.preventDefault();11. / 查找节点12. $(#tt).tree(select, node.target);13. / 显示快捷菜单14. $(#mm).menu(show, 15. left: e.pageX,16. top: e.pageY17. );18. ,19. url
19、:/data/tree_data.json 20. );21. );22.23. function getRoot()24. var root = $(#tt).tree(getRoot);25. alert(root.text);http:/xueyuan.lanqiao.org26. 27.28. function getSelect()29. var node = $(#tt).tree(getSelected);30. if(node = null)31. alert(node);32. return;33. 34. alert(node.text);35. 36.37. functi
20、on getCheck()38. var nodes = $(#tt).tree(getChecked);39. if(nodes = null)40. return;41. 42. for(var index = 0; index 参考代码:17/tree05.htmlhttp:/xueyuan.lanqiao.org效果如下图：树形菜单拖放控制当在一个应用中使用树（Tree）插件，拖拽（drag）和放置（drop）功能要求允许用户改变节点位置。启用拖拽（drag）和放置（drop）操作，所有您需要做的就是把树（Tree）插件的 dnd 属性设置为 true。复制1. $(“#tt“).tr
21、ee(2. dnd: true,3. url:具体 url地址4. );当在一个树节点上发生放置操作，onDrop 事件将被触发，您应该做一些或更多的操作，例如保存节点状态到远程服务器端，等等。复制1. onDrop: function(targetNode, source, point)2. var parentId = $(“#tt“).tree(getNode, targetNode).id;3. $.ajax(4. url: 具体 url地址,5. type: post,6. dataType: json,7. data: http:/xueyuan.lanqiao.org8. id:
22、 source.id,9. parentId: parentId10. 11. );12. 综合应用Layout常用于布局，Tree 常用于菜单，Tabs 常用于具体内容的放置。如下图：代码如下：http:/xueyuan.lanqiao.org复制1. 2. 3. 4. 5. Library6. 7. Tree8. Progressbar9. Accordion10. Layout11. 12. 13. 14. 15. 16. 17. 18. jQuery easyui framework help you build your web page easily.19. 20. 21. No
23、contact data.22. 23. 24. 25. 26. Ok27. Cancel28. 29.JS代码：复制1. $(function()http:/xueyuan.lanqiao.org2. $(“#tree“).tree(3. onClick: function(node)4. if($(“#tree“).tree(“isLeaf“,node.target)5. /得到点击的节点的文字6. var tabsTitle = node.text; / 在用户点击的时候提示7. var tabsUrl = node.url;8. /判断该选项卡是否存在9. if($(“#tabs“).tabs(“exists“,tabsTitle)10. $(“#tabs“).tabs(“select“,tabsTitle);11. else12. $(“#tabs“).tabs(add,13. / 添加一个未选中状态的选项卡面板14. title: tabsTitle,15. href:tabsUrl, 16. selected: true,17. closable:true18. /.19. );20. 21. 22. 23. );24.);参考代码:17/tree07.html以上便是 Tree的基本用法。本文来源：蓝桥软件学院
