jstree学习笔记_H5之家 - 中国HTML5教程资源分享第一站

> WEB开发 > JavaScript > 正文

编程大巴

jstree学习笔记

作者：发布日期：2013-04-24 17:39:36

Tag标签：jstree

jstree 是一个好用的树元件。基于 javascrpt 打造，适用于不同的浏览器。它被打包成 jquery 的插件，同时，他宣称绝对免费。

树元件在现在的视窗元件非常重要，你在档案总管的左侧一定会看到，没有了它，要在各目录间移动，将会非常不方便。

接下来，我把我学习如何使用这个元件的过程整理一下，就像是官方文件阅读指南一般，而这过程，刚好就是由浅而深，由易而难的学习过程，希望可以帮助到有需要的人走一条比较平缓的学习之路。

在页面引入
官网在文件的 core 页有说明

其实，第一件事是下载 jstree 的档案。在首页的左上角有个绿色的下载按钮，那里打包的才符合文件所说。我曾经因为那个下载按钮失效而去 github 下载，照文件来做发现是不能用的。原因我没找出来，我想因为我不是 javascript 专家，所以没办法找出原因。

回到正题，在页面引入，要先把档案下载回来，现在是 jstree-v.pre1.0.zip。内容如下：

里面的 jquery.jstree.js 就是了。

因为 jstree 写成 jquery 的 plugin，所以第一个要引入的是 jquery。

若 jquery 你放在别的位置，就不用照抄。

接下来就是引入 jstree。有两个版本，功能都一样，只是一个 size 比较大，一个比较小。

其实任何位置都可以，只要你清楚改位置之后的影响。文件上有提到，档名尽量不要改，因为像是 themes 插件的档案路径侦测会用到。如果非改不可，多数的插件有选项可以手动设定路径。(也就是自动路径侦测失效，只能自己手动设定各插件会用到路径。)

很贴心的是，jstree 会需要的插件，若是有缺少引入，它会主动告知。

准备资料
在使用 jstree 之前要准备资料，才能让 jstree 显示。我一开始一头雾水，不知道在哪里有说明如何准备资料给jstree。于是在它的 demo 网页挖，用 chrome 的开发者工具看。后来发现其实有说明，只是在不同的地方。

jstree 可以用的资料格式有三种。HTML、JSON、XML。要读入资料时，要开启不同的 jstree 插件。

HTML
官网文件在

要使用 HTML 当资料来源，需要开启 HTML_DATA 插件。

资料的格式如下：

<li> <a href="some_value_here">Node title</a>  <ul>  </ul> </li>

jstree 会读到资料后改变资料的结构。

<li class="[ jstree-open | jstree-closed | jstree-leaf ]">  <ins class="jstree-icon"> </ins> <a href="some_value_here">  <ins class="jstree-icon"> </ins> Node title </a> </li>

因此，底下是我做出来最简单的范例，资料已经在网页准备好的。

<html> <script src="js/jquery-1.7.2.js"></script> <script src="js/jquery.jstree.js"></script> <script> $(document).ready(function () { $("#demo1").jstree({ "plugins" : [ "themes", "html_data" ] }); }); </script> <body> <div id="demo1" class="demo"> <ul> <li> <a href="#">Root node 1</a> <ul> <li> <a href="#">Child node 1</a> </li> <li> <a href="#">Child node 2</a> </li> </ul> </li> <li> <a href="#">Root node 2</a> </li> </ul> </div> </body> </html>

执行结果：(如果看起来少个目录图示，我就是这样，因为拿别人的网页来改的。那可能拿到旧的 css，一定要在下载下来的 zip 拿整包的 icon 及 css。)

这样就已经是可以点击张开及收合的功能。

若是要改用设定的方式呢？以下是范例。

<html> <script src="js/jquery-1.7.2.js"></script> <script src="js/jquery.jstree.js"></script> <script> $(document).ready(function () { $("#demo1").jstree({ "core" : { "initially_open" : [ "root" ] }, "plugins" : [ "themes", "html_data" ], "html_data" : { "data" : '<li id="root"><a href="#">Root node 1</a><ul><li><a href="#">Child node 1</a></li><li><a href="#">Child node 2</a></li></ul></li><li><a href="#">Root node 2</a></li>' } }); }); </script> <body> <div id="demo1" class="demo"> </div> </body> </html>

这范例是参考官方文件的，里面顺手交了一招核心功能的设定，预定打开的节点。

"core" : { "initially_open" : [ "root" ] }

该设定要传入的是一个字串阵列，其内容是节点(<li>)的 id 值。要小心 id 设定时不能重复，在一个网页内要唯一。

使用 ajax 方式，我想等三种方式的基本都讲完再说。因为他们有共通的奇妙之处。

json
官方文件在这