功能树Ztree的使用

来源：互联网发布：c语言绚丽表白代码编辑：程序博客网时间：2024/05/01 16:27

首先使用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的三个中心部分

0 0