- 准备工作
- ztree官网
- 点击右上角的GitHub或者码云的地址将demo下载到本地
- 在本地新建一个项目,将下载的文件中zTreeStyle.css,jquery-3.4.1.min.js,jquery.ztree.core.min.js放到项目中
- 静态树
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>demo</title> <meta name="content-type" content="text/html; charset=UTF-8"> <!-- ztree的css 必备 --> <link rel="stylesheet" th:href="@{/css/zTreeStyle.css}"> <!-- ztree提供的demo的css 可有可无 --> <link rel="stylesheet" th:href="@{/css/demo.css}"> <!-- jq 必备放在ztree的js前--> <script type="text/javascript" th:src=@{/js/jquery-3.4.1.min.js}></script> <!-- ztree的js 必备 --> <script type="text/javascript" th:src=@{/js/jquery.ztree.core.min.js}></script> </head> <body> <script type="text/javascript"> //配置 var setting = { }; //节点 var zNodes = [ { //节点名 name : "水果", //是否展开 open : false, //是否是父级 isParent : true, //子级 children : [ { name : "苹果", open : false, children : [ { name : "红富士", open : false } ] }, { name : "梨子", open : false, children : [ { name : "砀山梨", open : false } ] } ] } ]; //等待document对象加载完填充数据 $(document).ready(function() { //init方法(容器,zTree配置,zTree节点数据) $.fn.zTree.init($("#tree"), setting, zNodes) }); </script> <!-- 树 --> <ul id="tree" class="ztree" style="width: 260px;overflow: auto;"></ul> </body> </html>
- 效果图
- 效果图
- 动态树(从数据库取数据)
- 表设计,以省市地级城市举例(id:主键,name:城市名,pid:所属城市id)
- 回到ztree,在api中ztree提供了异步加载的方式
- 我们在setting中添加异步加载的配置
//异步加载 async : { //是否开启 enable : true, //数据类型 dataType : "json", //请求地址 url : "/city/treeList", //自动提交父节点属性的参数 autoParam:["id"] } - 我们在controller层返回json数据
-
写sql语句cityDao.xml
<mapper namespace="com.xbsoft.ztree.dao.CityDao"> <!-- 字段 --> <sql id="cityColumns"> a.id as "id", a.pid as "pid", a.name as "name" </sql> <!-- 查询所有 --> <select id="findList" resultType="com.xbsoft.ztree.entity.City"> select <include refid="cityColumns" /> from city a where pid=#{id} </select> <!-- 查询子节点个数 --> <select id="childCount" resultType="int"> SELECT IFNULL(COUNT( 1 ),0) FROM city WHERE pid =#{id} </select> </mapper>
-
写一个工具类 treeNode
public class TreeNode { /** * 节点id * */ private String id; /** * 节点名 * * */ private String name; /** * 节点父id */ private String pid; /** * 是否为父类 */ private boolean isParent; /** * 是否被选中 */ private boolean checked; /** *Getter和Setter方法省略 */ }
-
controller
@RequestMapping("treeList") @ResponseBody public String treeList(TreeNode treeNodeParent) { // 判断如果id为空 首次进入赋值0 if (treeNodeParent.getId() == null) { treeNodeParent.setId("0"); } // 用于保存节点对象 List<TreeNode> list = new ArrayList<TreeNode>(); // 从数据库查询所有返回city对象集合 List<City> cityList = cityService.findList(treeNodeParent); // 遍历逐个赋值 for (int i = 0; i < cityList.size(); i++) { TreeNode treeNode = new TreeNode(); treeNode.setId(cityList.get(i).getId()); treeNode.setName(cityList.get(i).getName()); treeNode.setPid(cityList.get(i).getPid()); // 判断是否有子节点 treeNode.setIsParent(cityService.childCount(treeNode) > 0 ? true : false); list.add(treeNode); } // 使用json工具转换为json字符串这里使用的是json-lib也可以使用alibaba的fastJson return JSONArray.fromObject(list).toString(); }
-
写完以后我们看结果
-
在此基础上我们添加复选框 引入复选框的js
jquery.ztree.excheck.min.js -
在setting中添加check:{enable:true} 即可
-
如何获取选中的节点的信息: 在setting 中添加回调事件callback:{onCheck:oncheck}
-
写个函数onCheck
function onCheck(e, treeId, treeNode) { //获得树对象 var treeObj = $.fn.zTree.getZTreeObj("tree"); //获得被选中的节点 nodes = treeObj.getCheckedNodes(true); //用于存放节点id var l = ""; //遍历节点 for (var i = 0; i < nodes.length; i++) { //拼接节点id用,分割 l = nodes[i].id + "," + l } //输出在控制台 console.log(l); //获取选中节点的值 }
以上就是zTree的入门 上述所有代码可在我的GitHub上下载GitHub地址
-
- 表设计,以省市地级城市举例(id:主键,name:城市名,pid:所属城市id)
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|