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学习目录

您的项目需求