zTree总结 - 图文 下载本文

a) 创建显示zTree的页面元素(div或ul) ,并设置元素属性id与class=”ztree”(class=”ztree”为zTree插件封装好的css样式,必须写,不可改)

b) 通过jquery页面加载模式来加载zTree

参数:

1.$(“#treeClass”):用于展现 zTree 的页面元素 2.setting:zTree 的配置数据 3.zNodes:zTree 的节点数据

c) zTee初始化方法参数详解

1. $(“#treeClass”):用于展现 zTree 的页面元素

2. setting:zTree 的配置数据

3.zNodes:zTree 的节点数据

二:java端

引入json-lib.jar包

a)创建实体类,实体类中的属性名称必须要与页面端zTree配置中的name、idKey与pIdKey的参数相匹配

b) 通过请求访问action,action访问service,service访问dao,之后返回List,将List转换成json数组,再将json数组转换成json字符串(http请求接收的是字符串),然后再将json字符串返回到jsp页面,确切的说是将json字符串返回到jsp页面中zNodes这一变量中,最后页面显示的树就是从数据库取得的动态树

三:效果展示

在节点前添加复选框只需要在setting里配置check,并配置enable:true参数即可

带有复选框树的效果展示

动态对zTree的增删改(增删改同时对页面和数据库)

通过zTree右键事件来操作对zTree的增删改 数据库zTree表的详细信息

一:页面端

引入相关的js和css样式

a)添加div treeClass来加载zTree,添加div menu,menu 里有四个文本框为id,pid,name,url,以及添加右键事件div rMenu,rMenu div包含一个ul li列表,ul li列表内容为:添加节点,删除节点,编辑节点,,并设置css样式将其div隐藏