jsTree插件简介(三)

时间：2023-03-08 23:38:38
jsTree插件简介(三)

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值来标识。
贴一段官方的代码
  1. <div class="panel">
  2. <h3>Using the UI plugin</h3>
  3. <div id="demo1" class="demo">
  4. <ul>
  5. <li id="phtml_1">
  6. <a href="#">Root node 1</a>
  7. <ul>
  8. <li id="phtml_2">
  9. <a href="#">Child node 1</a>
  10. </li>
  11. <li id="phtml_3">
  12. <a href="#">Child node 2</a>
  13. </li>
  14. </ul>
  15. </li>
  16. <li id="phtml_4">
  17. <a href="#">Root node 2</a>
  18. </li>
  19. </ul>
  20. </div>
  21. <script type="text/javascript" class="source">
  22. $(function () {
  23. $("#demo1").jstree({
  24. "ui" : {
  25. "select_limit" : 2,
  26. "select_multiple_modifier" : "ctrl",
  27. "selected_parent_close" : "select_parent",
  28. "initially_select" : [ "phtml_2" ]
  29. },
  30. "core" : { "initially_open" : [ "phtml_1" ] },
  31. "plugins" : [ "themes", "html_data", "ui" ]
  32. });
  33. });
  34. </script>
  35. </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)：返回是否某个节点被选中。
之ui_plugin.html
原英文地址为：http://www.jstree.com/documentation/ui

相关文章