现在位置首页 / 前端开发 /正文

jquery+ztree+java获取json数据构建树

作者: IT小兵 | 2016年4月20日| 热度:℃ | 评论: |参与:

本文是结合前面对fastjson的处理后,在此基础上来用树的形式展示后台数据

如图所示:


采用了开源的ztree技术。具体参考:

http://www.oschina.net/p/ztree

demo下载地址:http://vdisk.weibo.com/s/bVYEF  


因为ztree的格式支持Json,所以我们就新建了一个Node类【TreeNode.java】
 /**
* TreeNode.java
* 版权所有(C) 2012
* 创建:cuiran 2012-06-12 15:37:40
*/
package com.fastjson.test;

/**
* TODO
* @author cuiran
* @version TODO
*/
public class TreeNode {
private Integer id;
private Integer pId;
private String name;
private Boolean checked;
private Boolean open;
/**
* @return the id
*/
public Integer getId() {
return id;
}
/**
* @param id the id to set
*/
public void setId(Integer id) {
this.id = id;
}
/**
* @return the pId
*/
public Integer getPId() {
return pId;
}
/**
* @param id the pId to set
*/
public void setPId(Integer id) {
pId = id;
}
/**
* @return the name
*/
public String getName() {
return name;
}
/**
* @param name the name to set
*/
public void setName(String name) {
this.name = name;
}
/**
* @return the checked
*/
public Boolean isChecked() {
return checked;
}
/**
* @param checked the checked to set
*/
public void setChecked(Boolean checked) {
this.checked = checked;
}
/**
* @return the open
*/
public Boolean isOpen() {
return open;
}
/**
* @param open the open to set
*/
public void setOpen(Boolean open) {
this.open = open;
}
public TreeNode(Integer id, Integer pId, String name, Boolean checked, Boolean open) {
super();
this.id = id;
this.pId = pId;
this.name = name;
this.checked = checked;
this.open = open;
}
public TreeNode() {
super();
}


}

新建一个TreeServlet【TreeServlet.java】

 package com.fastjson.test;
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;


public class TreeServlet extends HttpServlet {

/**
* Constructor of the object.
*/
public TreeServlet() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doPost(request, response);
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

TreeNode node1=new TreeNode(1,0,"北京市",false,true);
TreeNode node2=new TreeNode(2,1,"朝阳区",false,true);
TreeNode node3=new TreeNode(3,1,"海淀区",false,true);

TreeNode node4=new TreeNode(4,0,"湖北省",false,true);
TreeNode node5=new TreeNode(5,4,"武汉市",false,true);
TreeNode node6=new TreeNode(6,4,"襄阳市",false,true);

List<TreeNode> list=new ArrayList<TreeNode>();
list.add(node1);
list.add(node2);
list.add(node3);
list.add(node4);
list.add(node5);
list.add(node6);

String jsonString = JSON.toJSONString(list);
System.out.println("调用后台:"+jsonString);
out.println(jsonString);
out.flush();
out.close();
}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}

}

网页代码【tree.jsp】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
 <head>  
   <base href="<%=basePath%>">  
     
   <title>My JSP 'tree.jsp' starting page</title>  
     
   <meta http-equiv="pragma" content="no-cache">  
   <meta http-equiv="cache-control" content="no-cache">  
   <meta http-equiv="expires" content="0">      
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
   <meta http-equiv="description" content="This is my page">  
   <!--  
   <link rel="stylesheet" type="text/css" href="styles.css">  
   -->  
   <link rel="stylesheet" href="css/demo.css" type="text/css">  
   <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">  
   <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>  
   <script type="text/javascript" src="js/jquery.ztree.core-3.2.js"></script>  
   <script type="text/javascript" src="js/jquery.ztree.excheck-3.2.js"></script>  
     
     
   <SCRIPT type="text/javascript">  
       <!--  
       var setting = {  
           check: {  
               enable: true  
           },  
           data: {  
               simpleData: {  
                   enable: true  
               }  
           }  
       };  
 
       var zNodes ;  
         
         
       var code;  
     
       function setCheck() {  
         
           var zTree = $.fn.zTree.getZTreeObj("treeDemo"),  
           py = $("#py").attr("checked")? "p":"",  
           sy = $("#sy").attr("checked")? "s":"",  
           pn = $("#pn").attr("checked")? "p":"",  
           sn = $("#sn").attr("checked")? "s":"",  
           type = { "Y":py + sy, "N":pn + sn};  
           zTree.setting.check.chkboxType = type;  
           showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');  
       }  
       function showCode(str) {  
           if (!code) code = $("#code");  
           code.empty();  
           code.append("<li>"+str+"</li>");  
       }  
         
     
       function fuzhi(data){  
             
         
           zNodes=eval("("+data+")");  
         
             
           $.fn.zTree.init($("#treeDemo"), setting, zNodes);  
         
           setCheck();  
           $("#py").bind("change", setCheck);  
           $("#sy").bind("change", setCheck);  
           $("#pn").bind("change", setCheck);  
           $("#sn").bind("change", setCheck);  
             
         
       }  
         
       $(document).ready(function(){  
             
         
       $.get("http://localhost:8090/Test/servlet/tree",function(data){  
         
           $('#result').text(data);//直接展示JSON数据  
           fuzhi(data);  
             
           });  
 
       });  
       //-->  
   </SCRIPT>  
 </head>  
   
 <body >  
   This is my JSP page. <br>  
   <div  id="result">  
   </div>  
   <div class="zTreeDemoBackground left">  
       <ul id="treeDemo" class="ztree"></ul>  
   </div>  
   <div class="right">  
       <ul class="info">  
           <li class="title"><h2>1、setting 配置信息说明</h2>  
               <ul class="list">  
               <li class="highlight_red">使用 checkbox,必须设置 setting.check 中的各个属性,详细请参见 API 文档中的相关内容</li>  
               <li><p>父子关联关系:<br/>  
                       被勾选时:<input type="checkbox" id="py" class="checkbox first" checked /><span>关联父</span>  
                       <input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>  
                       取消勾选时:<input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span>  
                       <input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/>  
                       <ul id="code" class="log" style="height:20px;"></ul>  
                       </p>  
               </li>  
               </ul>  
           </li>  
           <li class="title"><h2>2、treeNode 节点数据说明</h2>  
               <ul class="list">  
               <li class="highlight_red">1)、如果需要初始化默认节点被勾选,请设置 treeNode.checked 属性,详细请参见 API 文档中的相关内容</li>  
               <li class="highlight_red">2)、如果某节点禁用 checkbox,请设置 treeNode.chkDisabled 属性,详细请参见 API 文档中的相关内容 和 'chkDisabled 演示'</li>  
               <li class="highlight_red">3)、如果某节点不显示 checkbox,请设置 treeNode.nocheck 属性,详细请参见 API 文档中的相关内容 和 'nocheck 演示'</li>  
               <li class="highlight_red">4)、如果更换 checked 属性,请参考 API 文档中 setting.data.key.checked 的详细说明</li>  
               <li>5)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明</li>  
               </ul>  
           </li>  
       </ul>  
   </div>  
 </body>  
</html>  


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询