JsTree3.3搭建开发环境

最新推荐文章于 2024-08-06 22:26:26 发布

viper2046

最新推荐文章于 2024-08-06 22:26:26 发布

阅读量889

点赞数 1

分类专栏：学习文章标签： js jquery jstree html

本文链接：https://blog.csdn.net/viper2046/article/details/54911862

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

【JsTree3.3学习笔记】搭建开发环境

Jstree介绍

jsTree是jQuery的插件，具有交互性的树。它是免费的、开源的、容易扩展、主题化和可配置的，它支持HTML、JSON数据源和数据加载。

资源准备

1、下载jstree的相关文件，包括themes、jstree.js。

下载地址1：https://www.jstree.com/ 官方地址打开速度比较慢

下载地址2：https://github.com/vakata/jstreegithub速度快

2、下载jquery，要求版本为1.9以上。

下载地址：http://jquery.com/

开发步骤：

1、使用任意的开发工具创建一个web工程（本人使用的eclipse）。创建完成后拷贝相关文件到程序目录。见下图：

2、在创建3.jsp，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSTree</title>
<link rel="stylesheet" href="js/themes/default/style.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jstree.min.js"></script>
</head>
<body>
	<div id="jstree_div"></div>
	<script type="text/javascript">
		$(function() {
			$('#jstree_div').jstree({
				'core' : {
					'check_callback': true,
					'data' : [
					          { "id" : "ajson1", "parent" : "#", "text" : "node2" },
					          { "id" : "ajson2", "parent" : "#", "text" : "node1" },
					          { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 2" },
					          { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 1" },
					       ]
				},
				"plugins" : [ "sort" ]
			});
		});
		
	</script>
</body>
</html>

3、运行结果如下，一个简单的树结构就出来了。