由于工作需要，寫一個(gè)樹狀結(jié)構(gòu)，本打算使用ext，但是api過多，內(nèi)容過于復(fù)雜，學(xué)習(xí)成本比較高，最終還是選擇放棄了。最終選擇了dhtmlxtree 這個(gè)插件，下面我簡(jiǎn)單介紹一下自己學(xué)習(xí)的東西。
?
從網(wǎng)上下載dhtmlxtree 地址是? http://dhtmlx.com/docs/products/dhtmlxTree/
?
解壓zip包，進(jìn)入dhtmlxTree目錄下面的samples中的內(nèi)容是無法顯示效果的，原因我還不是很清楚， 為了能看到sample效果，我們可以放到web容器中（如tomcat），然后通過web容器訪問就可以了 。
?
快速入門
1、把[解壓dthmlxtree.zip包目錄]dhtmlxTree\samples下的common目錄考入到web工程中
2、把如下文件也引入到web工程中
? ? 1）dhtmlxcommon.js
? ? 2）dhtmlxtree.js?
? ? 3）dhtmlxtree.css ??---- 前三個(gè)js是創(chuàng)建tree的基礎(chǔ)js,必須要引入的
? ? 4）dhtmlxtree_json.js ---- 使用json數(shù)據(jù)需要引入的js
? ? 5）dhtmlxtree_start.js ---- 如何是想對(duì)網(wǎng)頁中的標(biāo)簽改成tree格式，就需要引入這個(gè)js
?
引入的結(jié)構(gòu)如下圖所示：
?
?
引入本地的xml文件
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<!-- 引入必需的css和js -->
<link rel="STYLESHEET" type="text/css"
href="dhtmlxtree/dhtmlxtree.css">
<script src="dhtmlxtree/dhtmlxcommon.js"></script>
<script src="dhtmlxtree/dhtmlxtree.js"></script>
<!-- 這個(gè)div使用來裝載tree的容器 -->
<div id="treeboxbox_tree"
style="width: 250px; height: 218px; background-color: #f5f5f5; border: 1px solid Silver;"></div>
<script>
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//選擇顯示的皮膚
tree.setSkin('dhx_skyblue');
//告訴dhtmlxtree顯示的圖片在什么位置
tree.setImagePath("dhtmlxtree/common/images/");
tree.enableDragAndDrop(0);
tree.enableTreeLines(false);
tree.setImageArrays("plus","","","","plus.gif");
tree.setImageArrays("minus","","","","minus.gif");
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
//導(dǎo)入本地的數(shù)據(jù)（是xml格式的）
tree.setXMLAutoLoading("dhtmlxtree/common/tree4.xml");
tree.loadXML("dhtmlxtree/common/tree4.xml");
</script>
</body>
</html>
?
?指明xml文件的內(nèi)容
<?xml version='1.0' encoding='iso-8859-1'?>
<tree id="0">
<item text="Books" id="books" open="1" call="1" select="1">
<item text="Mystery & Thrillers" id="mystery" >
<item text="Lawrence Block" id="lb" >
<item text="All the Flowers Are Dying" id="lb_1" />
<item text="The Burglar on the Prowl" id="lb_2" />
<item text="The Plot Thickens" id="lb_3" />
<item text="Grifter's Game" id="lb_4" />
<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
</item>
<item text="Robert Crais" id="rc" >
<item text="The Forgotten Man" id="rc_1" />
<item text="Stalking the Angel" id="rc_2" />
<item text="Free Fall" id="rc_3" />
<item text="Sunset Express" id="rc_4" />
<item text="Hostage" id="rc_5" />
</item>
<item text="Ian Rankin" id="ir" ></item>
<item text="James Patterson" id="jp" ></item>
<item text="Nancy Atherton" id="na" ></item>
</item>
<item text="History" id="history" >
<item text="John Mack Faragher" id="jmf" ></item>
<item text="Jim Dwyer" id="jd" ></item>
<item text="Larry Schweikart" id="ls" ></item>
<item text="R. Lee Ermey" id="rle" ></item>
</item>
<item text="Horror" id="horror" open="1" >
<item text="Stephen King" id="sk" ></item>
<item text="Dan Brown" id="db" >
<item text="Angels & Demons" id="db_1" />
<item text="Deception Point" id="db_2" />
<item text="Digital Fortress" id="db_3" />
<item text="The Da Vinci Code" id="db_4" />
<item text="Deception Point" id="db_5" />
</item>
<item text="Mary Janice Davidson" id="mjd" ></item>
<item text="Katie Macalister" id="km" ></item>
</item>
<item text="Science Fiction & Fantasy" id="fantasy" >
<item text="Audrey Niffenegger" id="af" ></item>
<item text="Philip Roth" id="pr" ></item>
</item>
<item text="Sport" id="sport" >
<item text="Bill Reynolds" id="br" ></item>
</item>
<item text="Teens" id="teens" >
<item text="Joss Whedon" id="jw" >
<item text="Astonishing X-Men" id="jw_1" />
<item text="Joss Whedon: The Genius Behind Buffy" id="jw_2" />
<item text="Fray" id="jw_3" />
<item text="Tales Of The Vampires" id="jw_4" />
<item text="The Harvest" id="jw_5" />
</item>
<item text="Meg Cabot" id="mc" ></item>
<item text="Garth Nix" id="gn" ></item>
<item text="Ann Brashares" id="ab" ></item>
</item>
</item>
</tree>
?
通過頁面的html將html代碼轉(zhuǎn)換為tree結(jié)構(gòu)
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>
Easy skinable design
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="STYLESHEET" type="text/css" href="dhtmlxtree/dhtmlxtree.css">
<script src="dhtmlxtree/dhtmlxcommon.js"></script>
<script src="dhtmlxtree/dhtmlxtree.js"></script>
<script src="dhtmlxtree/dhtmlxtree_start.js"></script>
</head>
<body>
<!--
<div class="dhtmlxTree" id="treeboxbox_tree" setImagePath="dhtmlxtree/common/images/"
style="width: 250px; height: 218px; overflow: auto;">
<ul>
<li>
Root
<ul>
<li>
Child1
<ul>
<li>
Child 1-1
</li>
</ul>
<li>
Child2
</li>
<li>
<b>
Bold
</b>
<i>
Italic
</i>
</li>
</ul>
</li>
</ul>
</div>
-->
<div id="treeboxbox_tree" setImagePath="dhtmlxtree/common/images/" class="dhtmlxTree">
<xmp>
<item text="Root" open="1" id="11">
<item text="Child1" select="1" open="1" id="12">
<item text="Child1-1" id="13" />
</item>
<item text="Child2" id="14" />
<item id="15" text="Text" />
</item>
</xmp>
</div>
</body>
</html>
?注意：
?
1、一定要引入 dhtmlxtree_start.js文件，當(dāng)然，基礎(chǔ)的js也是不能少的。
2、在target DIV中需要指明 class 和 setImagePath兩個(gè)屬性的值
3、我們不需要像引入xml一樣再次創(chuàng)建dhtmlXTreeObject對(duì)象，即不需要再次寫JS代碼了
4、上面提供了兩種方式都可以生產(chǎn)一棵樹——（ul li標(biāo)簽）（xmp item標(biāo)簽）
?
下面介紹如何使用json
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<link rel="STYLESHEET" type="text/css"
href="dhtmlxtree/dhtmlxtree.css">
<script src="dhtmlxtree/dhtmlxcommon.js"></script>
<script src="dhtmlxtree/dhtmlxtree.js"></script>
<!-- 如果是使用json格式就必須引入 dhtmlxtree_json.js文件-->
<script src="dhtmlxtree/dhtmlxtree_json.js"></script>
<div id="treeboxbox_tree"
style="width: 250px; height: 218px; background-color: #f5f5f5; border: 1px solid Silver;"></div>
<script>
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("dhtmlxtree/common/images/");
tree.enableDragAndDrop(0);
tree.enableTreeLines(false);
tree.setImageArrays("plus","","","","plus.gif");
tree.setImageArrays("minus","","","","minus.gif");
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
var json = {
id: 0,
item:[
{
id:"X1",
text:"一",
item:[
{
id:"X11",
text:"一一"
},
{
id:"X12",
text:"一二"
}
]
},
{
id:"X2",
text:"二",
item:[
{
id:"X21",
text:"二一"
},
{
id:"X22",
text:"二二"
}
]
}
]
};
var jsondata = {id:0, item:[{id:1,text:"first"},{id:2, text:"middle", item:[{id:"21", text:"child"}]},{id:3,text:"last"}]};
tree.loadJSONObject(json,function(){
});
</script>
</body>
</html>
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
