jstree插件简介（一）

在用jsTree时可以使用几种插件来支持我们的行为，下面我简要的介绍下各个插件的使用。

1：html_data plugin。

html_data即我们要渲染的数据是用html格式来完成tree的展示。其中所要渲染的html数据可以来自直接的html文本，例如

[javascript]  view plain copy

1. $(function () {  
2.     $("#demo2").jstree({   
3.         "core" : { "initially_open" : [ "root" ] },  
4.         "html_data" : {  
5.             "data" : "<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>"  
6.         },  
7.         "plugins" : [ "themes", "html_data" ]  
8.     });  
9. });  

也可以是使用json取得的html，

[javascript]  view plain copy

1. $(function () {  
2.     $("#demo3").jstree({   
3.         "html_data" : {  
4.             "ajax" : {  
5.                 "url" : "/static/v.1.0pre/_docs/_html_data.html",  
6.                 "data" : function (n) {   
7.                     return { id : n.attr ? n.attr("id") : 0 };   
8.                 }  
9.             }  
10.         },  
11.         "plugins" : [ "themes", "html_data" ]  
12.     });  
13. });  

也可以是两种情况的混合体。

我模拟了第一种情况，在http://download.csdn.net/detail/yizhizouxiaqu/4211029  html_data.html中展示。

2、json_data:使用json格式的数据来展示树结构，这是我使用的方式

这种方式也可以使用固定的json数据，也可以从后台取得json数据，还可以是两者的混合，例子见http://download.csdn.net/detail/yizhizouxiaqu/4211029  json_data.html

这里提到一个参数progressive_render，当有很多嵌套时可以把这个值设置为true。据说很有用

例如

[javascript]  view plain copy

1. $(function () {  
2.     $("#demo3").jstree({   
3.         "json_data" : {  
4.             "data" : [  
5.                 {   
6.                     "data" : "A node",   
7.                     "children" : [ "Child 1", "Child 2" ]  
8.                 },  
9.                 {   
10.                     "attr" : { "id" : "li.node.id2" },   
11.                     "data" : {   
12.                         "title" : "Long format demo",   
13.                         "attr" : { "href" : "#" }   
14.                     }   
15.                 }  
16.             ],  
17.             "progressive_render" : true  
18.         },  
19.         "plugins" : [ "themes", "json_data" ]  
20.     });  
21. });  

3、xml_data plugin:这种插件支持平行和嵌套的两种xml格式，嵌套的结构和平行结构仅仅不同的是parent_id上，平行结构有parent_id属性。

parent_id定义了在平行结构中的父节点，根节点值为0；

state:open or closed

item：对应了li

例子请见：

http://download.csdn.net/detail/xiaolinye3319/6241391       “ xml_data.html”