jsTree插件简介(一)

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

1：html_data plugin。

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

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

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

$(function () {
	$("#demo3").jstree({ 
		"html_data" : {
			"ajax" : {
				"url" : "/static/v.1.0pre/_docs/_html_data.html",
				"data" : function (n) { 
					return { id : n.attr ? n.attr("id") : 0 }; 
				}
			}
		},
		"plugins" : [ "themes", "html_data" ]
	});
});

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

我模拟了第一种情况，在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。据说很有用

例如

$(function () {
	$("#demo3").jstree({ 
		"json_data" : {
			"data" : [
				{ 
					"data" : "A node", 
					"children" : [ "Child 1", "Child 2" ]
				},
				{ 
					"attr" : { "id" : "li.node.id2" }, 
					"data" : { 
						"title" : "Long format demo", 
						"attr" : { "href" : "#" } 
					} 
				}
			],
			"progressive_render" : true
		},
		"plugins" : [ "themes", "json_data" ]
	});
});

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

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

state:open or closed

item：对应了li

例子请见http://download.csdn.net/detail/yizhizouxiaqu/4211029  xml_data.html

诶呀@！！！不能传文件