zTree開(kāi)源樹(shù)插件+html實(shí)現(xiàn)樹(shù)形目錄結(jié)構(gòu)的展示

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

今天我們先來(lái)學(xué)習(xí)一下如何靜態(tài)加載數(shù)據(jù)并顯示出樹(shù)形目錄結(jié)構(gòu)。

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

然后創(chuàng)建一個(gè)顯示區(qū)域

</div>

然后定義json格式的數(shù)據(jù)

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是節(jié)點(diǎn)id，pId是父節(jié)點(diǎn)id，通過(guò)他們的關(guān)系來(lái)綁定

接著對(duì)樹(shù)進(jìn)行設(shè)置

var setting={//樹(shù)的設(shè)置

//外觀

view: {

showIcon: true, //設(shè)置是否顯示節(jié)點(diǎn)圖標(biāo)

showLine: true, //設(shè)置是否顯示節(jié)點(diǎn)與節(jié)點(diǎn)之間的連線

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

//數(shù)據(jù)類(lèi)型

data: {

simpleData: {

enable: true, //設(shè)置是否啟用簡(jiǎn)單數(shù)據(jù)格式（json格式）

}

//回調(diào)事件

callback: {//這里可以做很多回調(diào)，比如點(diǎn)擊，點(diǎn)擊前等等，在下一篇的動(dòng)態(tài)加載數(shù)據(jù)中會(huì)介紹

}

};

最后是對(duì)樹(shù)進(jìn)行初始化

var zTree;

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

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

});

效果圖如下

全部代碼如下

<!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是節(jié)點(diǎn)id，pId是父節(jié)點(diǎn)id，通過(guò)他們的關(guān)系來(lái)綁定

var setting={//樹(shù)的設(shè)置

//外觀

view: {

showIcon: true, //設(shè)置是否顯示節(jié)點(diǎn)圖標(biāo)

showLine: true, //設(shè)置是否顯示節(jié)點(diǎn)與節(jié)點(diǎn)之間的連線

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

//數(shù)據(jù)類(lèi)型

data: {

simpleData: {

enable: true, //設(shè)置是否啟用簡(jiǎn)單數(shù)據(jù)格式（json格式）

}

//回調(diào)事件

callback: {

}

};

var zTree;

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

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

});

</script>

</html>

最后謝謝大家觀看，下一篇是利用ajax和zTree動(dòng)態(tài)加載樹(shù)形目錄結(jié)構(gòu)，實(shí)現(xiàn)點(diǎn)擊一個(gè)文件夾加載一層。

對(duì)了！還有，zTree可以到它的官網(wǎng)下載，里面也包含了jQuery。再見(jiàn)！

什么學(xué)習(xí)網(wǎng)頁(yè)制作？

互聯(lián)網(wǎng)時(shí)代的今天，各種各樣的網(wǎng)頁(yè)充斥著我們的生活。只要使用瀏覽器，打開(kāi)的每一個(gè)頁(yè)面都可以稱(chēng)之為網(wǎng)頁(yè)。即使使用頭條這樣的APP，其內(nèi)容布局、展示的方法也脫胎于網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)的方法與原則。可以說(shuō)頁(yè)面的概念已經(jīng)遍布我們的信息化世界。

作為蕓蕓眾生中的一員，學(xué)習(xí)網(wǎng)頁(yè)制作對(duì)我們的事業(yè)、生活有怎樣的幫助呢？

第一，學(xué)習(xí)網(wǎng)頁(yè)制作有助于理解網(wǎng)絡(luò)信息的傳播運(yùn)行機(jī)制，即使通過(guò)本課程不能全面了解這些核心機(jī)制，也能為大家鋪墊下繼續(xù)深入學(xué)習(xí)的知識(shí)基礎(chǔ)。即使自己不必親自制作網(wǎng)頁(yè)，在使用第三方工具時(shí)，比如微信公眾號(hào)、微信小程序或者其他自動(dòng)網(wǎng)頁(yè)或網(wǎng)站生成工具時(shí)也會(huì)比沒(méi)有基礎(chǔ)的人更快的掌握這些工具。

