jsTree事件和交互以及插件plugins详解

本文为大家分享了jsTree事件和交互以及插件plugins,供大家参考,具体内容如下

1、事件

jsTree在容器中触发变量事件,你可以浏览所有事件,然后了解如何进行监听:https://www.jstree.com/api/#/?q=.jstree%20Event

通过data参数获取更多详细信息关于事件检查。

更多情况下就是你会得到所有节点对象,如果你通过ID获取这个节点,查看节点使用.get_node().

$('#jstree')
 // listen for event
 .on('changed.jstree', function (e, data) {
 var i, j, r = [];
 for(i = 0, j = data.selected.length; i < j; i++) {
 r.push(data.instance.get_node(data.selected[i]).text);
 }
 $('#event_result').html('Selected: ' + r.join(', '));
 })
 // create the instance
 .jstree();

2.交互

为了在一个实例中调用一个方法,你必须要获取实例引用然后调用方法,这个例子展示如何获取一个引用然后调取一个方法。

可以查看API获取更多的方法:https://www.jstree.com/api/#/?q=(

// 3 ways of doing the same thing
$('#jstree').jstree(true)
 .select_node('mn1');
$('#jstree')
 .jstree('select_node', 'mn2');
$.jstree.reference('#jstree')
 .select_node('mn3');

3、插件

jsTree有些功能被移除核心,只有你需要的时候才使用它,为了确保使用插件,需要使用plugins参数配置选项,将插件名称添加到一个数组中。

举个例子确保所有插件都可以使用:(只要设置你需要使用的插件)

"plugins" : [
 "checkbox",
 "contextmenu",
 "dnd",
 "massload",
 "search",
 "sort",
 "state",
 "types",
 "unique",
 "wholerow",
 "changed",
 "conditionalselect"
]

这里有快速预览每一个插件

3.1、changed plugin (改变插件)

这个插件添加关于选择改变的额外的信息,一旦包含plugins配置选项,每个changed.jstree事件数据将会包含一个新的属性名称为changed,它将给出最后关于seleted和deselected节点的事件(changed.jstree)

$(function () {
 $("#plugins")
 .on("changed.jstree", function (e, data) {
 console.log(data.changed.selected); // newly selected
 console.log(data.changed.deselected); // newly deselected
 })
 .jstree({
 "plugins" : [ "changed" ]
 });
});

3.2.checked plugin(复选框)

这个插件将会在每个节点前面渲染复选框的图标,使得多选变得更加容易。

它也支持三态,意味着一个节点有些子节点是选中,这个节点将会被渲染成未确定,这个状态可以传播。你可以通过级联配置选项来微调级联选项。

记住级联会复选框会检查所有节点,即使是不可用的节点。

不确定状态是一个自动计算的,但是如果你是使用AJAX加载形成树想要渲染一个节点作为不确定状态通过设置属性“undetermined”:true。

你可以在API找到所有配置复选框的选项https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox

$(function () {
 $("#plugins1").jstree({
 "checkbox" : {
 "keep_selected_style" : false
 },
 "plugins" : [ "checkbox" ]
 });
});

3.3 conditionalselect plugin(条件插件)

这个插件重写了activate_node函数(就是用户选择节点将会调用的函数),你可以通过回调避免这个函数被调用。

$(function () {
 $("#plugins10").jstree({
 "conditionalselect" : function (node, event) {
 return false;
 },
 "plugins" : [ "conditionalselect" ]
 });
});

3.4(Contextmenu plugin)上下文菜单插件
这插件就是你在一个节点上右键会弹出一个功能列表菜单。
你可以通过API找所有contextmenu插件的配置选项:点击打开链接

$(function () {
 $("#plugins2").jstree({
 "core" : {
 // so that create works
 "check_callback" : true
 },
 "plugins" : [ "contextmenu" ]
 });
});

3.5 (drag&drop)拖拽插件

这个插件可以通过拖拽来重新改变树的结构。
你可以通过API找到更多的配置选项:点击打开链接

3.6.Massloadplugin(惯性负载插件)
这个插件通过一次请求(使用的是延迟加载)加载节点
你可以通过API找到更多的配置选项:点击打开链接

$(function () {
 $("#plugins10").jstree({
 "core" : {
 "data" : { .. AJAX config .. }
 },
 "massload" : {
 "url" : "/some/path",
 "data" : function (nodes) {
 return { "ids" : nodes.join(",") };
 }
 }
 "plugins" : [ "massload", "state" ]
 });
});

