欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jsTree API,属性,方法,事件,插件,常用方法

程序员文章站 2022-06-16 08:03:46
...

 

jstree API 属性、方法、事件、插件
https://www.jstree.com/api/
jstree API 事件
https://www.jstree.com/api/#/?q=jstree Event

jstree中文github文档
https://blog.csdn.net/qq_24472595/article/details/70053863

jsTree 核心功能(core functionality) API
https://www.cnblogs.com/annkiny/p/7825866.html

 

jsTree初始前清空数据

$('#checkMenuTree').data('jstree', false).empty();

jsTree初始

$('#checkMenuTree').data('jstree', false).empty();
$('#checkMenuTree').jstree({
	'core' : {
		'data' : {
			//"url" : "./root.json",
			"url" : contextPath + "/menu/getJsTreeNodeListAll.json?time="+new Date().getTime(),
			//"type" : "post",
			"dataType" : "json" // needed only if you do not supply JSON headers
		}
	},
	"plugins" : ["checkbox"]
});

 

jsTree选择事件

$('#checkMenuTree').on("changed.jstree", function (e, data) {
	//选中节点的id
	console.log(data.instance.get_selected(true)[0].id);
	//选中节点的text
	console.log(data.instance.get_selected(true)[0].text);
	console.log(data.instance.get_node(data.selected[0]).id);
	console.log(data.instance.get_node(data.selected[0]).text);
});

  

jsTree加载完成事件

 1.41. loaded.jstree ( Event ? )
 当根节点(root)第一次加载时触发。
 1.42. ready.jstree ( Event ? )
 当所有节点都加载完毕时触发

//$('#checkMenuTree').on("loaded.jstree", function () {
$('#checkMenuTree').on("ready.jstree", function () {
	//$('#checkMenuTree').jstree(true).open_all();
	$('#checkMenuTree').jstree('open_all');
	$.each(menuIds,function(index,data){//遍历数据
		var node = $('#checkMenuTree').jstree("get_node", data);
		var isLeaf = $('#checkMenuTree').jstree("is_leaf", node);
		if(isLeaf){
			$('#checkMenuTree').jstree('check_node', data);
		}
          });
});

 

jsTree展开所有节点

$('#checkMenuTree').jstree(true).open_all();
$('#checkMenuTree').jstree('open_all');

 

jsTree获取节点

$('#checkMenuTree').jstree("get_node", id);

 

jsTree判断是否是叶子节点

$('#checkMenuTree').jstree("is_leaf", node);

 

jsTree选择节点

    复选框

$('#checkMenuTree').jstree('check_node', id);

    非复选框的

$('#jstree').jstree(true).select_node('mn1');
$('#jstree').jstree('select_node', 'mn2');

  

jsTree刷新

$('#checkMenuTree').jstree().refresh();

 

jsTree获取选择节点

    复选框

var checkedNodes = $('#checkMenuTree').jstree('get_checked',true);

    非复选框

    get_selected ([full])

 

jsTree获取半选节点,获取不确定的节点

var indeterminateNodes = $('#checkMenuTree').jstree('get_undetermined', true);