利用多叉树实现ext js中的无限级树形菜单

《利用多叉树实现ext js中的无限级树形菜单》由会员分享，可在线阅读，更多相关《利用多叉树实现ext js中的无限级树形菜单（23页珍藏版）》请在金锄头文库上搜索。

1、利用多叉树实现利用多叉树实现 ExtExt JSJS 中的无限级树形菜单中的无限级树形菜单利用多叉树实现 Ext JS 中的无限级树形菜单（一种构建多级有序树形结构 JSON 的方法） 一、问题研究的背景和意义目前在 Web 应用程序开发领域，Ext JS 框架已经逐渐被广泛使用，它是富客户端开发中出类拔萃的框架之一。在 Ext 的 UI 控件中，树形控件无疑是最为常用的控件之一，它用来实现树形结构的菜单。TreeNode 用来实现静态的树形菜单，AsyncTreeNode 用来实现动态的异步加载树形菜单，后者最为常用，它通过接收服务器端返回来的 JSON 格式的数据，动态生成树形菜单节点。动

2、态生成树有两种思路：一种是一次性生成全部树节点，另一种是逐级加载树节点（利用 AJAX，每次点击节点时查询下一级节点） 。对于大数据量的菜单节点来说，逐级加载是比较合适的选择，但是对于小数据量的菜单来说，一次性生成全部节点应该是最为合理的方案。在实际应用开发中，一般不会遇到特别大数据量的场景，所以一次性生成全部菜单节点是我们重点研究的技术点，本文就是介绍基于 Ext JS 的应用系统中如何将数据库中的无限级层次数据一次性在界面中生成全部菜单节点（例如在界面中以树形方式一次性展示出银行所有分支机构的信息） ，同时对每一个层次的菜单节点按照某一属性和规则排序，展示出有序的菜单树。解决 Ext JS

3、 无限级树形菜单的问题，可以拓展出更多的应用场景，例如树形结构表格 TreeGrid，一次性生成树形表格，对树形表格进行完整分页，对表格列进行全排序；或者可以利用本文的思路扩展出其他的更复杂的应用场景。先看两个图例，有个直观上的认识：图一，银行分支机构树形结构菜单图二，树形结构表格二、详细设计方案让我们先看一段代码片段：文件一，branchTree.html （Ext 树形控件页面）Js 代码 1.Ext.onReady( 2. function() 3. var tree = new Ext.tree.TreePanel( 4. height: 300, 5. width: 400, 6.

4、animate:true, 7. enableDD:true, 8. containerScroll: true, 9. rootVisible: false, 10. frame: true, 11. / getBranch.do 请求服务器返回多级树形结构的 JSON字符串 12. loader: new Ext.tree.TreeLoader(dataUrl:getBranch.do), 13. root : new Ext.tree.AsyncTreeNode(id:0,text:根结点) 14. ); 15. tree.expandAll(); 16. 17.); 文件二，branc

5、hTreeJSON.jsp （接收 getBranch.do 请求，返回无限级 JSON 字符串）Java 代码 1. 7. 8. 9. 以上两个程序文件是一次性生成无限级树形菜单所必须的，其中最为关键的部分就是如何生成一个无限级的 JSON 字符串，返回给客户端的 Ext 树形控件。对于银行分支机构来说，需要返回类似如下的JSON 串：Js 代码 1. 2. id: 100000, 3. text: 廊坊银行总行, 4. children: 5. 6. id: 110000, 7. text: 廊坊分行, 8. children: 9. 10. id: 113000, 11. text: 廊

6、坊银行开发区支行, 12. leaf: true 13. , 14. 15. id: 112000, 16. text: 廊坊银行解放道支行, 17. children: 18. 19. id: 112200, 20. text: 廊坊银行三大街支行, 21. leaf: true 22. , 23. 24. id: 112100, 25. text: 廊坊银行广阳道支行, 26. leaf: true 27. 28. 29. , 30. 31. id: 111000, 32. text: 廊坊银行金光道支行, 33. leaf: true 34. 35. 36. 37. 38. 同时还可能需

