zTree树插件异步加载模式的用法
来源:互联网 发布:大牌包包经典款 知乎 编辑:程序博客网 时间:2024/05/21 12:47
完整版见https://jadyer.github.io/2013/10/16/ztree-demo/
这是一个WebProject,关于用到的jar或js文件,详见代码注释
本文代码运行后,页面效果如下
下面是代码,首先是web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5"xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><servlet><servlet-name>ManageServlet</servlet-name><servlet-class>com.jadyer.servlet.ManageServlet</servlet-class></servlet><servlet-mapping><servlet-name>ManageServlet</servlet-name><url-pattern>/servlet/ManageServlet</url-pattern></servlet-mapping></web-app>
然后是//WebRoot//index.jsp
<%@ page language="java" pageEncoding="UTF-8"%><!-- zTree官网:http://www.ztree.me(本文使用的版本是zTree_v3.5.14.zip) --><!-- 作者博客:http://ztreeapi.iteye.com --><!-- GitHub:https://github.com/zTree --><!-- GoogleCode:https://code.google.com/p/jquerytree/ --><!-- zTree引入到项目中后的目录结构如下WebRoot |--js | |--jquery-1.9.1.min.js | |--zTree | | |--jquery.ztree.all-3.5.min.js | | |--css | | | |--demo.css | | | |--zTreeStyle.css | | | |--img | | | | |--line_conn.gif | | | | |--loading.gif | | | | |--zTreeStandard.gif | | | | |--zTreeStandard.png | | | | |--diy | | | | | |--1_close.png | | | | | |--1_open.png | | | | | |--2.png | | | | | |--3.png | | | | | |--4.png | | | | | |--5.png | | | | | |--6.png | | | | | |--7.png | | | | | |--8.png | | | | | |--9.png --><link type="text/css" rel="stylesheet" href="./js/zTree/css/demo.css"><link type="text/css" rel="stylesheet" href="./js/zTree/css/zTreeStyle.css"><script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="./js/zTree/jquery.ztree.all-3.5.min.js"></script><script type="text/javascript"><!--var setting = {check: {enable : true, //设置zTree的节点上显示勾选框(checkbox或radio)chkStyle: 'checkbox' //指定勾选框类型为checkbox(setting.check.enable=true时生效)},data: {simpleData: {enable: true, //开启简单数据模式(Array)pIdKey: 'pid' //节点数据中保存其父节点唯一标识的属性名称,默认值为pId}},async: {enable:true, //设置zTree开启异步加载模式,默认值为false(默认为异步的POST请求)url :'${pageContext.request.contextPath}/servlet/ManageServlet'},};$(function(){//开启异步加载后,将第三个参数zNodes填为null后表示根节点也异步加载//由于这里的isSimpleData=true,故异步返回的数据格式应该是下面这种//这是样例报文[{"checked":false,"chkDisabled":false,"id":1,"name":"测试1","open":true,"pid":0,"value":"值value1"},{"checked":false,"chkDisabled":false,"id":2,"name":"test2","open":true,"pid":1,"value":"值value2"},{"checked":false,"chkDisabled":false,"id":3,"name":"test3","open":true,"pid":1,"value":"值value3"},{"checked":true,"chkDisabled":true,"id":4,"name":"test4","open":true,"pid":2,"value":"值value4"},{"checked":false,"chkDisabled":false,"id":5,"name":"test5","open":true,"pid":2,"value":"值value5"}]//如果想对异步返回的数据进行加工,可以在setting.async中配置ajaxDataFilter属性,详见zTree的官方API//注意:显示的树的二级菜单是与异步返回数据有关的,可以修改后台生成数据前针对各菜单元素存放的顺序来查看树的显示效果//注意:但一级菜单始终会显示在第一列的,可以在后台修改二级(乃至三级、四级)菜单的存放顺序$.fn.zTree.init($('#treeDemo'), setting, null);});/** * 获取已勾选项编号 */function getZTreeValue(){var treeObj = $.fn.zTree.getZTreeObj('treeDemo');var nodes = treeObj.getCheckedNodes(true);var checkedIds = '';var checkedValues = '';for(var i=0; i<nodes.length; i++){checkedIds += nodes[i].id + '`';checkedValues += nodes[i].value + '`';}if(checkedIds.length > 0){checkedIds = checkedIds.substring(0, checkedIds.length-1);checkedValues = checkedValues.substring(0, checkedValues.length-1);}alert(checkedIds);alert(checkedValues);}//--></script><div><ul id="treeDemo" class="ztree"></ul></div><br/><br/><input type="button" value="获取已勾选项编号" onclick="getZTreeValue()"/>
下面是用于封装zTree树菜单信息的User.java
package com.jadyer.model;public class User {private int id;private int pid;private String name;private String value;//以下三个属性原本应该用boolean,不过zTree也支持String的'true'和'false'private String open;private String checked;private String chkDisabled;/*--以上七个属性的setter和getter略--*/}
最后是用来为zTree树提供菜单数据字符串的ManageServlet.java
package com.jadyer.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON;import com.jadyer.model.User;public class ManageServlet extends HttpServlet {private static final long serialVersionUID = 1916784793092718608L;public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//response.setContentType("text/html; charset=UTF-8");//这里返回类型也可以用application/jsonresponse.setContentType("application/json; charset=UTF-8");PrintWriter out = response.getWriter();out.write(this.getData());out.flush();out.close();}private String getData() {User user1 = new User();User user2 = new User();User user3 = new User();User user4 = new User();User user5 = new User();user1.setId(1);user1.setPid(0);user1.setName("测试1");user1.setValue("值value1");user1.setOpen("true");user2.setId(2);user2.setPid(1);user2.setName("test2");user2.setValue("值value2");user2.setOpen("true");user3.setId(3);user3.setPid(1);user3.setName("test3");user3.setValue("值value3");user3.setOpen("true");user4.setId(4);user4.setPid(2);user4.setName("test4");user4.setValue("值value4");user4.setOpen("true");user4.setChecked("true");user4.setChkDisabled("true");user5.setId(5);user5.setPid(2);user5.setName("test5");user5.setValue("值value5");user5.setOpen("true");List<User> userList = new ArrayList<User>();userList.add(user3);userList.add(user2);userList.add(user4);userList.add(user1);userList.add(user5);//这里用的是fastjson-1.1.36.jar//<dependency>// <groupId>com.alibaba</groupId>// <artifactId>fastjson</artifactId>// <version>1.1.36</version>//</dependency>String datas = JSON.toJSONString(userList);//这是样例报文datas=[{"checked":false,"chkDisabled":false,"id":1,"name":"测试1","open":true,"pid":0,"value":"值value1"},{"checked":false,"chkDisabled":false,"id":2,"name":"test2","open":true,"pid":1,"value":"值value2"},{"checked":false,"chkDisabled":false,"id":3,"name":"test3","open":true,"pid":1,"value":"值value3"},{"checked":true,"chkDisabled":true,"id":4,"name":"test4","open":true,"pid":2,"value":"值value4"},{"checked":false,"chkDisabled":false,"id":5,"name":"test5","open":true,"pid":2,"value":"值value5"}]System.out.println("datas=" + datas);return datas;}}
- zTree树插件异步加载模式的用法
- ztree树的异步加载async
- ztree v3.x 异步加载的简单用法
- jquery+ztree插件异步加载(二)
- Ztree异步加载树节点
- zTree 的异步加载加载实现--jfinal
- zTree 的异步加载加载实现--jfinal
- zTree树插件动态加载
- 关于ztree异步加载的问题
- Java zTree 的异步加载demo示例
- Java zTree 的异步加载demo示例
- Java zTree 的异步加载demo示例
- Ztree 异步加载值的改变
- Ztree 异步加载 的初步研究
- 基于jquery的异步ztree树形插件的用法和心得
- zTree树形插件使用 异步加载方法,Struts2框架
- struts2+json+zTree实现异步加载树
- 异步&同步加载树节点----zTree(一)
- maven pom.xml文件
- 子序列个数
- 警告提示:Consider making the text value selectable by specif
- C++ opencv小试3
- 获得Android手机的屏幕宽、高以及dip或sp与pix的转换
- zTree树插件异步加载模式的用法
- 事务的原子性、一致性、隔离性、持久性
- Android 利用发送Intent播放本地视频和网络视频
- Hessian学习
- 苹果削减iPhone 5c产量 增加iPhone 5s生产
- iOS动画—UIView动画以及CoreAnimation动画
- Deep Learning(深度学习)学习笔记整理系列之(五) ~(七)
- 不带缓存的文件I/O操作 fcntl
- SPOJ AMR12E Dyslexic Gollum