jsTree树形结构展示的简单使用总结

最新推荐文章于 2025-06-12 11:23:49 发布

Sagitarioo

最新推荐文章于 2025-06-12 11:23:49 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jsTree 前端树

本文链接：https://blog.youkuaiyun.com/Sagitarioo/article/details/88847395

一、生成树形数据

官网下载js资源的时候，已经在里面包含demo,最基本的复制粘贴就好了。

说几个遇到的问题

1、后台数据动态生成树

如果是Json结构的字符串，需要转一下再传给data

var jsonData=JSON.parse('${ujson}');
$('#data').jstree({
		'core' : {
		"check_callback" : true,
		'data' : jsonData
	},
	'plugins' : [ "contextmenu", "state","types","dnd" ],
	"types":{
		"default":{
			"icon":false
		}
	}
});

二、树形结构默认展开

$('#data').jstree({
	'core' : {
		"check_callback" : true,
		'data' : jsonData
	},
	'plugins' : [ "contextmenu", "state","types","dnd" ],
	"types":{
   		"default":{
   			"icon":false
   		}
    }
}).on('loaded.jstree',function(e,data){
	$('#data').jstree().open_all();
});

三、节点数据的修改
可以启用'plugins':["contextmenu"]，即自带的右键菜单，或者自己写输入框组件，注意core加上"check_callback" : true,不然节点数据不会改变。

四、节点复选框，默认有缓存会记录上次勾选结果，loaded事件加上data.instance.clear_state();