3.7.(search plugin) 搜索插件
这个插件可以在一棵树搜索对应的条目。
你可以通过API找到更多的配置选项:点击打开链接

 $("#plugins4").jstree({
 "plugins" : [ "search" ]
 });
 var to = false;
 $('#plugins4_q').keyup(function () {
 if(to) { clearTimeout(to); }
 to = setTimeout(function () {
 var v = $('#plugins4_q').val();
 $('#plugins4').jstree(true).search(v);
 }, 250);
 });
});

3.8. sort plugin(排序插件)

这个插件可以重新对于同一级的条目进行排序,默认采用数字或26字母的顺序,你可以通过配置对比函数:点击打开链接

$(function () {
 $("#plugins5").jstree({
 "plugins" : [ "sort" ]
 });
});

3.9.state plugin(状态插件)

这个插件保存所有打开和选中的节点到用户浏览器中,所以当再次返回相同的树,先前的状态将会被恢复
你可以通过API获取更多状态插件的配置选项:点击打开链接,你可以通过选中一个节点,然后刷新该页面就可以看到变化。

$(function () {
 $("#plugins6").jstree({
 "state" : { "key" : "demo2" },
 "plugins" : [ "state" ]
 });
});

3.10. types plugin(类型插件)

这个插件为一组节点预先定义类型,这就意味着为每个组很容易控制内部规则和图标。
为了设置节点类型,你可以使用set_type 或者在data中提供一个type属性
你可以通过API获取更多关于类型插件的配置选项和函数:点击打开链接

$(function () {
 $("#plugins7").jstree({
 "types" : {
 "default" : {
 "icon" : "glyphicon glyphicon-flash"
 },
 "demo" : {
 "icon" : "glyphicon glyphicon-ok"
 }
 },
 "plugins" : [ "types" ]
 });
})

3.11. unique plugin(唯一插件)
同一层级的条目不能出现相同的名称。这个插件没有选项,它只是避免在同一节点的重命名和移动其它节点时出现相同的名称。

$(function () {
 $("#plugins8").jstree({
 "core" : {
 "check_callback" : true
 },
 "plugins" : [ "unique", "dnd" ]
 });
});

3.12 wholerow plugin (整行插件)
这个插件就是一个条目占满一行,方便选择,如果是一个很大的树它可能会导致在老的浏览器变慢。

$(function () {
 $("#plugins9").jstree({
 "plugins" : [ "wholerow" ]
 });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • 基于jstree使用AJAX请求获取数据形成树

    概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,

  • jsTree 基于JQuery的排序节点 Bug

    例如: - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1,不太清楚为什么,这里提供一种修复方法,也许它不是很好. 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助

  • 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示

  • 基于jstree使用JSON数据组装成树

    概述: 前面主要是html数据,这里主要是json数组 1.格式 jsTree需要一个具体格式JSON数据,在标准的语法没有那个字段是必须的-而是那些是你需要的.请记住你可以获取任何你请求的其他属性,jsTree将会不会碰他们,你将有可能在随后使用它们. 为了改变节点的图标你可以是用属性icon.具体的字符串需要包含/的一个图片的url路径,你可以使用任何其它字符串应用类样式去修饰<i>元素,它将会被用呈现这个图标.你可以使用boolean 值false来jsTree在渲染节点时没有图标. 你

  • 基于jsTree的无限级树JSON数据的转换代码

    jstree 主页 : http://www.jstree.com/ 其中提供了一种从后台取数据渲染成树的形式: 复制代码 代码如下: $("#mytree").tree({ data : { type : "json", url : "${ctx}/user/power!list.do" } }); 对于url中返回的值必须是它定义的json数据形式: 复制代码 代码如下: $("#demo2").tree({ data :

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

  • jsTree树控件(基于jQuery, 超强悍)[推荐]

    1.支持基于HTML定义.Json.XML方式加载树节点 2.支持拖放,动态增加.删除.重命名树节点 3.支持复选框 4.支持复制.剪切.粘贴树节点,动态刷新树 5.提供足够的回调方法: 6.此外,还提供了详细的使用文档 下载地址 :http://code.google.com/p/jstree/ 文档 :http://jstree.com/reference/_documentation/1_files.html 例子 :http://jstree.com/reference/_example

  • JQery jstree 大数据量问题解决方法

    问题解决:生成的树是逐级加载的,在open函数中有一个生成节点的代码: 代码 复制代码 代码如下: for (var i=0; i<data.length; i++) { var n = TREE_OBJ.create(data[i], $(NODE)); if (onaddnode) onaddnode(n); } var firstChild = TREE_OBJ.children(NODE)[0]; if ($(firstChild).attr('id')==-1) TREE_OBJ.re

  • jquery下jstree简单应用 - v1.0

    第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中节点ID方法:function getMenuIds() 复制代码 代码如下: <script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.j

随机推荐