【蓝桥软件学院】创建简单树.docx

创建简单树课程目标 掌握Tree的使用方法TreeTree简介树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。这种控件在web应用中会经常使用到，如菜单，部门的组织结构等。效果如图：开发Tree程序一个树形菜单（Tree）可以从标记创建。easyui 树形菜单（Tree）也可以定义在元素中。无序列表的元素提供一个基础的树（Tree）结构。每一个元素将产生一个树节点，子元素将产生一个子树节点。复制1. 2. Folder3. 4. 5. Sub Folder 16. 7. 8. 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. ,14. text: Item215. ,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. 2. id:0,3. text:Foods,4. children:5. id:1,6. text:Fruits,7. children:8. id:11,9. checked:true,10. text:apple11. ,12. id:12,13. text:orange14. 15. ,16. id:2,17. text:Vegetables,18. state:closed,19. children:20. id:21,21. text:tomato22. ,23. id:22,24. text:carrot25. ,26. id:23,27. text:cabbage28. ,29. id:24,30. text:potato31. ,32. id:25,33. text:lettuce34. 35. 36. 参考代码:17/tree03.html效果如下图：树控件数据格式化每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，open 或 closed，默认：open。如果为closed的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数组声明了若干节点。 iconCls:节点前显示的图标。创建异步树形菜单树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回JSON数据来填充树并完成异步请求。树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为id，通过URL发送到服务器上面检索子节点。为了创建异步的树形菜单，每一个树节点必须要有一个id属性，这个将提交回服务器去检索子节点数据。HTML代码：复制1. 2.3. 4. $(function() 5. $(#tt).tree(6. url:具体的地址 7. );8. );9. tree需要的json格式的字符串必须使用双引号。如果换成单引号是不能正常显示的。Tree常用属性属性名属性值类型描述默认值urlstring检索远程数据的URL地址。nullmethodstring检索数据的HTTP方法。（POST / GET）postanimateboolean定义节点在展开或折叠的时候是否显示动画效果。falsecheckboxboolean定义是否在每一个借点之前都显示复选框。falsecascadeCheckboolean定义是否层叠选中状态。trueonlyLeafCheckboolean定义是否只在末级节点之前显示复选框。falselinesboolean定义是否显示树控件上的虚线。falsedndboolean定义是否启用拖拽功能。falseformatterfunction(node)定义如何渲染节点的文本。falseloaderfunction(param,success,error)定义如何从远程服务器加载数据。json loaderloadFilterfunction(data,parent)返回过滤过的数据进行展示。案例：复制1. $(#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常用方法方法名方法参数描述optionsnone返回树控件属性。loadDatadata读取树控件数据。getNodetarget获取指定节点对象。getDatatarget获取指定节点数据，包含它的子节点。reloadtarget重新载入树控件数据。getRootnone获取根节点，返回节点对象。getRootsnone获取所有根节点，返回节点数组。getParenttarget获取父节点，target参数代表节点的DOM对象。getChildrentarget获取所有子节点，target参数代表节点的DOM对象。getCheckedstate获取所有选中的节点。getSelectednone获取选择节点并返回它，如果未选择则返回null。isLeaftarget判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。findid查找指定节点并返回节点对象。selecttarget选择一个节点，target参数表示节点的DOM对象。checktarget选中指定节点。unchecktarget取消选中指定节点。collapsetarget折叠一个节点，target参数表示节点的DOM对象。expandtarget展开一个节点，target参数表示节点的DOM对象。collapseAlltarget折叠所有节点。expandAlltarget展开所有节点。expandTotarget打开从根节点到指定节点之间的所有节点。scrollTotarget滚动到指定节点。appendparam追加若干子节点到一个父节点。toggletarget打开或关闭节点的触发器，target参数是一个节点DOM对象。insertparam在一个指定节点之前或之后插入节点。removetarget移除一个节点和它的子节点，target参数是该节点的DOM对象。poptarget移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。updateparam更新指定节点。enableDndnone启用拖拽功能。disableDndnone禁用拖拽功能。beginEdittarget开始编辑一个节点。endEdittarget结束编辑一个节点。cancelEdittarget取消编辑一个节点。Tree常用事件很多事件的回调函数都包含node参数，其具备如下属性： id：绑定节点的标识值。 text：显示的节点文本。 iconCls：显示的节点图标CSS类ID。 checked：该节点是否被选中。 state：节点状态，open 或 closed。 attributes：绑定该节点的自定义属性。 target：目标DOM对象。方法名方法参数描述onClicknode在用户点击一个节点的时候触发。onDblClicknode在用户双击一个节点的时候触发。onBeforeLoadnode，param在请求加载远程数据之前触发，返回false可以取消加载操作。onLoadSuccessnode,data在数据加载成功以后触发。onLoadErrorarguments在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的error回调函数的参数相同。onBeforeExpandnode在节点展开之前触发，返回false可以取消展开操作。onExpandnode在节点展开的时候触发。onBeforeCollapsenode在节点折叠之前触发，返回false可以取消折叠操作。onBeforeChecknode,checked在用户点击勾选复选框之前触发，返回false可以取消选择动作。onChecknode,checked在用户点击勾选复选框的时候触发。onBeforeSelectnode在用户选择一个节点之前触发，返回false可以取消选择动作。onSelectnode在用户选择节点的时候触发。onContextMenue,node在右键点击节点的时候触发。onBeforeDragnode在开始拖动节点之前触发，返回false可以拒绝拖动。onStartDragnode在开始拖动节点的时候触发。onStopDragnode在停止拖动节点的时候触发。onDragEntertarget, source在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。onDragOvertarget, source在拖动一个节点经过某个目标节点并释放的时候触发。onDragLeavetarget, source在拖动一个节点离开某个目标节点并释放的时候触发。onBeforeDroptarget, source, point在拖动一个节点之前触发，返回false可以拒绝拖动。onDroptarget, source, point当节点位置被拖动时触发。onBeforeEditnode在编辑节点之前触发。onAfterEditnode在编辑节点之后触发。onCancelEditnode在取消编辑操作的时候触发。代码如下：HTML代码：复制1. 2. 3. 4. 追加5. 移除6. 7.8. 9. 10. 11. 12. JS代码：复制1. 2. $(function() 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:./data/tree_data.json 20. );21. );22. 23. function getRoot()24. var root = $(#tt).tree(getRoot);25. alert(root.text);26. 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. function getCheck()38. var nodes = $(#tt).tree(getChecked);39. if(nodes = null)40. return;41. 42. for(var index = 0; index nodes.length;index+)43. alert(nodesindex.text);44. 45. 46. 47. function removeNode()48. var node = $(#tt).tree(find, 12);49. $(#tt).tree(remove,node.target);50. 51. 52. function appendNode()53. var parent = $(#tt).tree(find, 1);54. $(#tt).tree(append, 55. parent: parent.target,56. data: 57. id: 12,58. text: orange59. ,60. text: like,61. state: closed,62. children: 63. text: banana64. ,65. text: grape66. 67. 68. );69. 70. 参考代码:17/tree05.html效果如下图：树形菜单拖放控制当在一个应用中使用树（Tree）插件，拖拽（drag）和放置（drop）功能要求允许用户改变节点位置。启用拖拽（drag）和放置（drop）操作，所有您需要做的就是把树（Tree）插件的 dnd 属性设置为 true。复制1. $(#tt).tree(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: 8. id: source.id,9. parentId: parentId10. 11. );12. 综合应用Layout常用于布局，Tree常用于菜单，Tabs常用于具体内容的放置。如下图：代码如下：复制1. 2. 3. 4. 5. Li