我的jsTree,学习资料

jsTree插件简介(一) 分类： jsTree 2012-04-09 16:21 3000人阅读 评论(0) 收藏 举报

htmljsonthemespluginsfunctionxml 在用jsTree时可以使用几种插件来支持我们的行为，下面我简要的介绍下各个插件的使用。 1：html_data plugin。 html_data即我们要渲染的数据是用html格式来完成tree的展示。其中所要渲染的html数据可以来自直接的html文本，例如 [javascript] view plaincopyprint? 1. $(function () {

2. $(\

3. \4. \

5. \

ref='#'>Child node\6. },

7. \8. }); 9. });

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

[javascript] view plaincopyprint?

1. $(function () {

2. $(\3. \4. \

5. \6. \

7. return { id : n.attr ? n.attr(\8. }

9. } 10. },

11. \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 plaincopyprint?

1. $(function () {

2. $(\3. \4. \5. {

6. \

7. \8. }, 9. {

10. \

11. \

12. \13. \14. } 15. } 16. ],

17. \18. },

19. \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/yizhizouxiaqu/4211029 xml_data.html jsTree插件简介(二) 分类： jsTree 2012-04-14 17:14 3095人阅读 评论(0) 收藏 举报

themesiconsfunctionapplepluginsurl 1、themes plugin （jsTree的主题插件） 这个插件控制这jsTree的展示，如果没有这个插件，一个jsTree树结构就是一个有序的

列表 属性：

theme：给树结构应用的样式，默认为default，可以更改这个设置，需要在themes文件夹下建立需要使用的主题，我在themes文件中增加了apple样式，可以完成演示。 url：定义主题的css文件位置。可以设置为String为具体的地址，或者为false，为false时在< theme folder >/themes/< theme name >/style.css这个位置查找。

dots：定义是否显示树结构周围的线，如下图所示

如上图红框圈中的点，默认为true，即显示这些点，可以设置为false不显示这些点。

icons：定义是否显示树结构前面的图标，默认为true，即显示图标，改为false可以不显示。 下面给出源代码

[javascript] view plaincopyprint?

1. $(function () {

2. $(\3. $(\4. });

5. $(\6. $(\7. });

8. $(\

9. $(\10. });

11. $(\12. \

13. \14. \

• 1
• 2
• 3
• 4
• >>
• 7