我的jsTree,学习资料..doc

jsTree插件简介(一) 分类： jsTree 2012-04-09 16:21 3000人阅读 评论(0) 收藏 举报 htmljsonthemespluginsfunctionxml 在用jsTree时可以使用几种插件来支持我们的行为，下面我简要的介绍下各个插件的使用。 1：html_data plugin。 html_data即我们要渲染的数据是用html格式来完成tree的展示。其中所要渲染的html数据可以来自直接的html文本，例如 [javascript] view plaincopyprint? $(function?()?{?? ????$(#demo2).jstree({??? ????????core?:?{?initially_open?:?[?root?]?},?? ????????html_data?:?{?? ????????????data?:?li?id=roota?href=#Root?node/aullia?href=#Child?node/a/li/ul/li?? ????????},?? ????????plugins?:?[?themes,?html_data?]?? ????});?? });?? $(function () { $(#demo2).jstree({ core : { initially_open : [ root ] }, html_data : { data : li id=roota href=#Root node/aullia href=#Child node/a/li/ul/li }, plugins : [ themes, html_data ] }); }); 也可以是使用json取得的html， [javascript] view plaincopyprint? $(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?]?? ????});?? });?? $(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 ] }); }); 也可以是两种情况的混合体。 我模拟了第一种情况，在/detail/yizhizouxiaqu/4211029??html_data.html中展示。 2、json_data:使用json格式的数据来展示树结构，这是我使用的方式 这种方式也可以使用固定的json数据，也可以从后台取得json数据，还可以是两者的混合，例子见/detail/yizhizouxiaqu/4211029??json_data.html 这里提到一个参数progressive_render，当有很多嵌套时可以把这个值设置为true。据说很有用 例如 [javascript] view plaincopyprint? $(function?()?{?? ????$(#demo3).jstree({??? ????????json_data?:?{?? ????????????data?:?[?? ????????????????{??? ????????????????????data?:?A?node,??? ????????????????????children?:?[?Child?1,?Child?2?]?? ????????????????},?? ????????????????{??? ????????????????????attr?:?{?id?:?li