天天看点

【zTree】 zTree使用的 小例子

使用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页面:

【zTree】 zTree使用的 小例子
【zTree】 zTree使用的 小例子

View Code

JS代码:

【zTree】 zTree使用的 小例子
【zTree】 zTree使用的 小例子

如果想要更多的效果  例如节点上增删改等  按钮操作   更多的样式    更多的事件  就可以查看zTree的API 

界面效果:

【zTree】 zTree使用的 小例子

继续阅读