第二，學(xué)好網(wǎng)頁(yè)制作是制作網(wǎng)站的基礎(chǔ)，如果您因?yàn)槭聵I(yè)需要或者個(gè)人愛(ài)好打算制作自己的網(wǎng)站或博客，無(wú)論是打算使用php還是Java還是Python去構(gòu)建您的網(wǎng)站，精通網(wǎng)頁(yè)制作技術(shù)是您的第一塊技術(shù)基石。

第三，如果您打算學(xué)習(xí)網(wǎng)絡(luò)爬蟲(chóng)來(lái)分析一些網(wǎng)絡(luò)數(shù)據(jù)，了解網(wǎng)頁(yè)頁(yè)面構(gòu)成也是必要基礎(chǔ)，至少您要知道一個(gè)網(wǎng)頁(yè)頁(yè)面中每個(gè)標(biāo)簽中對(duì)應(yīng)的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想學(xué)習(xí)編程，但是缺少相應(yīng)的基礎(chǔ)知識(shí)，看不懂復(fù)雜的C語(yǔ)言教學(xué)，那么從網(wǎng)頁(yè)制作入手嘗試?yán)斫饩幊痰恼Z(yǔ)法也是一個(gè)很不錯(cuò)的選擇。

除此之外，瀏覽器可以做的事情越來(lái)越多，比如webgl的出現(xiàn)，可以讓我們通過(guò)瀏覽器構(gòu)建3d世界，無(wú)論是虛擬現(xiàn)實(shí)（VR）還是增強(qiáng)現(xiàn)實(shí)（AR）都有很多開(kāi)源免費(fèi)的解決方案。TensorFlow的JavaScript版本的出現(xiàn)，讓我們可以通過(guò)結(jié)合瀏覽器學(xué)習(xí)使用人工智能技術(shù)，且非常容易實(shí)現(xiàn)。

所以，新的一年里，我打算做網(wǎng)頁(yè)制作的學(xué)習(xí)教程，讓更多沒(méi)有基礎(chǔ)卻對(duì)網(wǎng)絡(luò)技術(shù)感興趣的小伙伴能加入進(jìn)來(lái)。

制作網(wǎng)頁(yè)需要學(xué)習(xí)哪些技術(shù)？

簡(jiǎn)單來(lái)說(shuō)學(xué)習(xí)網(wǎng)頁(yè)制作需要掌握三門(mén)技術(shù)。

第一，也是最基礎(chǔ)最核心的內(nèi)容是HTML超文本標(biāo)記語(yǔ)言。大家不必糾結(jié)HTML到底是什么，但是一定要記住它能干什么。HTML通俗來(lái)說(shuō)可以比喻成容器。大家試想，網(wǎng)頁(yè)里都有哪些內(nèi)容呢？

一般網(wǎng)頁(yè)中都會(huì)有文字、圖片、聲音、視頻、表格等內(nèi)容，這些內(nèi)容就是靠HTML中的標(biāo)簽添加進(jìn)頁(yè)面的。

所以說(shuō)HTML這個(gè)工具就是個(gè)容器，我們使用HTML標(biāo)簽語(yǔ)言為網(wǎng)頁(yè)添加所有需要的信息內(nèi)容。

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

為了讓這個(gè)頁(yè)面看起來(lái)美觀些，我們?yōu)槠涮砑觕ss樣式表。添加后如圖所示：

我們可以看出來(lái)，CSS讓標(biāo)題文字換了顏色，也居中顯示了，背景也變成了藍(lán)色。

第三，JavaScript，這個(gè)工具相比HTML和CSS來(lái)講是最難學(xué)習(xí)的，學(xué)習(xí)JavaScript就是在學(xué)習(xí)編程了。它雖然只是個(gè)腳本語(yǔ)言，但是用到的知識(shí)和其他編程語(yǔ)言相差不大。

