jsTree的使用

最新推荐文章于 2023-12-12 11:43:31 发布

面条请不要欺负汉堡

最新推荐文章于 2023-12-12 11:43:31 发布

阅读量569

点赞数

分类专栏：框架/插件使用文章标签： jsTree的使用

本文链接：https://blog.csdn.net/gao_xu_520/article/details/78696533

版权

框架/插件使用专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一.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

收藏

觉得还不错? 一键收藏
0
评论
jsTree的使用

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

扫一扫