使用bootstrap-treeview 插件实现树状结构数据展示

这几天在上网找了bootstrap treeview例子，但是看别人写的demo都是模棱两可,感觉无从下手。因为项目的需要，索性自己也写个。

架构用  ssm+bootstrap

1、底层

1.1、数据库结构，dept部门表结构。

部门表有 id、name、父类id、排序等字段

1.2 mybatis 中的查询语句。

 <!-- 查询部门信息 getDeptTreeList -->
  <select id="getDeptTreeList"  resultType="java.util.HashMap">
    select departmentId as "id",departmentName as "text",parent_id as "parentid"  from sys_dept
  </select>

 注意： 返回的是个hashMap。并且departmentId和departmentName以及parent_id三个字段都使用了treeview需要的别名 。

 2、service业务逻辑层处理。

//查询部门信息 treeview展示
	@Override
	public ArrayList<Map<Object, Object>> getDeptTreeList() {
		// 取出数据
		List<HashMap<Object, Object>> resultMap = sysDeptMapper.getDeptTreeList();
		System.out.println("结果MAP:" + resultMap);
		
		// 定义一个Map集合 存储按指定顺序排列好的菜单
		Map<String, List<Map<Object, Object>>> temp = new HashMap<String, List<Map<Object, Object>>>();
		
		for (HashMap<Object, Object> map : resultMap) {
			// 如果temp的键包含这个parentid
			if (temp.containsKey(map.get("parentid").toString())) {
				// 么把所有相同parentid的数据全部添加到该parentid键下
				temp.get(map.get("parentid").toString()).add(map);
			} else {
				// 初始化temp
				List<Map<Object, Object>> list = new ArrayList<Map<Object, Object>>();
				list.add(map);
				temp.put(map.get("parentid").toString(), list);
			}
		}

		
		// 定义一个完整菜单列表
		ArrayList<Map<Object, Object>> array = new ArrayList<Map<Object, Object>>();

		for (HashMap<Object, Object> hashMap : resultMap) {
			// 如果temp中的键与当前id一致
			if (temp.containsKey(hashMap.get("id").toString())) {
				// 说明temp是当前id菜单的子菜单
				hashMap.put("nodes", temp.get(hashMap.get("id").toString()));
			}
			
			// 遇到顶级菜单就添加进完整菜单
			if (hashMap.get("parentid").toString().equals("0")) {
				array.add(hashMap);
			}
			
		}
		return array;
	}

3、controller 控制层

    //查询部门 tree树形展示
	@RequestMapping("/GetDeptTreeJson")
	@ResponseBody
	public ArrayList<Map<Object,Object>> GetDeptTreeJson() {
		ArrayList<Map<Object,Object>> dept = departmentService.getDeptTreeList();
		return dept;
	}

4、前台页面

4.1、引入相关js和css

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/dist/bootstrap-treeview.min.css">
<script type="text/javascript" src="bootstrap-devoops/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script rel="stylesheet" src="bootstrap/dist/bootstrap-treeview.js"></script>

 4.2、代码

<div id="tree" class="col-md-8 col-lg-3"     style="overflow:auto;display:block;height:900px;width: 400px">
</div>

<script>
    //页面初始化时，发送异步请求，获取tree数据
	var url = "${pageContext.request.contextPath}/department/GetDeptTreeJson.action";
	$.get(url, {}, function(data) {
		init(data);
	}, 'json')
	
	
	//加载tree数据
	var init = function(data) {
		return $("#tree").treeview({
			data : data,
			color:"#428bca",
			levels : 2,
			onNodeSelected : function(event, node) {
				console.log(node.id);
				
				var url = "/demo/user/yy";
				var id = node.departmentId;
				$.post(url, {
					"id" : id
				}, function(data) {
					$("#tbody").empty();
					userInfo(data);
				}, 'json')
			},
			onNodeUnselected:function(event,node){
				console.log("取消了");
			},

		});
	}
</script>

5、下面是treeview的展现部门列表效果

以上仅供参考！