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值来标识。

贴一段官方的代码

[html] view plaincopy

<div class="panel">
<h3>Using the UI plugin</h3>
<div id="demo1" class="demo">
<ul>
<li id="phtml_1">
<a href="#">Root node 1</a>
<ul>
<li id="phtml_2">
<a href="#">Child node 1</a>
</li>
<li id="phtml_3">
<a href="#">Child node 2</a>
</li>
</ul>
</li>
<li id="phtml_4">
<a href="#">Root node 2</a>
</li>
</ul>
</div>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"ui" : {
"select_limit" : 2,
"select_multiple_modifier" : "ctrl",
"selected_parent_close" : "select_parent",
"initially_select" : [ "phtml_2" ]
},
"core" : { "initially_open" : [ "phtml_1" ] },
"plugins" : [ "themes", "html_data", "ui" ]
});
});
</script>
</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

转载于:https://www.cnblogs.com/telwanggs/p/7447491.html

jsTree插件简介(三)相关推荐

jsTree插件简介(四)
CRRM plugin 1 本节以例子为基础,讲解jsTree的crrm插件之create功能,如有不当,敬请拍砖!! crrm plugin提供创建.删除.重命名.移动节点功能. 1.创建节点. 首 ...
jsTree插件简介(一)
在用jsTree时可以使用几种插件来支持我们的行为,下面我简要的介绍下各个插件的使用. 1:html_data plugin. html_data即我们要渲染的数据是用html格式来完成tree的展示 ...
【Flutter】开发 Flutter 包和插件 ( Flutter 包和插件简介 | 创建 Flutter 插件 | 创建 Dart 包 )
文章目录一.Flutter 包和插件简介二.创建 Flutter 插件 1.Android Studio 中可视化创建 2.命令行创建三.创建 Dart 包 1.Android Studio 中 ...
【Android Protobuf 序列化】Protobuf 使用 ( protobuf-gradle-plugin 插件简介 | Android Studio 中配置插件 | AS 中编译源文件 )
文章目录一.protobuf-gradle-plugin 插件简介二.Android Studio 中配置 protobuf-gradle-plugin 插件三.Android Studio 中 ...
【树莓派】【网摘】树莓派与XBMC及Kodi、LibreELEC插件（三）
之前的相关文章参考: [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(一) [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(二) [树莓派]树莓派与XBMC及Kodi.Li ...
jmeter性能测试常用插件简介
jmeter性能测试常用插件简介 jmeter作为一个开源的接口性能测试工具,相对于商业性软件loadrunner来说,优点是更加灵活方便,操作简单.但相对来说,专业性和对性能参数的分析相对比较薄弱. ...
win7 html 插件,win7系统清理插件的三种方法
近期好多网友询问说win7系统怎么清理插件?我们在使用网络软件和插件时,可以带来很多便利.但是使用过程中会不可避免的安装一些不必要的电脑插件,甚至是恶评插件,这对电脑安全构成威胁.所以我们要清理一些无 ...
Logstash（三）filter插件简介
Filter Plugin Filter是Logstash功能强大的主要原因,它可以对Logstash Event进行丰富的处理,比如解析数据.删除字段.类型转换等等,常见的有如下几个: date日期 ...
SteamVR插件简介
关于怎么安装VIVE就不说了,今天主要说一下Steam VR这个插件的用处. 首先,导入插件,可以从网上下载,也可以在Unity Store里下载,不花钱的. 导入以后,我们会发现有两个文件夹, ...

jsTree插件简介(三)

UI-plugin

jsTree插件简介(三)相关推荐

最新文章

热门文章