由于工作需要,写一个树状结构,本打算使用ext,但是api过多,内容过于复杂,学习成本比较高,最终还是选择放弃了。最终选择了dhtmlxtree 这个插件,下面我简单介绍一下自己学习的东西。
?
从网上下载dhtmlxtree 地址是?http://dhtmlx.com/docs/products/dhtmlxTree/
?
解压zip包,进入dhtmlxTree目录下面的samples中的内容是无法显示效果的,原因我还不是很清楚,为了能看到sample效果,我们可以放到web容器中(如tomcat),然后通过web容器访问就可以了。
?
快速入门
1、把[解压dthmlxtree.zip包目录]dhtmlxTree\samples下的common目录考入到web工程中
2、把如下文件也引入到web工程中
? ? 1)dhtmlxcommon.js
? ? 2)dhtmlxtree.js?
? ? 3)dhtmlxtree.css ??---- 前三个js是创建tree的基础js,必须要引入的
? ? 4)dhtmlxtree_json.js ---- 使用json数据需要引入的js
? ? 5)dhtmlxtree_start.js ---- 如何是想对网页中的标签改成tree格式,就需要引入这个js
?
引入的结构如下图所示:
?
?
引入本地的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> <!-- 这个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"); //导入本地的数据(是xml格式的) tree.setXMLAutoLoading("dhtmlxtree/common/tree4.xml"); tree.loadXML("dhtmlxtree/common/tree4.xml"); </script> </body> </html>?
?指明xml文件的内容
<?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" ></ite