JSTree的简单使用

最新推荐文章于 2024-06-13 09:33:09 发布

红日_

最新推荐文章于 2024-06-13 09:33:09 发布

阅读量7.7k

点赞数 2

本文链接：https://blog.csdn.net/HongRi_/article/details/88972939

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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到项目中就可以了，如果不想下载或者出错可以私聊我发你现成的

简单应用

<!DOCTYPE html>
<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>
	<!--
		"checkbox",	:选择框
		"contextmenu",：修改，右键节点，显示操作菜单
		"dnd",		：拖放功能，整理节点		要想开启需要将core的check_callback设置为true
		"massload",	：懒加载
		"search",
		"sort",	：排序
		"state",	：保存状态
		"types",
		"unique",	：唯一插件
		"wholerow",:整行，一个条目占满一行
		"changed",
		"conditionalselect"
	-->
<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>

红日_

关注

2
点赞
踩
10

收藏

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

jstree是一个前端插件，可以动态生成树状图，详细操作内容请点击官网链接跳转查看jstree的使用引入jstree的js和css文件，因为jstree是jquery写的，所以要引入jquery，引入的方法有两种，一种是引入外部，一种是引入本地的。引入外部如果需要不同版本就去改站去cv<-- 引入外部 --><link rel="stylesheet" h...
复制链接

扫一扫