那JavaScript能干什么呢？

首先，它能為頁(yè)面中添加很多交互效果。舉個(gè)例子，我們常見(jiàn)的圖片翻頁(yè)、輪播很多就是基于JavaScript腳本實(shí)現(xiàn)的。

其次，JavaScript可以為傳統(tǒng)頁(yè)面擴(kuò)展出很多新功能，例如結(jié)合three.js我們可以很容易的在頁(yè)面中構(gòu)建三維空間，或者實(shí)現(xiàn)一些3d游戲或其他三維動(dòng)態(tài)演示效果。舉個(gè)例子（https://renaultespace.littleworkshop.fr/），打開(kāi)可能略慢。3d展示的汽車(chē)廣告是不是很酷！

再次，JavaScript可以以網(wǎng)頁(yè)為基礎(chǔ)，實(shí)現(xiàn)各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個(gè)開(kāi)源免費(fèi)網(wǎng)頁(yè)游戲制作庫(kù)。phaser官網(wǎng)：http://phaser.io/

JavaScript為網(wǎng)頁(yè)的功能拓展提供了很多可能性，無(wú)論是3d顯示還是游戲制作還是未來(lái)的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁(yè)面的接口，這也是學(xué)習(xí)難度比較大的原因。不過(guò)只要堅(jiān)持下去一定能學(xué)通的！

網(wǎng)站與網(wǎng)頁(yè)的區(qū)別？

網(wǎng)頁(yè)是指我們看到的單個(gè)頁(yè)面。這些頁(yè)面分為靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面兩種。靜態(tài)頁(yè)面指的是不能與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁(yè)面，顧名思義動(dòng)態(tài)頁(yè)面指的是可以與服務(wù)器進(jìn)行數(shù)據(jù)交互的頁(yè)面，這一點(diǎn)大家不必糾結(jié)。

簡(jiǎn)單來(lái)說(shuō)，靜態(tài)頁(yè)面寫(xiě)好后什么樣就是什么樣，誰(shuí)打開(kāi)都是事先編輯好的內(nèi)容，而動(dòng)態(tài)頁(yè)面寫(xiě)好后會(huì)隨著不同的訪問(wèn)變換不同數(shù)據(jù)，動(dòng)態(tài)頁(yè)面更像是一個(gè)頁(yè)面模板，隨時(shí)套用不同信息。

大部分網(wǎng)站中的頁(yè)面都是動(dòng)態(tài)頁(yè)面。

如果使用靜態(tài)頁(yè)面做網(wǎng)站會(huì)出現(xiàn)什么問(wèn)題呢？如果您有300篇博客文章，那您就要做300個(gè)靜態(tài)頁(yè)面來(lái)顯示，大型資訊網(wǎng)站信息量更加龐大，如果都用靜態(tài)頁(yè)面來(lái)做，占用的服務(wù)器空間也是龐大到不可想象。

網(wǎng)站中的動(dòng)態(tài)頁(yè)面就解決了這個(gè)問(wèn)題，例如一個(gè)簡(jiǎn)單的網(wǎng)站我們只需一個(gè)主頁(yè)、文章頁(yè)、搜索頁(yè)基本上就可以了，這些頁(yè)面中沒(méi)有具體內(nèi)容，我們稱(chēng)之為模板。當(dāng)您打開(kāi)后，顯示的內(nèi)容都是在數(shù)據(jù)庫(kù)中調(diào)出的。這樣，一個(gè)數(shù)據(jù)庫(kù)用來(lái)存儲(chǔ)壓縮過(guò)的精簡(jiǎn)信息，這些信息通過(guò)不同頁(yè)面模板顯示在用戶面前就成為網(wǎng)站的基本運(yùn)行模式。

例如在靜態(tài)頁(yè)面中顯示文字字?jǐn)?shù)的代碼是這樣

<p>300字</p>

