使用zTree树不是第一次了 但是 还是翻阅着之前做的 对照着 使用起来比较方便 这里就把小例子列出来 总结一下使用步骤 这样方便下次使用起来方便一点
使用zTree树的步骤:
1.首先 在jsp中引用zTree相关的 CSS文件和JS文件
2.其次 在jsp中设置zTree的容器,一般一个<ul id="treeDemo" class="ztree" style="display:none;"></ul>就足够了 但是必须要设置id,是为了后续的方便使用
3.再者 在js中 配置zTree的setting 配置信息
4.如果数据是动态的 则将动态获取到的数据 动态组成ztree的节点
5.初始化 zTree树
JSP页面:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-YWan5CO0M2Y3QjZyczMhlTNhV2YzkDOjNTZlRGMyM2YjljYl9CX3AzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL2M3Lc9CX6MHc0RHaiojIsJye.gif)
View Code
JS代码:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-YWan5CO0M2Y3QjZyczMhlTNhV2YzkDOjNTZlRGMyM2YjljYl9CX3AzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL2M3Lc9CX6MHc0RHaiojIsJye.gif)
如果想要更多的效果 例如节点上增删改等 按钮操作 更多的样式 更多的事件 就可以查看zTree的API
界面效果: