zTree開源樹插件+html實現樹形目錄結構的展示

前在用fourinone分布式框架的時候需要做一個Web頁面，可以借助fourinone的api展示各存儲節點的樹形目錄結構。我最初的思路是利用遞歸掃面各節點下的文件和目錄，并將其存儲在數據庫。然后從數據庫取出展示。額，好像跑題了... 不管了，總之每個節點的文件和目錄的數量太大，所以只能是找一個可以異步加載并顯示樹形目錄結構的框架。于是我百度到了zTree。 zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。

今天我們先來學習一下如何靜態加載數據并顯示出樹形目錄結構。

首先，zTree是基于jQuery的，所以先在網頁中引入jq，然后引入zTree的js文件和css樣式文件。

然后創建一個顯示區域

</div>

然后定義json格式的數據

var treeNodes=[ {"id":"1","name":"Demo1","isParent":"1","pId":"0"},

{"id":"2","name":"Demo2","isParent":"1","pId":"1"},

{"id":"3","name":"Demo3","isParent":"1","pId":"1"},

{"id":"4","name":"Demo4","isParent":"0","pId":"2"},

{"id":"5","name":"Demo5","isParent":"0","pId":"2"},

{"id":"6","name":"Demo6","isParent":"1","pId":"3"},

{"id":"7","name":"Demo7","isParent":"0","pId":"1"},

{"id":"8","name":"Demo8","isParent":"0","pId":"2"},

{"id":"9","name":"Demo9","isParent":"0","pId":"3"},

{"id":"10","name":"Demo10","isParent":"0","pId":"6"},

{"id":"11","name":"Demo11","isParent":"0","pId":"1"}

];//id是節點id，pId是父節點id，通過他們的關系來綁定

接著對樹進行設置

var setting={//樹的設置

//外觀

view: {

showIcon: true, //設置是否顯示節點圖標

showLine: true, //設置是否顯示節點與節點之間的連線

fontCss : {color:"black",size:30}//字體顏色和大小

//數據類型

data: {

simpleData: {

enable: true, //設置是否啟用簡單數據格式（json格式）

}

//回調事件

callback: {//這里可以做很多回調，比如點擊，點擊前等等，在下一篇的動態加載數據中會介紹

}

};

最后是對樹進行初始化

var zTree;

$(document).ready(function(){//全部加載完后執行

$.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化樹

});

效果圖如下

全部代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>zTreeDemo</title>

</head>

</div>

</body>

var treeNodes=[ {"id":"1","name":"Demo1","isParent":"1","pId":"0"},

{"id":"2","name":"Demo2","isParent":"1","pId":"1"},

{"id":"3","name":"Demo3","isParent":"1","pId":"1"},

{"id":"4","name":"Demo4","isParent":"0","pId":"2"},

{"id":"5","name":"Demo5","isParent":"0","pId":"2"},

{"id":"6","name":"Demo6","isParent":"1","pId":"3"},

{"id":"7","name":"Demo7","isParent":"0","pId":"1"},

{"id":"8","name":"Demo8","isParent":"0","pId":"2"},

{"id":"9","name":"Demo9","isParent":"0","pId":"3"},

{"id":"10","name":"Demo10","isParent":"0","pId":"6"},

{"id":"11","name":"Demo11","isParent":"0","pId":"1"}

];//id是節點id，pId是父節點id，通過他們的關系來綁定

var setting={//樹的設置

//外觀

view: {

showIcon: true, //設置是否顯示節點圖標

showLine: true, //設置是否顯示節點與節點之間的連線

fontCss : {color:"black",size:30}//字體顏色和大小

//數據類型

data: {

simpleData: {

enable: true, //設置是否啟用簡單數據格式（json格式）

}

//回調事件

callback: {

}

};

var zTree;

$(document).ready(function(){//全部加載完后執行

$.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化樹

});

</script>

</html>

最后謝謝大家觀看，下一篇是利用ajax和zTree動態加載樹形目錄結構，實現點擊一個文件夾加載一層。

對了！還有，zTree可以到它的官網下載，里面也包含了jQuery。再見！

什么學習網頁制作？

互聯網時代的今天，各種各樣的網頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網頁。即使使用頭條這樣的APP，其內容布局、展示的方法也脫胎于網頁頁面設計的方法與原則。可以說頁面的概念已經遍布我們的信息化世界。

作為蕓蕓眾生中的一員，學習網頁制作對我們的事業、生活有怎樣的幫助呢？

第一，學習網頁制作有助于理解網絡信息的傳播運行機制，即使通過本課程不能全面了解這些核心機制，也能為大家鋪墊下繼續深入學習的知識基礎。即使自己不必親自制作網頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網頁或網站生成工具時也會比沒有基礎的人更快的掌握這些工具。

第二，學好網頁制作是制作網站的基礎，如果您因為事業需要或者個人愛好打算制作自己的網站或博客，無論是打算使用php還是Java還是Python去構建您的網站，精通網頁制作技術是您的第一塊技術基石。

第三，如果您打算學習網絡爬蟲來分析一些網絡數據，了解網頁頁面構成也是必要基礎，至少您要知道一個網頁頁面中每個標簽中對應的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想學習編程，但是缺少相應的基礎知識，看不懂復雜的C語言教學，那么從網頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。

除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現，可以讓我們通過瀏覽器構建3d世界，無論是虛擬現實（VR）還是增強現實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現，讓我們可以通過結合瀏覽器學習使用人工智能技術，且非常容易實現。

所以，新的一年里，我打算做網頁制作的學習教程，讓更多沒有基礎卻對網絡技術感興趣的小伙伴能加入進來。

制作網頁需要學習哪些技術？

簡單來說學習網頁制作需要掌握三門技術。

第一，也是最基礎最核心的內容是HTML超文本標記語言。大家不必糾結HTML到底是什么，但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想，網頁里都有哪些內容呢？

一般網頁中都會有文字、圖片、聲音、視頻、表格等內容，這些內容就是靠HTML中的標簽添加進頁面的。

所以說HTML這個工具就是個容器，我們使用HTML標簽語言為網頁添加所有需要的信息內容。

第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那么如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，里面裝了一個標題和一個只有六個字的段落。

為了讓這個頁面看起來美觀些，我們為其添加css樣式表。添加后如圖所示：

我們可以看出來，CSS讓標題文字換了顏色，也居中顯示了，背景也變成了藍色。

第三，JavaScript，這個工具相比HTML和CSS來講是最難學習的，學習JavaScript就是在學習編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。

那JavaScript能干什么呢？

首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現的。

其次，JavaScript可以為傳統頁面擴展出很多新功能，例如結合three.js我們可以很容易的在頁面中構建三維空間，或者實現一些3d游戲或其他三維動態演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！

再次，JavaScript可以以網頁為基礎，實現各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個開源免費網頁游戲制作庫。phaser官網：http://phaser.io/

JavaScript為網頁的功能拓展提供了很多可能性，無論是3d顯示還是游戲制作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學習難度比較大的原因。不過只要堅持下去一定能學通的！

網站與網頁的區別？

網頁是指我們看到的單個頁面。這些頁面分為靜態頁面和動態頁面兩種。靜態頁面指的是不能與服務器進行數據交互的頁面，顧名思義動態頁面指的是可以與服務器進行數據交互的頁面，這一點大家不必糾結。

簡單來說，靜態頁面寫好后什么樣就是什么樣，誰打開都是事先編輯好的內容，而動態頁面寫好后會隨著不同的訪問變換不同數據，動態頁面更像是一個頁面模板，隨時套用不同信息。

大部分網站中的頁面都是動態頁面。

如果使用靜態頁面做網站會出現什么問題呢？如果您有300篇博客文章，那您就要做300個靜態頁面來顯示，大型資訊網站信息量更加龐大，如果都用靜態頁面來做，占用的服務器空間也是龐大到不可想象。

網站中的動態頁面就解決了這個問題，例如一個簡單的網站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內容，我們稱之為模板。當您打開后，顯示的內容都是在數據庫中調出的。這樣，一個數據庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網站的基本運行模式。

例如在靜態頁面中顯示文字字數的代碼是這樣

<p>300字</p>

如果使用以php編寫的WordPress網站框架來動態顯示文章字數就是這樣

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>這條語句可以調取數據庫中文章字數的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數了。

無論是靜態頁面還是動態頁面，他們的核心內容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態頁面在HTML中插入信息，而動態頁面插入的是調取數據庫信息的語句。

因此，我們這個教程看起來是在做靜態頁面，但是我們學習的也是制作網站的基礎知識。

本教學學完能干什么？

第一，可以寫出靜態頁面。

第二，有能力讀懂他人寫好的頁面代碼。

第三，為繼續深入學習網站制作或更為炫酷的頁面制作打下基礎。

第四，掌握編程基礎，至少是基于JavaScript的。

我是大魚，致力于數字藝術技術分享！歡迎大家關注！祝愿大家2020年學有所成！

HTML學習目錄

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

一篇我們學習了如何使用zTree對靜態數據進行綁定并顯示。但是實際運用中數據都是數據庫或者經過計算后得到的，所以這一次我們將上次的Demo改為動態綁定。

數據表如下，其中平pId為0的是根節點

上一次講過zTree的回調事件中可以有許多函數，那么我們就利用點擊節點的回調函數進行動態綁定。但是問題來了，首次加載時網頁上并沒有節點，那么我們如何實現點擊節點加載數據呢？思路是這樣的，首次加載時用ajax向后臺發送一個空請求，點擊節點時ajax發送點擊節點的id。后臺收到請求，將請求參數取出，傳入數據庫查詢方法，此時進行判斷，若參數為空說明是首次加載，則執行的sql語句是select * from demo where pId='0' 即取出根節點，然后返回，而參數不為空則說明是點擊節點發出的請求，此時sql語句是select * from demo where pId='"+id+"'" 即取出父節點是我們點擊節點的節點。

下面上代碼

額，先看效果圖吧

前臺

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

</div>

</body>

var treeNodes;

var setting={

//外觀

view: {

showIcon: true, //設置是否顯示節點圖標

showLine: true, //設置是否顯示節點與節點之間的連線

showTitle: true, //設置是否顯示節點的title提示信息

fontCss : {color:"black",size:30}

//異步

async:{

enable: true,//true代表異步

url: "/Demo/DataProcessing",//異步獲取數據的地址

autoParam: ["id=id"]//傳遞id

//數據類型

data: {

simpleData: {

enable: true, //設置是否啟用簡單數據格式（json格式）

idKey: "id", //設置啟用簡單數據格式時id對應的屬性名稱（對應json數據中的key）

pidKey: "pId" //設置啟用簡單數據格式時parentId對應的屬性名稱,ztree根據id及pid層級關系構建樹結構

}

//回調事件

callback: {

//點擊節點事件

onClick: function(event, treeId, treeNode, clickFlag) {

// 判斷是否父節點，是父節點則ajax向后臺發送節點名稱以獲取子文件

if(treeNode.isParent){

//判斷節點是否折疊，若已折疊則請求子節點的數據，返回后展開

if(treeNode.collapse==true){

//ajax提交請求

$.ajax({

url: "/Demo/DataProcessing",//請求的action路徑

type:"post", //提交方式

async:false,//同步

dataType:"json",//數據格式是json

data:{'id':treeNode.id}, //傳遞被點擊節點的id

error: function(){//請求失敗后執行的事件

//請求成功后執行事件

success:function(data)

{

var jsondata=data;

//json為空說明沒有子節點，不用執行操作

if(jsondata==null || jsondata==""){ }

//否則子節點添加到父節點

else{

var treeObj=$.fn.zTree.getZTreeObj("demotree");

var parentZNode=treeObj.getNodeByParam("name",treeNode.name, null);//獲取指定父節點

newNode=treeObj.addNodes(parentZNode,jsondata, false);

}

});

}

};

//首次加載用ajax請求初始化

$(function(){

$.ajax({

async : false,

cache:false,

type: 'POST',

dataType : "json",

url: "/Demo/DataProcessing",//請求的action路徑

error: function () {//請求失敗處理函數

alert('請求失敗');

success:function(data){ //請求成功后處理函數。

treeNodes=data; //把后臺封裝好的簡單Json格式賦給treeNodes

}

});

var zTree;

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting, treeNodes);

});

</script>

</html>

后臺servlet

package myServlet;

import java.io.IOException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import Db.DbOperate;

import Model.Demo;

import com.alibaba.fastjson.JSON;

/**

* Servlet implementation class DataProcessing

@WebServlet("/DataProcessing")

public class DataProcessing extends HttpServlet {

private static final long serialVersionUID=1L;

/**

* @see HttpServlet#HttpServlet()

public DataProcessing() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

String id=request.getParameter("id");

List<Demo> list;

try {

list=new DbOperate().getDemo(id);

String jsonArr=JSON.toJSONString(list);

System.out.println(jsonArr);

//response.setContentType("application/json; charset=UTF-8");

response.setCharacterEncoding("UTF-8");

response.getWriter().print(jsonArr);

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

數據庫查詢

package Db;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.List;

import Model.Demo;

public class DbOperate {

private static String url="jdbc:mysql://localhost:3306/dir?rewriteBatchedStatements=true";

private static String user="root";

private static String password="";

public List<Demo> getDemo(String id) throws Exception {

Class.forName("com.mysql.jdbc.Driver");

System.out.print("!!!!!!!!!");

Connection conn=DriverManager.getConnection(url, user, password);

List<Demo> list=new ArrayList<Demo>();

Statement s=null;

String sql;

if(id==null||id==""){

sql="select * from demo where pId='0'";

}

else{

sql="select * from demo where pId='"+id+"'";

}

s=conn.createStatement();

ResultSet rs=s.executeQuery(sql);

while (rs.next()) {

list.add(new Demo(rs.getString("id"), rs.getString("name"), rs.getString("pId"), rs.getInt("isParent")));

}

if (s !=null) {

s.close();

}

if (conn !=null) {

conn.close();

}

return list;

}

實體類

package Model;

public class Demo {

private String id;

private String name;

private String pId;

private int isParent;

public Demo(String id, String name, String pId, int isParent) {

super();

this.id=id;

this.name=name;

this.pId=pId;

this.isParent=isParent;

}

public String getId() {

return id;

}

public void setId(String id) {

this.id=id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name=name;

}

public String getpId() {

return pId;

}

public void setpId(String pId) {

this.pId=pId;

}

public int getIsParent() {

return isParent;

}

public void setIsParent(int isParent) {

this.isParent=isParent;

}

源碼可以私信獲取，謝謝支持

在線咨詢

上一篇：網站css樣式中命名規范和應用原則
下一篇：HBase應用（一）：數據批量導入說明

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

zTree開源樹插件+html實現樹形目錄結構的展示

什么學習網頁制作？

制作網頁需要學習哪些技術？

網站與網頁的區別？

本教學學完能干什么？

HTML學習目錄

您的項目需求