<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- jstree css样式 -->
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
-->
<link rel="stylesheet" href="./plugins/themes/default/style.min.css"/>
<link rel="stylesheet" href="./plugins/themes/default-dark/style.min.css">
</head>
<body>
<!-- 设置容器元素 -->
<div id="jstree"></div>
<!-- jquery.js -->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
-->
<script src=".\plugins\jquery3.3.1.min.js"></script>
<!-- jstree js核心文件 -->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
-->
<script src=".\plugins\jstree.min.js"></script>
<script type="text/javascript">
$(function () {
//当DOM准备好时创建一个jstree实例
$('#jstree').jstree({
//core 存储核心的所有默认值
'core': {
//data 数据配置:在这里可以传递HTML字符串或JSON数组
'data': [
{
'id': 'ajson1',
'parent': '#',// # 根目录
'icon': 'jstree-folder',//jstree-folder 文件夹图标(默认图标)
'text': '学校',
"state": {
"opened": true //默认打开文件夹
}
},
{
'id': 'ajson2',
'parent': 'ajson1',
'text': '七年级'
},
{
'id': 'ajson3',
'parent': 'ajson1',
'text': '八年级'
},
{
'id': 'ajson4',
'parent': 'ajson1',
'text': '九年级'
},
{
'id': 'ajson6',
'parent': 'ajson2',
'icon': 'jstree-file',//jstree-file 文件图标
'text': '张三'
},
{
'id': 'ajson7',
'parent': 'ajson2',
'icon': 'jstree-file',
'text': '李四'
},
{
'id': 'ajson8',
'parent': 'ajson2',
'icon': 'jstree-file',
'text': '王五'
}
]
}
});
});
</script>
</body>
</html>
jstree的用法以及例子
需积分: 5 102 浏览量
2023-09-30
15:22:55
上传
评论
收藏 101KB ZIP 举报
11.jstree.example.zip （15个子文件） 
11.jstree.example 
11.0.html 1KB plugins 
jstree.min.js 124KB themes default-dark 
40px.png 6KB style.css 34KB style.min.css 29KB
throbber.gif 1KB 32px.png 1KB default 40px.png 2KB style.css 31KB style.min.css 27KB throbber.gif 1KB 32px.png 6KB style.min.css 25KB jquery3.3.1.min.js 85KB 11.html 3KB资源评论
