zTree使用说明.doc

ZTree使用说明李守坤使用条件:使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件zTree核心js文件:jquery.ztree-2.6.jszTree样式文件:因为zTree是基于jquery，所以还需要对应的jQuery库文件将这些文件引入使用页面: 简单使用:用户需要在页面上新建一个tree对象，需要使用var zTree = $(#tree).zTree(setting, zTreeNodes);$(#tree)是获取页面上一个id为tree的元素zTree()方法是加载树形结构，它需要两个参数，一个为setting,zTree 的参数配置数据,json数据格式另一个为zTreeNodes ，其实这个参数是可选的，因为数据是放在setting对象的root属性下，如果root属性下已经存在数据，则可以不用再加载数据对象，例如异步加载数据后，重新加载树形结构的时候，便不需要再指定数据对象。zTree 的数据参数,json数据格式而var zTree 是创建树形结构后返回的一个jQuery对象，之后操作树形结构全部操作这个对象即可。完整代码为： 这里是测试页面 var setting = showLine: false,/是否显示线，true为显示，false为不显示checkable: true,/是否有可选框，true为可选，false为不可选showIcon : false/是否有图标，true为有，false为没有，默认为true;/新建数据对象，json数据格式var zTreeNodes1 = name:手机, open:false, checked:true,nodes: name:诺基亚, isParent:true, name:三星, name:索爱, name:多普达, name:电脑, open:true, checked:true,nodes: name:硬件, checked:true, name:整机, isParent:true, checked:true, name:网络, checked:true, name:家电, open:false,nodes: name:电视, checked:true, name:冰箱, name:空调, isParent:true; var zTree = $(#tree).zTree(setting, zTreeNodes1); 运行结果便如:Setting对象常用属性说明:var setting = isSimpleData : true,/是否使用简单的数组结构 treeNodeKey : id,/使用简单数组结构必须制定的节点自身id treeNodeParentKey : pId,/使用简单数组结构必须指定的父节点id showLine: false,/是否显示线，true为显示，false为不显示 checkable: true,/是否有可选框，true为可选，false为不可选 showIcon : false,/是否有图标，true为有，false为没有，默认为true callback : click: zTreeOnClick/回调函数，需要重写这个回调函数 ;如果使用简单数组格式，数据对象的格式便需要如下:/数据对象，通过pId字段指定上级目录var zTreeNodes3 = id:1, pId:0, name:test1, id:11, pId:1, name:test11, id:12, pId:1, name:test12, id:111, pId:11, name:test111, id:112, pId:11, name:test222, id:113, pId:11, name:test3;完整代码如下: 测试 /新建一个配置对象，json数据格式 var setting = isSimpleData : true,/是否使用简单的数组结构 treeNodeKey : id,/使用简单数组结构必须制定的节点自身id treeNodeParentKey : pId,/使用简单数组结构必须指定的父节点id showLine: false,/是否显示线，true为显示，false为不显示 checkable: true,/是否有可选框，true为可选，false为不可选 showIcon : false,/是否有图标，true为有，false为没有，默认为true callback : click: zTreeOnClick/回调函数，协议重写这个回调函数 ;/回调函数：zTreeOnClick，当用户点击树形结构的节点时触发function zTreeOnClick(event, treeId, treeNode) /treeNode为用户点击的节点alert(treeNode.tId + , + treeN);/数据对象2，简易数据结构var zTreeNodes2 = id:1, pId:0, name:test1,open:true, id:11, pId:1, name:test11,open:true, id:12, pId:1, name:test12, id:111, pId:11, name:test111, id:112, pId:11, name:test222, id:113, pId:11, name:test3; var zTree = $(#tree).zTree(setting, zTreeNodes2); 运行效果便如:而因为重写了zTreeOnClick回调函数，所以点击节点的时候，会触发回调函数数据对象属性介绍checked:当 setting.checkable = true 时有效，设定节点的 CheckBox 是否被勾选,默认是falseClick:设定节点在鼠标点击后做的事情，相当于 onclick=. 的内容，可用于一些简单操作，如果过于复杂的，建议通过 click 事件进行控制处理Icon:设定节点的自定义图标，以替换 css 样式中配置的普通图标。（设定时请注意指定图标的相对路径是否正确）Name:节点显示的名称。Open:设置父节点初始化展开状态。对于不需要异步获取子节点信息的父节点有效。Target:对于存在 url 属性的节点，设置点击后跳转的目标，同超链接的 target 属性（_blank, _self等）Url:指定节点被点击后的跳转页面 URL 地址常用方法介绍：其中zTree是加载树形结构之后返回的对象function ceshi()/重新加载树形结构，可以指定另外的setting对象和另外的数据对象，进行重新加载 var zTree = $(#tree).zTree(setting2, zTreeNodes3); /获取勾选状态改变的节点集合 var nodes = zTree.getChangeCheckedNodes(); /获取被选中的节点集合 var nodes = zTree.getCheckedNodes(); /获取id为111的节点，这里是精确获取 var node = zTree.getNodeByParam(id,111); /获取name中包含abc的节点，模糊查询， var nodes = zTree.getNodesByParamFuzzy(name,abc, node); /添加新的节点,添加新的数据对象到指定的父节点下，其中parentNode为欲添加的父节点，如果要在根节点目录下添加，则指定parentNode为null zTree.addNodes(parentNode, newNodes); /获取被选中的节点 var selectedNode = zTree.getSelectedNode(); 通过ajax异步获取数据 base href= 这是测试树形结构 var zTree1; varsetting = checkable: true,async: true,/允许异步获取数据asyncUrl: , /获取节点数据的URL地址asyncParam: name, id, /获取节点数据时，必须的数据名称，例如：id、nameasyncParamOther: /其它参数 ( key, value 键值对格式);/初始化时的数据对象var zNodes = name:google, url:, target:_blank,click:alert(myname), name:baidu, url:, target:_blank, name:sina, url:, target:_blank;/该方法用于预处理异步获取的数据，其中的childNodes便是异步获取的数据对象function dataFilter(treeId, parentNode, childNodes) /将初始化时的数据对象赋予一个变量var nodes = zNodes;if (childNodes) for(var i =0; ichildNodes.length; i+) /将新获取的数据对象一个个的加入nodes中nodes.push(childNodesi);/返回数据对象return nodes;function refreshTree(asyncUrl) /设置异步获取数据的地址，还可以是setting.asyncUrl = data/note.txt等，不止限于服务器获取setting.asyncUrl = testAction_huoqu.action;/设定异步获取数据后使用dataFilter方法进行数据处理setting.asyncDataFilter = dataFilter;/重新加载，这里不需要再指定数据对象zTree1 = $(#treeDemo).zTree(setting); zTree1 = $(#treeDemo).zTree(setting, zNodes); 服务器端代码：Struts2代码public String huoqu()JSONArray jsonArray = new JSONArray();JSONObject one = new JSONObject();one.put(name,魔兽世界);one.put(url,);one.put(target, _blank);JSONObject two = new JSONObject();two.put(name,剑侠情缘);two.put(url,);two.put(target, _blank);JSONObject three = new JSONObject();three.put(name,传奇);three.put(url,);three.put(target, _blank);jsonArray.add(one);jsonArray.add(two);jsonArray.add(three);HttpServletResponse response = ServletActionContext.getResponse();/返回页面的信息为utf-8编码，不加这个提示信息就会变成乱码response.setCharacterEncoding(utf-8);/返回页面的信息为html/text格式，不加这个返回页面的信息就会是整个页面response