bootstrap-treeview 的使用

首先，看看效果

 简要介绍：bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。（百度的）

使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。

<link href="./css/bootstrap.css" rel="stylesheet">

<script src="./js/jquery.js">script>

<script src="./js/bootstrap-treeview.js">script> 

资源路径：https://download.csdn.net/download/qq_25221835/10885922

 

高手话不多，直接贴代码，一个小事例、

首先看效果：以下有两层节点，其中“主题库名称”为父节点

首先看前台代码：

$.getJSON("${ctx}/dvs/rule/bootstrapTreeData",function(data){
		$('#jstree').treeview({
			data: data,
			levels: 5,
			onNodeSelected: function(event, treeNode) {
				console.log(treeNode)
				if(treeNode.level == 1){// level=1 代表父类
					$("#themeName").val(treeNode.themeName);
				}else{
					$("#themeName").val(treeNode.themeName);
				}	
				$('#ruleTable').bootstrapTable('refresh');
			},
		});
	});

api介绍：

data:后台返回的数据

levels：节点的级别

onNodeSelected：节点的绑定事件

treeNode：点击的那一个节点的数据

等下展示 data的数据格式，你们就知道了。

 controller代码：mapList是最终返回的数据,用法就是创一个map（父），并设置其id 键，name 键 是页面显示的效果，如果你要传值到后台，你可以建立其他的键值对，然后再创建一个 名字自取的map List，我取名 为 “arra”这个list中的所有 map的 parentId键 的值都设置成map（父）的 id 键的值 ，再将 此 “arra” 存入到 map（父）的children 键中，最后将map(父)添加到mapList中，返回最终的mapList即可。

 

        @ResponseBody
	@RequiresPermissions("user")
	@RequestMapping(value = "bootstrapTreeData")
	public List<Map<String, Object>> bootstrapTreeData（HttpServletResponse response) {

		List<Map<String, Object>> mapList = Lists.newArrayList();
		List<ThemeModelDto> themes = ruleService.selectAllTheme();
		Map<String, Object> map = Maps.newHashMap(); // 这是 父 map,里面的 children key 存储的是 它的子
		// lever = 1 是 父
		map.put("themeName", "");
		map.put("name", "主题库名称");
		map.put("level", 1);
		map.put("id", "0");
		List<Map<String, Object>> arra = Lists.newArrayList();
		for (ThemeModelDto theme : themes) {
			Map<String, Object> childMap = Maps.newHashMap();
			childMap.put("id", UUID.randomUUID());
			childMap.put("themeName", theme.getCode());
			childMap.put("name", theme.getName());
			childMap.put("parentId", map.get("id"));
			arra.add(childMap);
		}
		map.put("children", arra);
		mapList.add(map);
		return mapList;
	}

 回到之前，一起看看 data的数据格式：    alert(JSON.stringify(data))

[{
	"themeName": "",
	"level": 1,
	"children": [{
		"themeName": "EMR",
		"name": "电子病历",
		"id": "7a60abcf-8678-4ca4-9f21-8d11c7b1e052",
		"parentId": "0"
	}, {
		"themeName": "HEALTH_BASIC",
		"name": "基本医疗",
		"id": "b9619bad-63c6-4752-bb8e-126828814a8a",
		"parentId": "0"
	}, {
		"themeName": "EHR",
		"name": "健康档案",
		"id": "e9898a6b-1a14-450a-b3bc-67987da3a1f8",
		"parentId": "0"
	}, {
		"themeName": "PUB",
		"name": "公共资源",
		"id": "61bd4aae-cc16-45fe-be6f-e01414afa7ef",
		"parentId": "0"
	}],
	"name": "主题库名称",
	"id": "0"
}]

看到数据，大家就应该懂怎么用了吧。

以上是最简单的用法，可能大家会进行扩展：

比如:怎么设置初始化时，就选中某一个节点，亦或是 如果有多层节点怎么办

首先：我找了一下网上的api：

话不多说，直接贴代码：为了演示，我设置了一个 常量 i ，当循环第二次时，设置了一个state 键给childMap，值为 一个check

                int i=0;
		for (ThemeModelDto theme : themes) {
			Map<String, Object> childMap = Maps.newHashMap();
			childMap.put("id", UUID.randomUUID());
			childMap.put("themeName", theme.getCode());
			childMap.put("name", theme.getName());
			childMap.put("parentId", map.get("id"));
			arra.add(childMap);
			i++;
			if(i==2) {
				Map<String, Object> check = Maps.newHashMap();
				check.put("selected", true);//说明是修改执行计划
			    childMap.put("state",check);
			}
		}

data：仔细看和之前的不同

[{
	"themeName": "",
	"level": 1,
	"children": [{
		"themeName": "EMR",
		"name": "电子病历",
		"id": "dabf6eb4-a43a-4fcb-a2f0-598e93a4daf2",
		"parentId": "0"
	}, {
		"themeName": "HEALTH_BASIC",
		"name": "基本医疗",
		"id": "a201ef30-221f-4123-8ffd-88ddd0ef4afa",
		"state": {
			"selected": true
		},
		"parentId": "0"
	}, {
		"themeName": "EHR",
		"name": "健康档案",
		"id": "afd99930-2aa8-4879-9f21-7c29d43d47ed",
		"parentId": "0"
	}, {
		"themeName": "PUB",
		"name": "公共资源",
		"id": "1aecff0f-b67f-4e95-bde7-2f9ef70cb28a",
		"parentId": "0"
	}],
	"name": "主题库名称",
	"id": "0"
}]

效果：

 多层节点的要用到递归，大家自己可以去拓展