jstree 创建删除节点，获取选择的节点数据

首先从官网下载jstree

https://github.com/vakata/jstree/zipball/3.3.4

下载完解压后使用dist文件夹下的文件

引用css文件

<link rel="stylesheet" href="/jstree/themes/default/style.min.css" />

引用js文件

<script src="/jquery/jquery.min.js"></script>
<script src="/jstree/jstree.min.js"></script>

html

<div id="jstree_demo_div"></div>

js代码

<script>
// 创建一个节点
function create() {
	var ref = $('#jstree_demo_div').jstree(true),
		sel = ref.get_selected();
	if(!sel.length) { return false; }
	sel = sel[0];
	sel = ref.create_node(sel, {"type":"default"});
}
// 删除一个节点
function delete() {
	var ref = $('#jstree_demo_div').jstree(true),
		sel = ref.get_selected();
	if(!sel.length) { return false; }
    ref.delete_node(sel);
}
$(function() {
	/**
	* 因为接口返回的数据与jstree数据不一致，所以要转换一下
	*/
	function changeTreeData(data){
		let nodes = [];
		for (let node of data) {
		  node.text = node.name;// 名字
		  if(!!node.children){
			  let cnodes = changeTreeData(node.children);
			  node.oc = [...node.children];// 为了方便拿到原来的数据
			  node.children = cnodes;
		  }
		  node.state = { 'opened' : false };
		  nodes.push(node);
		}
		return nodes;
	}
	
	// 请求节点树
	$.ajax({
		url : '/api/resourceList.json',
		dataType : 'json',
		type : 'get',
		success : function(data){
        	if(data.state == 1 && !!data.data){
        		let nodes = changeTreeData(data.data);
        		$('#jstree_demo_div').jstree({
        			'core' : {
        				"animation" : 0,
						"check_callback" : true,
						'force_text' : true,
        		        'data' : nodes
        		    },
        		    "types" : {
        		        "default" : {
        		          "valid_children" : ["default","file"]
        		        },
        		        "file" : {
        		          "icon" : "glyphicon glyphicon-file",
        		          "valid_children" : []
        		        }
        		      },
        		      "plugins" : ["types","checkbox"],
                    "checkbox": {
                        "keep_selected_style": false,//是否默认选中
                        "three_state": true,//父子级别级联选择
                        "tie_selection": false
                    },
        		});
                // 当点击某个节点时触发
        		$('#jstree_demo_div').bind("activate_node.jstree", function (obj, e) {
        		    // 获取当前节点
        		    let currentNode = e.node;
                    // 获取当前节点的数据
                    let nodeData = currentNode.original;
                    // 获取当前节点的父节点
                    let parentNode = $('#jstree_demo_div').jstree("get_node", currentNode.parent);
                    // 获取选中节点的数据
                    let checkedData = $('#jstree_demo_div').jstree(true).get_checked();
        		});
        	}
		}
	});
	
});
</script>