jsTree的使用

浅浅的花香味﹌ 2021-09-14 10:58 487阅读 0赞

一.jsTree的基本

(一).jsTree介绍

jsTree是jquery插件，提供交互式树。jsTree很容易扩展，可编程和可配置，它支持**HTML和JSON数据源和AJAX加载**。jsTree在box-model（content-box或border-box）中可以正常运行，可以作为AMD模块加载，并且具有内置的响应式设计的移动主题，可以很容易地进行定制。它使用jQuery的事件系统，因此在树中绑定各种事件的回调是熟悉和容易的。

(二).事件及API使用

1.听事件---   [事件的列表][Link 1]

当用户（或您）与树进行交互时，jsTree使用事件来通知您何时发生了某些变化。所以绑定到jstree事件就像点击一样简单。有一个[事件的列表][Link 1]和它们的API文档中提供的信息。

$('#jstree_demo_div').on("changed.jstree", function (e, data) { console.log(data.selected); });

2.进行交互----[方法列表][Link 2]  
一旦一个实例准备就绪，你可以调用它的方法。在API文档中有一个可用的[方法列表][Link 2]。下面的三个例子完全一样

$('button').on('click', function () { $('#jstree').jstree(true).select_node('child_node_1'); $('#jstree').jstree('select_node', 'child_node_1'); $.jstree.reference('#jstree').select_node('child_node_1'); });

(三).基本案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jstree basic demos</title> <style> html { margin:0; padding:0; font-size:62.5%; } </style>  <link rel="stylesheet" href="./../../dist/themes/default/style.min.css" /> </head> <body>  <div id="jstree_demo_div"> <ul> <li>Root node 1 <ul> <li id="child_node_1">Child node 1</li> <li>Child node 2</li> </ul> </li> <li>Root node 2</li> </ul> </div> <button>按钮</button>  <script src="./../../dist/jQuery-2.1.4.min.js"></script> <script src="./../../dist/jstree.min.js"></script> <script> $(function () { //4.创建一个实例 $('#jstree_demo_div').jstree(); //5.听事件 $('#jstree_demo_div').on("changed.jstree", function (e, data) { }); //6.进行交互--用它的方法 $('button').on('click', function () { //3种方法都是 选中这个节点“#child_node_1”--打开 $('#jstree_demo_div').jstree(true).select_node('child_node_1'); $('#jstree_demo_div').jstree('select_node', 'child_node_1'); $.jstree.reference('#jstree_demo_div').select_node('child_node_1'); }); }); </script> </body> </html>

![20171202172048590][]

[Link 1]: https://www.jstree.com/api/#/?q=.jstree%20Event
[Link 2]: https://www.jstree.com/api/#/?q=%28
[20171202172048590]: /images/20210813/9860ce8198024935b8ab777975e4ce9e.png