7、要对树中每一个层次的节点按照某一属性（比如分支机构编号）进行排序，以展示出有序的树形菜单。现在可以把问题概括为：1、 把数据库中的层次数据转换成 JSON 格式的字符串2、 对树中每一个层次的节点按照某一属性（比如分支机构编号）进行排序下面介绍解决问题的思路：在数据结构这门课中，我们都学过树，无限级树形菜单就可以抽象成一种多叉树结构，即每个节点下包含多个子节点的树形结构，首先就需要把数据库中的层次数据转换成多叉树结构的对象树，也就是构造出一棵多叉树。有了数据结构，还要实现相应的算法，我们需要实现两种算法：1、兄弟节点横向排序算法，对隶属于同一个父节点下面的所有直接子节点按照某一节点属性和规则进

8、行排序，保持兄弟节点横向有序；2、先序遍历算法，递归打印出无限级 JSON 字符串。概括起来分为三步：1、 构造无序的多叉树结构2、 实现兄弟节点横向排序方法3、 实现先序遍历方法，打印出 JSON 字符串如图所示：三、源代码实现（Java 语言版）实现这样一颗树，需要设计三个类：树类（MultipleTree.java） 、节点类（Node.java） 、孩子列表类（Children.java） ；为了方便演示，还需要构造一些假的层次数据，因此还需要建一个构造假数据的类（VirtualDataGenerator.java） ，以下代码拷贝出来之后可直接运行测试：Java 代码 1.packa

9、ge test; 2. 3.import java.util.ArrayList; 4.import java.util.Comparator; 5.import java.util.HashMap; 6.import java.util.Iterator; 7.import java.util.List; 8.import java.util.Map; 9.import java.util.Set; 10.import java.util.Collections; 11. 12./* 13. * 多叉树类 14.*/ 15.public class MultipleTree 16. publ

10、ic static void main(String args) 17. / 读取层次数据结果集列表 18. List dataList = VirtualDataGenerator.getVirtualResult(); 19. 20. / 节点列表（散列表，用于临时存储节点对象） 21. HashMap nodeList = new HashMap(); 22. / 根节点 23. Node root = null; 24. / 根据结果集构造节点列表（存入散列表） 25. for (Iterator it = dataList.iterator(); it.hasNext();) 26.

11、 Map dataRecord = (Map) it.next(); 27. Node node = new Node(); 28. node.id = (String) dataRecord.get(“id“); 29. node.text = (String) dataRecord.get(“text“); 30. node.parentId = (String) dataRecord.get(“parentId“); 31. nodeList.put(node.id, node); 32. 33. / 构造无序的多叉树 34. Set entrySet = nodeList.entryS

12、et(); 35. for (Iterator it = entrySet.iterator(); it.hasNext();) 36. Node node = (Node) (Map.Entry) it.next().getValue(); 37. if (node.parentId = null | node.parentId.equals(“) 38. root = node; 39. else 40. (Node) nodeList.get(node.parentId).addChild(node); 41. 42. 43. / 输出无序的树形菜单的 JSON 字符串 44. Syst

13、em.out.println(root.toString(); 45. / 对多叉树进行横向排序 46. root.sortChildren(); 47. / 输出有序的树形菜单的 JSON 字符串 48. System.out.println(root.toString(); 49. 50. / 程序输出结果如下（无序的树形菜单） （格式化后的结果）：51. / 52. / id : 100000, 53. / text : 廊坊银行总行, 54. / children : 55. / 56. / id : 110000, 57. / text : 廊坊分行, 58. / children : 59. / 60. / id : 113000, 61. / text : 廊坊银行开发区支行, 62. / leaf : true 63. / , 64. / 65. / id : 111000, 66. / text : 廊坊银行金光道支行, 67. / leaf : true 68. / , 69. / 70.