Bootstrap Tree View，简单而优雅的树结构组件

原创

沉默王二 2021-07-11 16:18:32 ©著作权

©著作权归作者所有：来自51CTO博客作者沉默王二的原创作品，请联系作者获取转载授权，否则将追究法律责任

A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.

这是Bootstrap Tree View在git上的简介。
注意simple、elegant，简单而优雅，我喜欢这两个词。
那么今天的实例是通过Bootstrap Tree View来制作一款省市级菜单的应用。

###一、效果图
Bootstrap Tree View，简单而优雅的树结构组件_Bootstrap

###二、应用
####①、首先，项目需要引入bootstrap.css、jquery.js、bootstrap-treeview.js

<link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="${ctx}/components/jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="${ctx}/components/treeview/js/bootstrap-treeview.js"></script>

####②、接下来，页面上需要放一个dom元素。

<div id="procitytree" style="height: 400px;overflow-y :scroll;"></div>

通过设置height和overflow-y，使treeview能够在垂直方向上出现滚动条。

####③、由于省市级数据一般都是固定不变的，那么页面初次加载时，我们把省市级数据先拿到。

Java端非常简单：

@RequestMapping(value = "loadProcitysInfo")
public void loadProcitysInfo(HttpServletResponse response) {
	logger.debug("获取所有省市");
	try {
		List<Provincial> provincials = provincialService.getProvincials();
		for (Provincial provincial : provincials) {
			List<City> citys = cityService.getCitysByProvincialId(provincial.getId());
			provincial.setCitys(citys);
		}
		renderJsonDone(response, provincials);
	
	} catch (Exception e) {
		logger.error(e.getMessage(), e);
		logger.error(e.getMessage());
		renderJsonError(response, Constants.SERVER_ERROR);
	}
}

这段代码需要优化，通过mybatis其实可以一次就获得省级和市级的集合。
获取数据后，通过json写入到response中。

protected void renderJsonDone(HttpServletResponse response, final Object value) {
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("statusCode", 200);
	map.put("result", value);
	String jsonText = JSON.toJSONString(map);

	PrintWriter writer = null;
	try {
		response.setHeader("Pragma", "no-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
	
		response.setContentType(contentType);
		writer = response.getWriter();
		writer.write(jsonText);
		writer.flush();
	} catch (IOException e) {
		throw new OrderException(e.getMessage());
	} finally {
		if (writer != null)
			writer.close();
	}
}

前端通过ajax对数据进行组装保存。

jQuery.ajax({
	url : common.ctx + "/procity/loadProcitysInfo", // 请求的URL
	dataType : 'json',
	async : false,
	timeout : 50000,
	cache : false,
	success : function(response) {
		var json = YUNM.jsonEval(response);

		if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
			var records = json[YUNM.keys.result];
			if (!json)
				return;

			// 城市列表都存在
			if (records != null && records.length > 0) {
				// 遍历子节点
				$.each(records, function(index, value) {
					var proNode = {};
					// text是显示的内容
					proNode["text"] = value.proname;
					proNode["id"] = value.id;
					proNode["procode"] = value.procode;
					// 节点不可选中
					proNode["selectable"] = false;
					// 初始化市级节点
					proNode["nodes"] = [];

					$.each(value.citys, function(index, value) {
						var cityNode = {};
						cityNode["text"] = value.cname;
						cityNode["id"] = value.id;
						cityNode["proid"] = value.proid;
						cityNode["code"] = value.code;
						// 节点不可选中
						cityNode["selectable"] = false;

						proNode["nodes"].push(cityNode);
					});
					// 保存页面端对象中
					//YUNM._set.procityTreeData的数据结构就是二维数组。
					YUNM._set.procityTreeData.push(proNode);
				});
			}
		}
	}
});

####④、拿到数据之后，就可以对treeview进行初始化了。

这里，我们讲一点更复杂的应用，如下图。
Bootstrap Tree View，简单而优雅的树结构组件_Bootstrap

如果用户已经保存过一部分节点，那么初次展示的时候就需要通过treeview展示出来了。
我们定一些规则：

节点全部选中时color为red，check框选中。
节点未全部选中时color为red，check框未选中。
节点一个也没选中时color为默认，check框未选中。

为此，我们需要增加一点css。

/* 树形省市 */
.treeview .list-group-item.node-checked {
	color: red;
}
.treeview .list-group-item.node-selected {
	color: red;
}

有了这个规则，我们在初次展开treeview的时候，就需要重新制定以下数据规则。

// 省市级数据
var procityTreeData = YUNM._set.procityTreeData;
// 用户已经选中的城市，比如河南洛阳。
var init_code = $this.next("input[name=area]").val();

