JSTree的简单使用
jstree是一个前端插件，可以动态生成树状图，
详细操作内容请点击官网链接跳转查看
jstree的使用
- 引入jstree的js和css文件，因为jstree是jquery写的，所以要引入jquery，引入的方法有两种，一种是引入外部，一种是引入本地的。
引入外部如果需要不同版本就去改站去cv
<-- 引入外部 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js">script>
引入内部需要先将需要的js和css文件下载下来放到自己的项目中
<script src="js/jquery-3.3.1.js">script>
<link rel="stylesheet" href="js/jsTree/themes/default/style.css" />
<script src="js/jsTree/jstree.js">script>
下载文件可以去官网或者GitHub下载
关于下载号的压缩包，官网给了一段说明
将以上的文件cv到项目中就可以了，如果不想下载或者出错可以私聊我发你现成的
简单应用
<html>
<head>
<title>title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js">script>
head>
<body>
<input type="search" id="plugins4_q"/>
<div id="jstree_demo_div">div>
body>
<script type="text/javascript">
// 选择的时候调用的方法
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
console.log("selected");
});
//
$('a').on('click', function () {
//get_selected返回选中的列
console.log($('#jstree_demo_div').jstree().get_selected(true));
});
//一般data从后台返回，调用这个方法显示视图
$('#jstree_demo_div').jstree({
'plugins':["search","themes","types","state","line"], //包含样式，选择框，图片等
'types': {
'default': {
'icon': true // 默认图标,可以写路径名，但是必须将themes的icons打开，否则没有地方展示图标
},
},
"checkbox":{ // 去除checkbox插件的默认效果
tie_selection : true,
keep_selected_style : true,
whole_node : true
},
'core' : { //core主要功能是控制树的形状，单选多选等等
'data' :[ //填充数据,data需要识别格式,关键字为id, text,children,展示时显示的是text,传递的可以是id也可以是text
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1"},
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
{ "id" : "ajson5", "parent" : "ajson1", "text" : "Child 2" },
{ "id" : "1", "parent" : "#", "text" : "Child 2" },
{ "id" : "2", "parent" : "1", "text" : "Child 2" },
{ "id" : "6", "parent" : "1", "text" : "Child 2" },
{ "id" : "7", "parent" : "1", "text" : "Child 2" },
{ "id" : "3", "parent" : "#", "text" : "Child 2" },
{ "id" : "9", "parent" : "3", "text" : "Child 2" },
{ "id" : "4", "parent" : "3", "text" : "Child 2" },
],
'themes':{
"icons":true, //默认图标
"theme": "classic",
"dots": true,
"stripes" : true, //增加条纹
}, //关闭文件夹样式
'dblclick_toggle': true, //允许tree的双击展开,默认是true
"multiple" : false, // 单选
"check_callback" : true
}
}
)
// 搜索功能的方法 jstree_demo_div：数据展示的内容 plugins4_q 搜索框
var to = false;
$('#plugins4_q').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#plugins4_q').val();
$('#jstree_demo_div').jstree(true).search(v);
}, 250);
});
script>
html>