如果使用以php編寫(xiě)的WordPress網(wǎng)站框架來(lái)動(dòng)態(tài)顯示文章字?jǐn)?shù)就是這樣

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

<?php echo zm_count_words($text); ?>這條語(yǔ)句可以調(diào)取數(shù)據(jù)庫(kù)中文章字?jǐn)?shù)的記錄并顯示出來(lái)。這也我們通過(guò)這一條語(yǔ)句就可以顯示不同文章的字?jǐn)?shù)了。

無(wú)論是靜態(tài)頁(yè)面還是動(dòng)態(tài)頁(yè)面，他們的核心內(nèi)容都是一樣的，HTML，CSS，JavaScript都是必修知識(shí)。只是靜態(tài)頁(yè)面在HTML中插入信息，而動(dòng)態(tài)頁(yè)面插入的是調(diào)取數(shù)據(jù)庫(kù)信息的語(yǔ)句。

因此，我們這個(gè)教程看起來(lái)是在做靜態(tài)頁(yè)面，但是我們學(xué)習(xí)的也是制作網(wǎng)站的基礎(chǔ)知識(shí)。

本教學(xué)學(xué)完能干什么？

第一，可以寫(xiě)出靜態(tài)頁(yè)面。

第二，有能力讀懂他人寫(xiě)好的頁(yè)面代碼。

第三，為繼續(xù)深入學(xué)習(xí)網(wǎng)站制作或更為炫酷的頁(yè)面制作打下基礎(chǔ)。

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

我是大魚(yú)，致力于數(shù)字藝術(shù)技術(shù)分享！歡迎大家關(guān)注！祝愿大家2020年學(xué)有所成！

HTML學(xué)習(xí)目錄

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

一篇我們學(xué)習(xí)了如何使用zTree對(duì)靜態(tài)數(shù)據(jù)進(jìn)行綁定并顯示。但是實(shí)際運(yùn)用中數(shù)據(jù)都是數(shù)據(jù)庫(kù)或者經(jīng)過(guò)計(jì)算后得到的，所以這一次我們將上次的Demo改為動(dòng)態(tài)綁定。

數(shù)據(jù)表如下，其中平pId為0的是根節(jié)點(diǎn)

上一次講過(guò)zTree的回調(diào)事件中可以有許多函數(shù)，那么我們就利用點(diǎn)擊節(jié)點(diǎn)的回調(diào)函數(shù)進(jìn)行動(dòng)態(tài)綁定。但是問(wèn)題來(lái)了，首次加載時(shí)網(wǎng)頁(yè)上并沒(méi)有節(jié)點(diǎn)，那么我們?nèi)绾螌?shí)現(xiàn)點(diǎn)擊節(jié)點(diǎn)加載數(shù)據(jù)呢？思路是這樣的，首次加載時(shí)用ajax向后臺(tái)發(fā)送一個(gè)空請(qǐng)求，點(diǎn)擊節(jié)點(diǎn)時(shí)ajax發(fā)送點(diǎn)擊節(jié)點(diǎn)的id。后臺(tái)收到請(qǐng)求，將請(qǐng)求參數(shù)取出，傳入數(shù)據(jù)庫(kù)查詢方法，此時(shí)進(jìn)行判斷，若參數(shù)為空說(shuō)明是首次加載，則執(zhí)行的sql語(yǔ)句是select * from demo where pId='0' 即取出根節(jié)點(diǎn)，然后返回，而參數(shù)不為空則說(shuō)明是點(diǎn)擊節(jié)點(diǎn)發(fā)出的請(qǐng)求，此時(shí)sql語(yǔ)句是select * from demo where pId='"+id+"'" 即取出父節(jié)點(diǎn)是我們點(diǎn)擊節(jié)點(diǎn)的節(jié)點(diǎn)。

下面上代碼

額，先看效果圖吧

前臺(tái)

<!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, //設(shè)置是否顯示節(jié)點(diǎn)圖標(biāo)

showLine: true, //設(shè)置是否顯示節(jié)點(diǎn)與節(jié)點(diǎn)之間的連線

showTitle: true, //設(shè)置是否顯示節(jié)點(diǎn)的title提示信息

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

//異步

async:{

enable: true,//true代表異步

url: "/Demo/DataProcessing",//異步獲取數(shù)據(jù)的地址

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

//數(shù)據(jù)類(lèi)型

data: {

simpleData: {

enable: true, //設(shè)置是否啟用簡(jiǎn)單數(shù)據(jù)格式（json格式）

idKey: "id", //設(shè)置啟用簡(jiǎn)單數(shù)據(jù)格式時(shí)id對(duì)應(yīng)的屬性名稱(chēng)（對(duì)應(yīng)json數(shù)據(jù)中的key）

pidKey: "pId" //設(shè)置啟用簡(jiǎn)單數(shù)據(jù)格式時(shí)parentId對(duì)應(yīng)的屬性名稱(chēng),ztree根據(jù)id及pid層級(jí)關(guān)系構(gòu)建樹(shù)結(jié)構(gòu)

}

//回調(diào)事件

callback: {

//點(diǎn)擊節(jié)點(diǎn)事件

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

// 判斷是否父節(jié)點(diǎn) ，是父節(jié)點(diǎn)則ajax向后臺(tái)發(fā)送節(jié)點(diǎn)名稱(chēng)以獲取子文件

if(treeNode.isParent){

//判斷節(jié)點(diǎn)是否折疊，若已折疊則請(qǐng)求子節(jié)點(diǎn)的數(shù)據(jù)，返回后展開(kāi)

if(treeNode.collapse==true){

//ajax提交請(qǐng)求

$.ajax({

url: "/Demo/DataProcessing",//請(qǐng)求的action路徑

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

async:false,//同步

dataType:"json",//數(shù)據(jù)格式是json

data:{'id':treeNode.id}, //傳遞被點(diǎn)擊節(jié)點(diǎn)的id

error: function(){//請(qǐng)求失敗后執(zhí)行的事件

//請(qǐng)求成功后執(zhí)行事件

success:function(data)

{

var jsondata=data;

//json為空說(shuō)明沒(méi)有子節(jié)點(diǎn)，不用執(zhí)行操作

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

//否則子節(jié)點(diǎn)添加到父節(jié)點(diǎn)

else{

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

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

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

}

});

}

};

//首次加載用ajax請(qǐng)求初始化

$(function(){

$.ajax({

async : false,

cache:false,

type: 'POST',

dataType : "json",

url: "/Demo/DataProcessing",//請(qǐng)求的action路徑

error: function () {//請(qǐng)求失敗處理函數(shù)

alert('請(qǐng)求失敗');

success:function(data){ //請(qǐng)求成功后處理函數(shù)。

treeNodes=data; //把后臺(tái)封裝好的簡(jiǎn)單Json格式賦給treeNodes

}

});

var zTree;

$(document).ready(function(){

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

});

</script>

</html>

后臺(tái)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();

}

數(shù)據(jù)庫(kù)查詢

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;

}

實(shí)體類(lèi)

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;

}

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

在線咨詢

上一篇：網(wǎng)站css樣式中命名規(guī)范和應(yīng)用原則
下一篇：HBase應(yīng)用（一）：數(shù)據(jù)批量導(dǎo)入說(shuō)明

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

zTree開(kāi)源樹(shù)插件+html實(shí)現(xiàn)樹(shù)形目錄結(jié)構(gòu)的展示

什么學(xué)習(xí)網(wǎng)頁(yè)制作？

制作網(wǎng)頁(yè)需要學(xué)習(xí)哪些技術(shù)？

網(wǎng)站與網(wǎng)頁(yè)的區(qū)別？

本教學(xué)學(xué)完能干什么？

HTML學(xué)習(xí)目錄

您的項(xiàng)目需求