功能树Ztree的使用

最新推荐文章于 2024-07-10 17:51:21 发布

清风荷影丶

最新推荐文章于 2024-07-10 17:51:21 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/r1799627886/article/details/51516332

版权

首先使用Ztree后前台页面展示出的效果

使用Ztree控件，首先第一步引入js和CSS

	<link type="text/css" rel="stylesheet" href="plugins/zTree/2.6/zTreeStyle.css"/>
	<script type="text/javascript" src="plugins/zTree/2.6/jquery.ztree-2.6.min.js"></script>

第二步，就是前台JS代码，前台代码主要是封装好的控件，将后台取得的数据基于控件和JS展示出来

                var zTree;
		$(document).ready(function(){
			var setting = {
			    showLine: true,
			    checkable: false
			};
			var zn = '${zTreeNodes}';
			var zTreeNodes = eval(zn);
			zTree = $("#leftTree").zTree(setting, zTreeNodes);
		});

Ztree主要的方法是.zTree（setting,zTreeNodes）

setting参数是样式和事件的方法，而zTreeNodes是JSON数组

JSONArray arr = JSONArray.fromObject(departmentService.listAllDepartment("0"));
			String json = arr.toString();
			json = json.replaceAll("DEPARTMENT_ID", "id").replaceAll("PARENT_ID", "pId").replaceAll("NAME", "name").replaceAll("subDepartment", "nodes").replaceAll("hasDepartment", "checked").replaceAll("treeurl", "url");
			model.addAttribute("zTreeNodes", json);
			mv.addObject("DEPARTMENT_ID",DEPARTMENT_ID);
			mv.addObject("pd", pd);	
			mv.setViewName("fhoa/department/department_ztree");

这是后台对前台传送的改造后的JSON数组

以上就是Ztree的三个中心部分