2.TreeController:调用TreeUtil实现数据获取

TreeController { Boolean selectable {get; set;} String selectNodeKeys {get; set;} TreeViewController(){ 8 selectable = false; 9 selectNodeKeys = 'No value selected'; 10 } String JsonData {get; set;} String getJsonString() { 15 if (JsonData == null){ 16 JsonData = TreeUtil.getTreeAndSubTrees(); 17 } 18 return JsonData; 19 } 20 21 }

3.TreeComponent:通过jquery的dyna tree 库实现树形结构实现

$(function(){ 14 15 $("#tree").dynatree({ 16 onActivate: function(node) { 17 18 }, 19 persist: false, 20 checkbox: {!selectable}, 21 generateIds: false, 22 classNames: { 23 checkbox: "dynatree-checkbox", 24 expanded: "dynatree-expanded" 25 }, 26 selectMode: 3, 27 children: {!JsonString}, 28 onSelect: function(select, node) { 29 var selKeys = $.map(node.tree.getSelectedNodes(), function(node){ 30 return node.data.key; 31 }); 32 jQuery(document.getElementById("{!$Component.selectedKeys}")).val(selKeys.join(", ")); 33 var selRootNodes = node.tree.getSelectedNodes(true); 34 var selRootKeys = $.map(selRootNodes, function(node){ 35 return node.data.key; 36 }); 37 }, 38 }); 39 });

4.TreeView.page:调用component实现显示

Value:

效果展示：

总结：实现树形结构可以有多种js库选择，后台大部分需要做的就是拼json串，通过指定的要求实现前台的展示，了解树形结构如何设计更加重要。本篇只是抛砖引玉，有对树形结构感兴趣的可以将此作为参考并进行优化。内容有错误的地方欢迎指出，篇中有不懂得欢迎留言。