Java zTree 的异步加载demo示例

最近需要使用树形展示权限,所以研究了一下Java Tree,其实java中有不少Tree展示,具体有如下几种

Tree的几种开源组件:

1、dtree

2、ztree(国内的,api全中文,我用这个)

3、JTree

4、dhtmlxTree(国外的,种类齐全),网址为:http://dhtmlx.com/docs/products/dhtmlxTree/index.shtml

##以下是我找的还不错的Tree组件,还有很多!

具体使用方式请参考zTreeAPIzTree Demo

(1)编写数据库脚本添加数据

(2)定义一个基本权限类:Competence.java

public class Competence {  
    private int id; // 编号  
    private int pId;    // 父节点  
    private int isParent;   // 是否父节点  
    private String name;    // 节点名称  
    private int open;   // 是否打开  

    // 此处省略 get,set方法  

}

(3)创建BaseDao.java联接数据库

package com.demo.test;  
  
import java.sql.Connection;  
import java.sql.DriverManager;  
import java.sql.PreparedStatement;  
import java.sql.ResultSet;  
import java.sql.SQLException;  
import java.sql.Statement;  
  
/** 
 * 连接数据源  
 * @author X-rapido
 */  
public class BaseDao {  
     static Connection conn; // 创建联接  
     PreparedStatement st; //  预执行类  
     ResultSet rs; // 结果集  
  
    /** 
     *  得到连接 
     *  @return connnection 
     */  
    public static Connection getConnection() {  
        try {  
            // 加载驱动  
            Class.forName("oracle.jdbc.driver.OracleDriver");  
            try {  
                // 创建联接  
                conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl", "scott", "scott");  
                System.out.println("---------------- 打开连接 -----------------");  
            } catch (SQLException e) {  
                System.out.println("---------------- 连接失败 -----------------");  
                e.printStackTrace();  
            }  
        } catch (ClassNotFoundException e) {  
            System.out.println("---------------- 驱动加载失败 -----------------");  
            e.printStackTrace();  
        }  
        return conn;  
    }  
  
    /** 
     * 关闭连接对象 
     * @param rs 
     * @param st 
     * @param conn 
     */  
    public static void closeConnection(ResultSet rs, Statement st, Connection conn) {  
        try {  
            if (rs != null) {  
                rs.close();  
            }  
            if (st != null) {  
                st.close();  
            }  
            if (conn != null && !conn.isClosed()) {  
                conn.close();  
            }  
            System.out.println("---------------- 关闭连接 -----------------");  
        } catch (SQLException e) {  
            System.out.println("---------------- 关闭连接失败 -----------------");  
            e.printStackTrace();  
        }  
    }  
}

(4)创建测试的类 Test.java

package com.demo.test;  
  
import java.sql.Connection;  
import java.sql.SQLException;  
import java.util.ArrayList;  
import java.util.List;  
  
public class Test extends BaseDao {  
  
    public List<Competence> getAllAuthorize() {  
        List<Competence> authorizes = new ArrayList<Competence>();  
        Connection conn = getConnection(); // 得到联接  
        try {  
            st = conn.prepareStatement("select * from authorize2 ");  
            rs = st.executeQuery(); // 得到结果集  
            while (rs.next()) {  
                Competence authorize = new Competence();  
                authorize.setId(rs.getInt("id"));  
                authorize.setpId(rs.getInt("pid"));  
                authorize.setOpen(rs.getInt("open"));  
                authorize.setIsParent(rs.getInt("isParent"));  
                authorize.setName(rs.getString("name"));  
                // 添加到集合  
                authorizes.add(authorize);  
            }  
        } catch (SQLException e) {  
            System.out.println("---------------- 查询authorize失败 -----------------");  
            e.printStackTrace();  
        } finally {  
            closeConnection(rs, st, conn);  
        }  
        return authorizes;  
    }  
      
    /** 
     * 拼接成json类型 
     * @return 
     */  
    public String getJSONData(){  
        Test d = new Test();  
        List<Competence> list=d.getAllAuthorize();  
        StringBuffer json=new StringBuffer("[");  
        String data="";  
        for (int i = 0; i < list.size(); i++) {  
            json.append("{id:"+list.get(i).getId()+",");  
            json.append("pId:"+list.get(i).getpId()+",");  
            json.append("name:\""+list.get(i).getName()+"\",");  
            if (list.get(i).getIsParent() !=0) {  
                json.append("isParent:"+list.get(i).getIsParent()+",");  
            }  
            if (list.get(i).getOpen() !=0) {  
                json.append("open:"+list.get(i).getOpen()+",");  
            }  
            data=json.substring(0,json.lastIndexOf(","))+"},";  
            json=new StringBuffer(data);  
        }  
        data=json.substring(0, json.length()-1)+"]";  
        System.out.println(data);  
        return data;  
    }  
    public static void main(String[] args) {  
        Test demoTest=new Test();  
        demoTest.getJSONData();  
    }  
}

