zTree使用 bootstrap字体图标

楔子

学习笔记
ztree bootstrap 字体图标

demo

https://gitee.com/demo51/springboot-jsp/tree/v1.0

效果

在ztree展示的时候修改其 class

父节点在展开和折叠的时候，class也会变动，因此 展开和折叠也要变动

	<script type="text/javascript">
		function addDiyDom(treeId, treeNode) {
			var clasObj = $("#" + treeNode.tId + "_ico")
			clasObj.removeClass().addClass(treeNode.icon)
		}
		//双击后 图标又会变回去
		function zTreeOnDblClick(event, treeId, treeNode) {
			alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
		};

		function zTreeOnExpand(event, treeId, treeNode) {
			addDiyDom(treeId,treeNode)
		};

		function initZtree(tree, url) {
			$.ajax({
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url: url,
				//数据，json字符串 data : JSON.stringify(list),
				//请求成功
				success: function(result) {
					console.log(result);
					var setting = {
						data: {
							simpleData: {
								enable: true,
								//pIdKey: "pid", //java返回来的本来是pId，结果js接收到变成pid小写了|使用fastjson转换
							},
						},
						view: {
							addDiyDom: addDiyDom,
							onDblClick: zTreeOnDblClick
						},
						callback: {
							onExpand: zTreeOnExpand, //展开
							onCollapse: zTreeOnExpand, //折叠
						},
					};
					$.fn.zTree.init($("#" + tree), setting, result);
				},
				//请求失败，包含具体的错误信息
				error: function(e) {
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}

		$(document).ready(function() {
			// layer.alert('内容');
			layer.msg('hello');
			initZtree('treeDemo', "${proPath}/menu/all/");
			initZtree('treeDemo2', "${proPath}/menu/allnew/");
		});
	</script>

使用java8stream封装ztree的父子节点关系

ztree 不使用 简单数据模式，就需要封装数据为标准的JSON，里面包含
父子节点关系。使用java8stream可以更巧妙的封装这样的关系

使用java8stream封装父子节点关系，灵感来源于 `尚硅谷_谷粒商城`的例子

/**
 * 使用java8 stream封装父子节点 关系
 */
@SuppressWarnings("unchecked")
@RequestMapping("/java8stream")
@ResponseBody
public Object java8stream() {
	log.info("menu with java8stream");
	// 使用java8 stream 封装父子关系，来展示 ztree 标准JSON格式
	List<MenuStream> queryForList = jdbcTemplate.query("select id,pId ,name,url,icon from t_menu", new BeanPropertyRowMapper(MenuStream.class));

	// 获取取根节点
	List<MenuStream> collect = queryForList.stream().filter((menu) -> {
		return menu.getPid() == null;
	}).map((menu) -> {
		menu.setChildren(getChildren(menu, queryForList));
		return menu;
	}).sorted((m1, m2) -> {
		return m1.getId() - m2.getId();
	}).collect(Collectors.toList());

	System.out.println();
	System.out.println(collect);
	return collect;
}

/**
 * 查找所有节点子节点
 * 
 * @param root
 * @param all
 * @return
 */
private List<MenuStream> getChildren(MenuStream root, List<MenuStream> all) {

	List<MenuStream> collect = all.stream().filter(menu -> {
		// 根据父节点查找子节点
		return menu.getPid() == root.getId();
	}).map(menuStream -> {
		// 递归设置 子节点
		List<MenuStream> children = getChildren(menuStream, all);
		if (children != null && !children.isEmpty()) {
			menuStream.setChildren(children);
		}
		return menuStream;
	}).collect(Collectors.toList());
	return collect;
}

字段为空不显示children

使用注解结局children为空不放回

@JsonInclude(JsonInclude.Include.NON_EMPTY) // 设置不为空的时候返回
private List<MenuStream> children;