jsTree插件简介

Posted 2020-10-04 疯子加天才

UI-plugin

JSTree的UI插件：用来处理选择、不选和鼠标悬浮树选项的插件。

一、属性包括：

1、select_limit：指定一次可以选中几个节点，默认为-1，表示无限制选中。

2、select_multiple_modifier：处理当按住某个键时，用鼠标点击其他的节点可全部选中；(类似在文件目录中的按住ctrl并用鼠标选择其它目录或者文件)；默认按键为"ctrl"，可以用"shift"，"alt"等替代。

3、select_range_modifier：先选中一个节点，然后按住某个键位，再用鼠标点击另外一个节点，这样就选中这两个节点之间的部分并包含这两个节点，类似于windows中选中文件系统中的"shift"，默认选项为"shift"，可用"ctrl", "alt"等代替。

注意：使用这个选项选中的必须为兄弟节点。

4、select_parent_close：当选中节点的父节点关闭时是否选中父节点。若为"select_parent"则关闭父节点时选中父节点，若为"false"和"deselect"则当父节点关闭时不选中父节点。默认为"select_parent"。

5、select_parent_open：当程序运行过程中选中了一个节点并且这个节点的节点全是关闭的，这时要自动打开关闭的父节点。默认为"true"

6、select_prev_on_delete：当删除一个节点时默认选择前一个兄弟节点，若没有前一个兄弟节点，则选择父节点。默认为"true"

7、disable_selecting_children：默认为"false"，如果设置为"true"，你将无法选择这个节点的子节点。(待验证)

8、initially_select：当树完成加载时默认选中的节点，它需要节点的id值来标识。

 

贴一段官方的代码

[html] view plain copy

 

1. <div class="panel">  
2.   
3.   
4.   
5. <h3>Using the UI plugin</h3>  
6.   
7. <div id="demo1" class="demo">  
8.     <ul>  
9.         <li id="phtml_1">  
10.             <a href="#">Root node 1</a>  
11.             <ul>  
12.                 <li id="phtml_2">  
13.                     <a href="#">Child node 1</a>  
14.                 </li>  
15.                 <li id="phtml_3">  
16.                     <a href="#">Child node 2</a>  
17.                 </li>  
18.             </ul>  
19.         </li>  
20.         <li id="phtml_4">  
21.             <a href="#">Root node 2</a>  
22.         </li>  
23.     </ul>  
24.   
25. </div>  
26.   
27. <script type="text/javascript" class="source">  
28.   
29. $(function () {  
30.   
31.     $("#demo1").jstree({   
32.   
33.         "ui" : {  
34.             "select_limit" : 2,  
35.             "select_multiple_modifier" : "ctrl",  
36.             "selected_parent_close" : "select_parent",  
37.             "initially_select" : [ "phtml_2" ]  
38.         },  
39.   
40.         "core" : { "initially_open" : [ "phtml_1" ] },  
41.   
42.         "plugins" : [ "themes", "html_data", "ui" ]  
43.   
44.     });  
45.   
46. });  
47.   
48. </script>  
49.   
50.   
51.   
52. </div>  

二、函数包括：

1、._get_node(node, allow_multiple)：覆盖了core组件的get_node函数。

如果node为null或者没有定义，并且allow_multiple为true，返回所有现在被选中的节点；

如果node为null或者没有定义，并且allow_multiple不为true，返回最后被选中的节点。

node：混合类型，可以为Dom node，jQuery node或指向元素在书中的选择点。

allow_multiple：是否返回所有节点或者node为null时最后一个被选中的节点。

2、.save_selected()：保存树节点当前被选中的状态。(实现是保存在一个变量中，因此刷新页面后不存在)。这个函数和cookies plugin插件相关。主要在内部使用，事件触发函数。

3、.reselect()：从save_selected()函数保存的变量恢复树的状态，主要在内部使用，事件触发函数。

4、.refresh(node)：覆盖了core组件中的refresh函数。启用前刷新保存选择状态和事后恢复。

5、.hover_node(node)：设置节点hoverd，事件触发函数。

node:mixed，混合类型，可以为Dom node，jQuery node或指向元素在书中的选择点。

6、dehover_node()：删除目前已经hovered 节点，事件激发函数。

7、.select_node(node, check, event)：

node:mixed，混合类型，可以为Dom node，jQuery node或指向元素在书中的选择点。

check:bool ，是否检测规则(检测"select_limit"选项等)并且做合适的行动或者仅仅选中被选中的节点。

event:event，内部使用，当点击一个节点时触发此动作。

8、.deslect_node(node), .toggle_select(node):这两个函数控制一个节点的选中状态，deselect_node激发了一个事件。

9、.get_selected(context)：返回被选中的所有节点。

10、.deselect_all(context)：补选中所有节点。

11、is_select(node)：返回是否某个节点被选中。

 

本文代码见 http://download.csdn.net/detail/yizhizouxiaqu/4268775

之ui_plugin.html

 

原英文地址为：http://www.jstree.com/documentation/ui