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

<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", "json_data" ], "json_data" : { "ajax":{ "url":"ajax.html", "data":function(n){ return {id : n.attr ? n.attr("id") : 0 }; } } } }); }); </script> <body> <div id="demo1" class="demo"> </div> </body> </html>

要准备一个 ajax.html 档，其实里面内容是 json 格式(反正 iis 不在乎)

[ { "data":"Root node 1", "attr":{"id":"node_1"}, "state":"open", "children":[ { "data":"Child node 1", "attr":{"id":"node_2"}, "state":"closed" }, { "data":{ "title":"Child node 2", "attr":{"href":"node2.html"} }, "attr":{"id":"node_3"}, "state":"closed" } ] }, { "data":"Root node 1", "attr":{"id":"node_4"}, "state":"closed", "children":[] } ]

依靠范例中的写法，每次点开节点时，便会有 request 送到 server。data function 回传的资料都当成 querystring 送出。

同时，ajax 里面的 url 若是设定成 function，那它也可以在里面得到被点击的节点，同时，this 在那个 function 里代表的是 jstree 的实例。在那里面回传的，会被当做是 url，于是就可动态产生 url，在采用 REST 开发的网站可以用 /get_children/node_2 之类的拿到资料。

以下是我的范例：

<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", "json_data" ], "json_data" : { "ajax":{ "url":function(n){ var _id = n.attr ? n.attr("id"):0; return _id + "/ajax.html" } } } }); }); </script> <body> <div id="demo1" class="demo"> </div> </body> </html>

结论
在这里先快速带到可以看得见的例子，把引入，资料准备的各种方式写清楚，就不会一直 try and error 都看不到东西 (就是说我自己)。同时，了解 ajax 属性的用法，可以善用其特性提高效能及使用者经验。