jsTree API, properties, methods, events, plugins, common methods

 

jstree API properties, methods, events, plugins
https://www.jstree.com/api/
jstree API events
https://www.jstree.com/api/#/?q=jstree Event

jstree Chinese github documentation
https://blog.csdn.net/qq_24472595/article/details/70053863

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

 

Clear data before jsTree is initialized

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

jsTree initial

$('#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 select event

$('#checkMenuTree').on("changed.jstree", function (e, data) {
	// selected node's id
	console.log(data.instance.get_selected(true)[0].id);
	//select the text of the node
	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 load complete event

 1.41. loaded.jstree ( Event ? ) Fired
 when the root node (root) loads for the first time.
 1.42. ready.jstree ( Event ? ) Fired
 when all nodes are loaded

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

 

jsTree expand all nodes

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

 

jsTree get node

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

 

jsTree determines whether it is a leaf node

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

 

jsTree select node

    checkbox

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

    non-checkbox

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

  

jsTree refresh

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

 

jsTree get selected node

    checkbox

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

    non-checkbox

    get_selected ([full])

 

jsTree gets half-selected nodes, gets indeterminate nodes

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