森林的两种遍历方法
前序(先根)遍历森林
- 找到森林中的所有的根结点。
- 前序遍历森林中的每个根节点对应的树。
后序(后根)遍历森林
- 找到森林中的所有的根结点。
- 后序遍历森林中的每个根节点对应的树。
树的两种遍历方法
前序(先根)遍历树
- 访问树的根结点。
- 找到根节点的所有子节点。
- 前序遍历每个子节点。
后序(后根)遍历树
- 找到根节点的所有子节点。
- 后续序遍历每个子节点。
- 访问树的根结点。
企业应用场景 之 前序遍历
效果图
代码示例
1 /// <reference path="Ext/ext-all-debug-w-comments.js" /> 2 3 function arrayToTree(arr, isRoot, isChild, mapper) { 4 var roots = Ext.Array.filter(arr, isRoot); 5 roots = Ext.Array.map(roots, mapper); 6 7 //遍历森林 8 Ext.Array.each(roots, function (root) { 9 buildTree(arr, root, isChild, mapper); 10 }); 11 12 return roots; 13 } 14 15 function buildTree(arr, item, isChild, mapper) { 16 //先访问根节点 17 item.children = getChildren(arr, item, isChild, mapper); 18 19 //后访问子节点 20 Ext.Array.each(item.children, function (child) { 21 buildTree(arr, child, isChild, mapper); 22 }); 23 } 24 25 function getChildren(arr, parent, isChild, mapper) { 26 var children = Ext.Array.filter(arr, function (item) { 27 return isChild(parent, item); 28 }); 29 30 return Ext.Array.map(children, mapper); 31 } 32 33 function arrayToTreeString(arr, isRoot, isChild) { 34 var roots = Ext.Array.filter(arr, isRoot); 35 36 var treeString = ''; 37 38 //遍历森林 39 Ext.Array.each(roots, function (root) { 40 treeString += buildTreeString(arr, root, isChild, 0); 41 }); 42 43 return treeString; 44 } 45 46 function buildTreeString(arr, item, isChild, level) { 47 var treeString = ''; 48 49 //先访问根节点 50 treeString += Ext.String.repeat('-', (level + 1) * 5) + '| ' + item.title + '<br/><br/>'; 51 52 //后访问子节点 53 var children = getChildren(arr, item, isChild, function (child) { 54 return child; 55 }); 56 Ext.Array.each(children, function (child) { 57 treeString += buildTreeString(arr, child, isChild, level + 1); 58 }); 59 60 return treeString; 61 } 62 63 Ext.onReady(function () { 64 var arr = [ 65 { id: '100', title: '编辑', parent: '000' }, 66 { id: '110', title: '复制', parent: '100' }, 67 { id: '120', title: '查找与替换', parent: '100' }, 68 { id: '121', title: '快速查找', parent: '120' }, 69 { id: '122', title: '快速替换', parent: '120' }, 70 { id: '130', title: '撤销', parent: '100' }, 71 { id: '140', title: '重做', parent: '100' }, 72 ]; 73 74 var tree = arrayToTree(arr, function (item) { 75 return item.parent === '000'; 76 }, function (parent, item) { 77 return item.parent === parent.id; 78 }, function (item) { 79 return { id: item.id, text: item.title, parent: item.parent, expanded: true }; 80 }); 81 82 var treeString = arrayToTreeString(arr, function (item) { 83 return item.parent === '000'; 84 }, function (parent, item) { 85 return item.parent === parent.id; 86 }); 87 88 Ext.create('Ext.container.Viewport', { 89 layout: { 90 type: 'vbox', 91 align: 'stretch' 92 }, 93 padding: 10, 94 items: [{ 95 xtype: 'treepanel', 96 title: '表格到树', 97 frame: true, 98 flex: 1, 99 root: { 100 text: '菜单', 101 expanded: true, 102 children: tree 103 } 104 }, { 105 xtype: 'panel', 106 title: '表格到下拉框', 107 frame: true, 108 flex: 1, 109 html: treeString 110 }] 111 }); 112 });
备注
面对大数据量的森林,上面的遍历算法有很大的缺陷(速度太慢),因此要从数据存储结构上下工夫,进而优化遍历算法。