jsTree的使用

来源：互联网发布：js回调函数如何返回值编辑：程序博客网时间：2024/06/04 18:24

一.jsTree的基本

(一).jsTree介绍

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

(二).事件及API使用

1.听事件--- 事件的列表

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

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

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

$('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><!--1.jsTree主题--><link rel="stylesheet" href="./../../dist/themes/default/style.min.css" /></head><body><!--3.设置一个容器--><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><!--2.jsTree--><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>

阅读全文

0 0