基于jquery+ztree+java获取json数据构建树实例

作者:袖梨 2022-06-25

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同时生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成 和 Ajax 异步加载 两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持任意更换皮肤 / 个性化图标(依靠css
支持极其灵活的 checkbox 或 radio 选择功能
简单的参数配置实现 灵活多变的功能
因为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.

  */
 public void destroy() {
  super.destroy(); // Just puts "destroy" string in log
  // Put your code here
 }

 /**
  * The doGet method of the servlet.

  *
  * 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.

  *
  * 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 list=new ArrayList();
  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.

  *
  * @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+"/";
%>



 
   
   
    My JSP 'tree.jsp' starting page
   
 
 
    
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    This is my JSP page.

   
 


   

  

     

     

      

         
    • 1、setting 配置信息说明


          

            
      • 使用 checkbox,必须设置 setting.check 中的各个属性,详细请参见 API 文档中的相关内容

      •     
      • 父子关联关系:

              被勾选时:关联父
              关联子

              取消勾选时:关联父
              关联子

              


                


              

        •     

           

      •    
      • 2、treeNode 节点数据说明


            

              
        • 1)、如果需要初始化默认节点被勾选,请设置 treeNode.checked 属性,详细请参见 API 文档中的相关内容

        •     
        • 2)、如果某节点禁用 checkbox,请设置 treeNode.chkDisabled 属性,详细请参见 API 文档中的相关内容 和 'chkDisabled 演示'

        •     
        • 3)、如果某节点不显示 checkbox,请设置 treeNode.nocheck 属性,详细请参见 API 文档中的相关内容 和 'nocheck 演示'

        •     
        • 4)、如果更换 checked 属性,请参考 API 文档中 setting.data.key.checked 的详细说明

        •     
        • 5)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明

        •     

           

      •   

       

       

      相关文章

      精彩推荐