要使用 json 当资料来源，要把 json_data 插件打开。基本的 json 资料结构要长成以下的样子。
{ "data" : "node_title", // omit `attr` if not needed; the `attr` object gets passed to the jQuery `attr` function "attr" : { "id" : "node_identificator", "some-other-attribute" : "attribute_value" }, // `state` and `children` are only used for NON-leaf nodes "state" : "closed", // or "open", defaults to "closed" "children" : [ /* an array of child nodes objects */ ] }其中，data 是节点名称，也就是 ui 上看到的名称。attr 是给 jquery 的 attr 用的，若是有些东西要操作，id 很重要，那么就必须在这里设定，这里的属性会设定成 <li> 的属性。state 是预设打开或关闭此结点。children 就是放子节点的位置。
<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", "json_data" ], "json_data" : { "data" : [ { "data":"Root node 1", "attr":{"id":"node_1"}, "state":"open", "children":[ { "data":"Child node 1", "attr":{"id":"node_2"}, "state":"open" }, { "data":{ "title":"Child node 2", "attr":{"href":"node2.html"} }, "attr":{"id":"node_3"}, "state":"open" } ] }, { "data":"Root node 1", "attr":{"id":"node_4"}, "state":"closed", "children":[] } ] } }); }); </script> <body> <div id="demo1" class="demo"> </div> </body> </html>
执行起来就跟之前的画面一样。
还记得，经过 jstree 处理过的节点的 html 样子吗？在 <li> 里面有 <a>，若是要设定 <a> 的属性，例如 href，那么就要如同上面的 Child node 2 的设定方式。注意看 Child node 1 与 Child node 2 的不同，就在于 data 的值，一个是字串，一个是物件。物件里面的 title 属性就是节点的名称，物件里面的 attr 属性就是 <a> 的 attr，物件里面的 icon 属性，若有 / 则会变成背景，不然就当 class 的值。
{ "data":"Child node 1", "attr":{"id":"node_2"}, "state":"open" }, { "data":{ "title":"Child node 2", "attr":{"href":"node2.html"} }, "attr":{"id":"node_3"}, "state":"open" }
XML
与其他两种方式相比，使用 XML，有两种表示方式，一种是阶层式。一种是平坦式，怎么说呢？
它的结构如下：
<root> <item id="root_1" parent_id="0" state="closed"> <content> <name><![CDATA[Node 1]]></name> </content> </item> <item id="node_2" parent_id="root_1"> <content> <name><![CDATA[Node 2]]></name> </content> </item> </root>
每个节点在 xml 里是放在同一层，要组合成树，就靠 parent_id 来连。这种方法对于资料是存放在资料表里的人来说，是一大福音，代表自己可以少写一段组合成树的程式。
这里的规则也很简单，所有在 item 的属性，都会转到 <li> 的属性。所有在 name 的属性，都会转到 <a> 的属性。
为了避免使用到 xml 的保留字元，name 里面的文字节点内容要用 CDATA 夹住。
厉害的 ajax 属性
在三个资料来源的设定，ajax 的设定非常灵活。
在 里面有个例子，「Using the ajax config option」。你如果去点开 Node 1，它底下长出 Node 1， Node2，再点开底下的 Node 1，又再长出两个，越点越多…。
ajax 里面的 data 属性若是设定成一个 function，可以在里面获得被点击的节点，也就可以拿到被点击点的 id。在这 function 回传的资料，会被当成 ajax 的 data 项目回传给 server。
我写了个范例如下：
相关文章
精彩导读
热门资讯
关注我们
