jsTree事件和交互以及插件

本文分享了jsTree事件和交互以及插件，供您参考。具体内容如下

1.事件

JsTree触发容器中的变量事件。您可以浏览所有事件，然后学习如何监控它们：https://www.jstree.com/api/#/? q=。jstree事件

通过数据参数获取有关事件检查的更多详细信息。

更多的时候，你会得到所有的节点对象。如果您通过标识获取此节点，请使用。get_node()查看节点。

$('#jstree') //侦听事件。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])。文本)；} $('#event_result ')。html('Selected: ' r.join('，'))；}) //创建实例。jstree()；

2.互动

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

您可以查看API了解更多方法：https://www.jstree.com/api/#/? q=(

//做同样事情的3种方式$('#jstree ')。jstree(真)。select _ node(' mn1 ')；$('#jstree ')。jstree('select_node '，' Mn2 ')；$.jstree.reference('#jstree ')。select _ node(' mn3 ')；

3.插件

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

例如，确保所有插件都可以使用：(只需设置需要使用的插件)

插件' : ['checkbox '，' contextmenu '，' dnd '，' massload '，' search '，' sort '，' state '，' types '，' unique '，'整行'，' changed '，'条件选择']如下

3.1.已更改插件

该插件添加了关于选择更改的附加信息。一旦包含了插件配置选项，每个changed.jstree事件数据将包含一个名为changed的新属性，它将给出关于选定和取消选定节点的最后一个事件(changed.jstree)

$(function () { $('#plugins '))。on('changed.jstree '，函数(e，data){ console . log(data . changed . selected)；//新选择的console.log(data.changed .取消选择)；//新取消选择的})。jstree({ ' plugins ' :[' changed ']})；});3.2 .选中的插件(复选框)

该插件将在每个节点前面呈现复选框的图标，从而更容易选择多个选项。

它还支持三态，这意味着选择了一个节点的一些子节点，这个节点将被渲染为未确定，并且这个状态可以传播。您可以通过级联配置选项来微调级联选项。

请记住，级联复选框将选中所有节点，即使是那些不可用的节点。

不确定状态是自动计算的，但是如果使用AJAX来加载和形成树，您希望通过设置属性“未定”:true来将节点呈现为不确定状态。

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

$(function () { $('#plugins1 '))。jstree({ ' checkbox ' : { ' keep _ selected _ style ' : false }，' plugins ' :[' checkbox ']})；});

3.3条件选择插件(条件插件)

这个插件覆盖了activate_node函数(即当用户选择节点时将被调用的函数)，您可以避免这个函数被回调调用。

$(function () { $('#plugins10 '))。jstree({ ' conditionalselect ' :函数(节点，事件){ return false}，' plugins ' :[' conditionalselect ']})；});

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

$(function () { $('#plugins2 '))。jstree({ 'core' : { //以便create works ' check _ callback ' : true }，' plugins ' :[' context menu ']})；});

3.5 (dragdrop)拖动插件

这个插件可以拖放来再次改变树的结构。您可以通过API找到更多配置选项：单击打开链接

3.6.Massloadplugin(惯性加载插件)该插件通过请求加载节点(使用延迟加载)。你可以通过API找到更多的配置选项：点击打开链接。

$(function () { $('#plugins10 '))。jstree({ ' core ' : { ' data ' : {).AJAX配置.} }、“mass load”: {“URL”:/“some/path”、“data”:函数(节点){ return {“ids”: nodes . join(“，”)}；} } 'plugins' : [ 'massload '，' state ']})；});3.7.(搜索插件)搜索插件这个插件可以在树中搜索相应的条目。您可以通过API找到更多配置选项：单击打开链接

$('#plugins4 ')。jstree({ ' plugins ' :[' search ']})；var to=false$('#plugins4_q ')。keyup(function(){ if(to){ cleartime out(to))；} to=setTimeout(function(){ var v=$(' # plugins 4 _ q ')。val()；$('#plugins4 ')。jstree(真)。搜索(v)；}, 250);});});

3.8.排序插件(排序插件)

该插件可以在同一级别对项目重新排序，默认情况下使用数字或26个字母的顺序。您可以配置比较功能：单击打开链接

$(function () { $('#plugins5 '))。jstree({ ' plugins ' :[' sort ']})；});

3.9 .状态插件(状态插件)

该插件将所有打开和选择的节点保存在用户的浏览器中，因此当您再次返回到同一个树时，将恢复到以前的状态。可以通过API获取状态插件的更多配置选项：点击打开链接，选择一个节点刷新页面就可以看到变化。

$(function () { $('#plugins6 '))。jstree({ ' state ' : { ' key ' : ' demo 2 ' }，' plugins ' :[' state ']})；});

3.10.类型插件(类型插件)

这个插件预先定义了一组节点的类型，这意味着很容易控制每个组的内部规则和图标。为了设置节点类型，可以使用set_type或在数据中提供类型属性。您可以通过API获得更多关于类型插件的配置选项和功能：单击打开链接

$(function () { $('#plugins7 '))。jstree({ ' type ' : { ' default ' : { ' icon ' : ' glyphicon glyphicon-flash ' }，' demo ' : { ' icon ' : ' glyphicon-ok ' }，' plugins ' :[' type ']})；})

3.11.同一级别的唯一插件项目不能同名。这个插件没有选项，只是在重命名同一个节点和移动其他节点时避免了同名。

$(function () { $('#plugins8 '))。jstree({ ' core ' : { ' check _ callback ' : true }，' plugins' : [ 'unique '，' dnd ']})；});

3.12整行插件(wholerow plugin)是一个占据一行以便于选择的插件。如果是一棵大树，在旧浏览器中可能会变慢。

$(function () { $('#plugins9 '))。jstree({ ' plugins ' :[' whole row ']})；});

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