基于bootstrap-tree实现菜单树

关于oracle递归函数

select * from portal_system_menu_tree_view
start with parent_menu_id is null
connect by prior menu_id = parent_menu_id;
查询结果为

总结：
1）start with 子句为可选项，用来标识哪个节点作为查找树型结构的根节点。若该子句被省略，则表示所有满足查询条件的行作为根节点。
2）prior 关键字：网上说的基本都是错的，prior的使用关键在于修饰的字段，和prior在等号的左边或右边没有关系，prior menu_id = parent_menu_id和 parent_menu_id = prior menu_id结果是一样的。
3）prior字面意思表示上一条记录，prior menu_id = parent_menu_id表示上一条记录的menu_id 等于这条记录的parent_menu_id；

封装查询结果返回前端页面

将查询出来的数据封装为List nodes，然后通过ajax返回前端json形式的字符串；

前端组装成需要的代码格式

前端菜单树我使用的是bootstrap-tree组件实现。首先是引用：

<link rel="stylesheet" href="${basePath }static_resources/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${basePath }static_resources/js/bootstrap/css/bootstrap-treeview.css">

然后是：

<script src="${basePath }static_resources/js/bootstrap/js/jquery-1.11.3.min.js"></script>
<script src='${basePath }static_resources/js/bootstrap/js/bootstrap.min.js'></script>
<script src='${basePath }static_resources/js/bootstrap/js/bootstrap-treeview.js'></script>
<script type="text/javascript">
var roleId = "${USER.roleId}";
// 角色ID查询树形菜单列表
$.post("${basePath}widgetmanage/systemMenuTree.action?method=selectSystemMenuTreeViewListByRoleId&subjectId=90",
	{roleId : roleId}, function(nodes) {
	function totree(nodes){
	// 删除 所有子nodes,以防止多次调用
        	nodes.forEach(function (item) {
           		delete item.nodes;
     		 });
     		 // 将数据存储为 以 id 为 KEY 的 map 索引数据列
      		var map = {};
       		nodes.forEach(function (item) {
            		map[item.id] = item;
        	});
        	var val = [];
        	nodes.forEach(function (item) {
        		// 以当前遍历项，的pid,去map对象中找到索引的id
            		var parent = map[item.parentId];
            		if (parent) {
				(parent.nodes || ( parent.nodes = [] )).push(item);
            		} else {
                		//如果没有在map中找到对应的索引ID,那么直接把
                		//当前的item添加到 val结果集中，作为顶级
                		val.push(item);
            		}
        	});
        	return val;
	}
	console.log(totree(nodes));
						
	$('#tree').treeview({
       		data: totree(nodes),//节点数据
        	showBorder:false,//不显示边框
        	enableLinks: true, //是否将节点文本呈现为超链接。
        				//前提是在每个节点基础上，必须在数据结构中提供href值。
         	selectable: true, //标记节点是否可以选择。
         				//false表示节点应该作为扩展标题，不会触发选择事件。
        	showIcon: true, //是否显示节点图标
    	});
}
</script>

此时就实现了菜单树功能！