ztree的介绍：
1、ztree 是利用 jquery 的核心代码，实现一套能完成大部分常用功能的 tree 插件
2、ztree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
3、采用了 延迟加载 技术，上万节点轻松加载，即使在 ie6 下也能基本做到秒杀
4、兼容 ie、firefox、chrome、opera、safari 等浏览器
5、支持 json 数据
6、支持静态 和 ajax 异步加载节点数据
7、支持任意更换皮肤 / 自定义图标（依靠css）
8、支持极其灵活的 checkbox 或 radio 选择功能
9、提供多种事件响应回调
10、灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
11、在一个页面内可同时生成多个 tree 实例
核心的函数和属性介绍：
核心：ztree(setting, [ztreenodes])
这个函数接受一个json格式的数据对象setting和一个json格式的数据对象ztreenodes，从而建立 tree。
核心参数：setting
ztree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置
var setting = { showline: true, checkable: true };
因为参数太多，具体参数详见ztreeapi
核心参数：ztreenodes
ztree 的全部节点数据集合，采用由json对象组成的数据结构，简单的说：这里使用json格式保存了树的所有信息
1、ztree官方网站： http://www.ztree.me/v3/main.php#_ztreeinfo
在官网能够下载到ztree的源码、实例和api，其中作者pdf的api写得非常详细
关于ztree的节点数据的获取方式分为静态（直接定义）的和动态（后台数据库加载）的
具体的配置步骤：
第一步 —— 引入相关文件
备注：
1）、第一个（ztreestyle.css）是ztree的样式css文件，引入了这个，才能呈现出树形的结构样式，
2）、第二个（jquery-1.9.1.min.js）是jquery文件，因为要用到，
3）、第三个（jquery.ztree.core-3.5.min.js）则是ztree的核心js文件，这个是必须的，
4）、最后一个（js/jquery.ztree.excheck-3.5.min.js）则是拓展文件，主要用于单选框和复选框的功能，因为用到了复选框，所以也要要引进来。
第二步 —— 相关配置（具体的详细配置，请到官网参考详细api文档）
var ztree;var setting = { view: { dblclickexpand: false,//双击节点时，是否自动展开父节点的标识 showline: true,//是否显示节点之间的连线 fontcss:{'color':'black','font-weight':'bold'},//字体样式函数 selectedmulti: false //设置是否允许同时选中多个节点 }, check:{ //chkboxtype: { y: ps, n: ps }, chkstyle: checkbox,//复选框类型 enable: true //每个节点上是否显示 checkbox }, data: { simpledata: {//简单数据模式 enable:true, idkey: id, pidkey: pid, rootpid: } }, callback: { beforeclick: function(treeid, treenode) { ztree = $.fn.ztree.getztreeobj(user_tree); if (treenode.isparent) { ztree.expandnode(treenode);//如果是父节点，则展开该节点 }else{ ztree.checknode(treenode, !treenode.checked, true, true);//单击勾选，再次单击取消勾选 } } }};
第三步 —— 节点数据加载，呈现树形结构
1）、html页面，直接放一个ul就可以，数据最终会自动加载到这个ul元素里面
2）、js中进行数据的加载
一、静态方式（直接定义）
var znodes =[ { id:1, pid:0, name:test 1, open:false}, { id:11, pid:1, name:test 1-1, open:true}, { id:111, pid:11, name:test 1-1-1}, { id:112, pid:11, name:test 1-1-2}, { id:12, pid:1, name:test 1-2, open:true}, ]; $(document).ready(function(){ $.fn.ztree.init($(#user_tree), setting, znodes);});function oncheck(e,treeid,treenode){ var treeobj=$.fn.ztree.getztreeobj(user_tree), nodes=treeobj.getcheckednodes(true), v=; for(var i=0;i
/** * 页面初始化 */$(document).ready(function(){ onloadztree();});/** * 加载树形结构数据 */function onloadztree(){ var treenodes; $.ajax({ async:false,//是否异步 cache:false,//是否使用缓存 type:'post',//请求方式：post datatype:'json',//数据传输格式：json url:$('#ctx').val()+sendnoticemsgservlet?action=loadusertree,//请求的action路径 error:function(){ //请求失败处理函数 alert('亲，请求失败！'); }, success:function(data){// console.log(data); //请求成功后处理函数 treenodes = data;//把后台封装好的简单json格式赋给treenodes } }); var t = $(#user_tree); t = $.fn.ztree.init(t, setting, treenodes);}
java后台加载数据代码：
1、定义tree的vo类，这个也可以不用定义，由于我要用到其他操作，方便一些
/** * ztree树形结构对象vo类 * * @author administrator * */public class treevo { private string id;//节点id private string pid;//父节点pid i必须大写 private string name;//节点名称 private string open = false;//是否展开树节点，默认不展开 public string getid() { return id; } public void setid(string id) { this.id = id; } public string getpid() { return pid; } public void setpid(string pid) { this.pid = pid; } public string getname() { return name; } public void setname(string name) { this.name = name; } public string getopen() { return open; } public void setopen(string open) { this.open = open; }}
2、查询数据库，并且sql的结构字段也要是id,pid,name,open(可选)这种格式（注意：pid中间的i必须大写），然后将结果封装到treevo类中。
/** * 加载树形结构数据 * @param request * @param response * @throws ioexception */ public void loadusertree(httpservletrequest request, httpservletresponse response) throws ioexception{ weixinuserservice weixinuserservice = new weixinuserserviceimpl(); list user_tree_list = weixinuserservice.getusertreelist(); string treenodesjson = jsonarray.fromobject(user_tree_list).tostring();//将list列表转换成json格式 返回 printwriter out = response.getwriter(); //利用json插件将array转换成json格式 out.print(treenodesjson); //释放资源 out.close(); }
这里就完成了整个操作了，誒，文笔不好，组织语言自然就不怎么样了，大家见谅！共同学习，共同成长！