java zTree非同步載入實戰

indexman發表於2017-11-19
Java非同步

zTree簡介

zTree 是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。 zTree 是開源免費的軟體（MIT 許可證）。
詳細請參考官網：
http://www.treejs.cn/v3/main.php#_zTreeInfo

本文介紹企業中最常用的非同步載入技術。
本例展示一個大學的樹結構，包括【院校--院系--專業--班級】幾個層級。

1 mysql建表

CREATE TABLE school_tree
(
  id INT,
  pid INT,
  NAME VARCHAR(100)
);

INSERT INTO school_tree VALUES(1,NULL,'清華大學');
INSERT INTO school_tree VALUES(2,1,'軟體工程學院');
INSERT INTO school_tree VALUES(3,1,'國際貿易學院');
INSERT INTO school_tree VALUES(4,1,'土木工程學院');
INSERT INTO school_tree VALUES(5,1,'機電學院');

INSERT INTO school_tree VALUES(6,2,'軟體測試專業');
INSERT INTO school_tree VALUES(7,2,'遊戲開發專業');
INSERT INTO school_tree VALUES(8,6,'C001班');
INSERT INTO school_tree VALUES(9,6,'C002班');

INSERT INTO school_tree VALUES(10,3,'對外貿易專業');
INSERT INTO school_tree VALUES(11,10,'D001班');
INSERT INTO school_tree VALUES(12,10,'D002班');
COMMIT;


SELECT * FROM school_tree;

2 編寫實體類

package entity;

/**
 * 學校樹形實體類
 *
 * @author xusucheng
 * @create 2017-11-18
 **/
public class SchoolTree {
    private int id;
    private int pId;
    private String name;
    private int isParent;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getpId() {
        return pId;
    }

    public void setpId(int pId) {
        this.pId = pId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getIsParent() {
        return isParent;
    }

    public void setIsParent(int isParent) {
        this.isParent = isParent;
    }
}





3 編寫測試類


package test;

import entity.SchoolTree;
import net.sf.json.JSONArray;
import util.DBUtil;

import javax.xml.transform.Result;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

/**
 * @author xusucheng
 * @create 2017-11-18
 **/
public class TestSchoolTree {

    public static void main(String[] args) throws SQLException {
        JSONArray jsonArray = getSchoolTree(null);

    }

    public static JSONArray getSchoolTree(String pid) throws SQLException {
        List<SchoolTree> list=new ArrayList<>();
        //SchoolTree entity=null;
        String sql=null;
        Connection con= DBUtil.getConnection();
        if(pid==null){
             sql="select id,pid,name from school_tree where pid is null";
        }else {
            sql="select id,pid,name from school_tree where pid ="+pid;
        }

        PreparedStatement ps = con.prepareStatement(sql);
        ResultSet rs = ps.executeQuery(sql);
        while (rs.next()){
            System.out.println(rs.getInt("id")+":"+rs.getInt("pid")+":"+rs.getString("name"));
            SchoolTree entity=new SchoolTree();
            entity.setId(rs.getInt("id"));
            entity.setpId(rs.getInt("pid"));
            entity.setName(rs.getString("name"));
            entity.setIsParent(1);
            list.add(entity);
        }

        DBUtil.close(rs,ps,con);

        JSONArray resultJson = JSONArray.fromObject(list);


        return resultJson;
    }


}




4 編寫獲取樹結構資料的JSP


為演示方便用了JSP，實戰請用servlet或controller


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="test.TestSchoolTree" %>
<%
  String pid=request.getParameter("id"); //父節點ID
  String jsonStr=TestSchoolTree.getSchoolTree(pid).toString();
  out.print(jsonStr);
%>



5 編寫樹html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非同步載入樹</title>
    <link rel="stylesheet" href="../../css/zTreeStyle.css">
    <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript">
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            async: {
                enable: true,
                url: "getSchoolTree.jsp",
                autoParam: ["id"]
            },
            // 回撥函式
            callback : {
                onClick : function(event, treeId, treeNode, clickFlag) {
                    // 判斷是否父節點
                    if(!treeNode.isParent){
                        alert("treeId自動編號：" + treeNode.tId + ", 節點id是：" + treeNode.id + ", 節點文字是：" + treeNode.name);
                    }
                }

            }

        };

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting);
        });
    </script>
</head>
<body>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>

</html>



6 頁面展示














相關文章