(5) 创建加载zTree 树的html或jsp页面 asyncLoad.html

<!DOCTYPE html>  
<HTML>  
<HEAD>  
<TITLE>zTree Demo</TITLE>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<link rel="stylesheet" href="../css/demo.css" type="text/css">  
<!-- 必须文件 zTreeStyle.css、jquery.ztree.core-x.js、jquery-x.min.js -->  
<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.5.js"></script>  
<script language="JavaScript">  
    var setting = {  
        async : {  
            enable : true, // 设置 zTree是否开启异步加载模式  
            url : "asyncData/loadData2.jsp", // Ajax 获取数据的 URL 地址  
            autoParam : [ "id" ]    // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"},异步加载时,提交参数 zId=1  
        },  
        data:{ // 必须使用data  
            simpleData : {  
                enable : true,  
                idKey : "id", // id编号命名 默认  
                pIdKey : "pId", // 父id编号命名 默认   
                rootPId : 0 // 用于修正根节点父节点数据,即 pIdKey 指定的属性值  
            }  
        },  
        // 回调函数  
        callback : {  
            onClick : function(event, treeId, treeNode, clickFlag) {  
                // 判断是否父节点  
                if(!treeNode.isParent){  
                    alert("treeId自动编号:" + treeNode.tId + ", 节点id是:" + treeNode.id + ", 节点文本是:" + treeNode.name);      
                }  
            },  
            //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数  
            onAsyncError : zTreeOnAsyncError,  
            onAsyncSuccess : function(event, treeId, treeNode, msg){  
                  
            }  
        }  
    };  
  
    // 加载错误提示  
    function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {  
        alert("加载错误:" + XMLHttpRequest);  
    };  
  
    // 过滤函数  
    function filter(treeId, parentNode, childNodes) {  
        if (!childNodes)  
            return null;  
        for ( var i = 0, l = childNodes.length; i < l; i++) {  
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');  
        }  
        return childNodes;  
    }  
  
    // 渲染  
    $(document).ready(function() {  
        $.fn.zTree.init($("#treeDemo"), setting);  
    });  
</script>  
</HEAD>  
<BODY>  
    <div>  
        <ul id="treeDemo" class="ztree"></ul>  
    </div>  
</BODY>  
</HTML>

(6) 创建一个接收的Servlet,本测试使用jsp代替 loadData.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<%@ page import="com.demo.test.*" %>  
  
<%  
    String id = request.getParameter("id"); // 父节点编号  
    System.out.print("得到的节点id:"+id);  
    Test demo=new Test();  
    String json=demo.getJSONData();  
    out.print(json);  
%>

注:json数据最终会被拼接成array的形式,如下结果:雷同即可显示

[{id:100,pId:0,name:"父节点",isParent:1,open:1},{id:101,pId:100,name:"叶子节点—1",isParent:1},{id:102,pId:100,name:"叶子节点—2",isParent:1},{id:103,pId:100,name:"叶子节点—3",isParent:1},{id:104,pId:0,name:"NB的父节点",isParent:1,open:1},{id:105,pId:104,name:"叶子节点2—1",isParent:1},{id:106,pId:104,name:"叶子节点2—2",isParent:1},{id:107,pId:104,name:"叶子节点2—3"},{id:108,pId:0,name:"郁闷的父节点",isParent:1},{id:109,pId:108,name:"叶子节点3—1"},{id:110,pId:108,name:"叶子节点3—2"},{id:111,pId:108,name:"叶子节点3—3"},{id:112,pId:101,name:"秘书"},{id:113,pId:101,name:"行政"},{id:114,pId:102,name:"助理"},{id:115,pId:102,name:"保安"},{id:116,pId:103,name:"销售"},{id:117,pId:103,name:"前台"},{id:118,pId:103,name:"主管"},{id:119,pId:105,name:"卫生"},{id:120,pId:106,name:"人事"}]

效果如图

这里的小测试使用了子父节点同时加载完毕效果,加载完毕后,单击父节点不会再次访问数据库,会从缓存中加载。所以这里使用的open属性有效果,如果是单击父节点,加载子节点再次访问数据库的方式,open可能无效。

json的数据中如isParent:1,这样的数据1代表true


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