// 如果用户有选中项，则对选中项进行规则展示
if (init_code) {
	// 初始化选中项目
	$.each(procityTreeData, function(index, value) {
		// 通过i和省级的节点length进行对比，判断是否全选、未全选、全未选三种状态
		var i = 0;
		$.each(value.nodes, function(index1, value1) {
			if (init_code.indexOf(value1.code) != -1) {
				// 选中时先初始化state，再把state.checked设为true
				value1["state"] = {};
				value1["state"]["checked"] = true;
				i++;
			} else {
				// 否则重置state，保证procityTreeData数据的不被更改
				// 这个地方其实有待优化，由于js我还不算精通，所以不知道怎么把数组复制到一个新数组里，保证原始属于不被更改
				value1["state"] = {};
			}
		});
		
		value["state"] = {};
		// 市级节点有选中，那么省级节点的状态需要变化，根据上面制定的规则来
		if (i > 0) {
			// 市级全选，那么此时省级节点打钩
			if (value.nodes.length == i) {
				value["state"]["checked"] = true;
			}
			// 根据selected来设定颜色
			value["state"]["selected"] = true;
		} else {
			value["state"]["selected"] = false;
		}
	});
}

让treeview和我们打个招呼吧！

$("#procitytree").treeview({
	data : procityTreeData,// 赋值
	highlightSelected : false,// 选中项不高亮，避免和上述制定的颜色变化规则冲突
	multiSelect : false,// 不允许多选，因为我们要通过check框来控制
	showCheckbox : true,// 展示checkbox
	}).treeview('collapseAll', {// 节点展开
	silent : true
});

####⑤、节点onNodeChecked、onNodeUnchecked的应用
不要⑤就够了吗？
不够，我们还要控制节点选择框的变化。
就像效果图中那样。
Bootstrap Tree View，简单而优雅的树结构组件_Bootstrap_02

onNodeChecked : function(event, node) {
	YUNM.debug("选中项目为：" + node);
	
	// 省级节点被选中，那么市级节点都要选中
	if (node.nodes != null) {
		$.each(node.nodes, function(index, value) {
			$this.treeview('checkNode', value.nodeId, {
				silent : true
			});
		});
	} else {
		// 市级节点选中的时候，要根据情况判断父节点是否要全部选中

		// 父节点
		var parentNode = $this.treeview('getParent', node.nodeId);

		var isAllchecked = true; // 是否全部选中

		// 当前市级节点的所有兄弟节点，也就是获取省下面的所有市
		var siblings = $this.treeview('getSiblings', node.nodeId);
		for ( var i in siblings) {
			// 有一个没选中，则不是全选
			if (!siblings[i].state.checked) {
				isAllchecked = false;
				break;
			}
		}

		// 全选，则打钩
		if (isAllchecked) {
			$this.treeview('checkNode', parentNode.nodeId, {
				silent : true
			});
		} else {// 非全选，则变红
			$this.treeview('selectNode', parentNode.nodeId, {
				silent : true
			});
		}
	}
},
onNodeUnchecked : function(event, node) {
	YUNM.debug("取消选中项目为：" + node);

	// 选中的是省级节点
	if (node.nodes != null) {
		// 这里需要控制，判断是否是因为市级节点引起的父节点被取消选中
		// 如果是，则只管取消父节点就行了
		// 如果不是，则子节点需要被取消选中
		if (silentByChild) {
			$.each(node.nodes, function(index, value) {
				$this.treeview('uncheckNode', value.nodeId, {
					silent : true
				});
			});
		}
	} else {
		// 市级节点被取消选中

		var parentNode = $this.treeview('getParent', node.nodeId);

		var isAllUnchecked = true; // 是否全部取消选中

		// 市级节点有一个选中，那么就不是全部取消选中
		var siblings = $this.treeview('getSiblings', node.nodeId);
		for ( var i in siblings) {
			if (siblings[i].state.checked) {
				isAllUnchecked = false;
				break;
			}
		}

		// 全部取消选中，那么省级节点恢复到默认状态
		if (isAllUnchecked) {
			$this.treeview('unselectNode', parentNode.nodeId, {
				silent : true,
			});
			$this.treeview('uncheckNode', parentNode.nodeId, {
				silent : true,
			});
		} else {
			silentByChild = false;
			$this.treeview('selectNode', parentNode.nodeId, {
				silent : true,
			});
			$this.treeview('uncheckNode', parentNode.nodeId, {
				silent : true,
			});
		}
	}
	silentByChild = true;
},

到这里，treeview的应用已经算是非常全面了，我想你一定也会应用了，不会的话，再来找我啊！

Bootstrap Tree View，简单而优雅的树结构组件_Bootstrap_09