angularjs jstree 示例

本篇文章是个简单的例子，如果需求需要更复杂的可参考jstree 官网，里面详细接受有事件、方法。

jstree：https://www.jstree.com/

angularjs调用一般是：

	<script src="../bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />

jstree调用:

    <link rel="stylesheet" href="../tree/dist/themes/default/style.css" />
	<script src="../tree/dist/jstree.js"></script>

jsp:

    <div id="jstree" class="tree-demo"></div>

js：

    var listArr=[];
	function getStreamMedia() {
		var random=new Date().getTime();
		var data="";
		$.ajax({
			url:ctx+"/***/****/****?random="+random,
			data:{
			},
			type:"post",
			dataType:"json",
			success:function(data){
				var id=data[0].id;//用来展开节点用的参数
				var name=data[0].name;
				var nodeTypeWord=data[0].nodeTypeWord;//节点类型。如果你要区分节点图标就用  common和classroom
				var code=data[0].code;//组装指令用的参数
				listArr.push({
					"id": "parent",
					'parent': '#',
					'text': name,
					'data': {
						"RequestType": nodeTypeWord,
						"name": name,
						"code": code,
						"id": id
					},
					'icon': false
				});
				init_list();
			}
		});
	}
	/**
	 *生成树 
	 */
	function init_list() {
		$('#jstree').jstree({
			"plugins": ["dnd","radio"],
			'core': { //初始化时设置。
				'check_callback': true,
				'data': listArr,
				'themes': {
					'dots': true//是否展示连接线
				},
				 "checkbox": {
	                 "keep_selected_style": false,//是否默认选中
	                 "three_state": false,//父子级别级联选择
	                 "tie_selection": false
	             },
			}
		}).bind("select_node.jstree", function(event, data) {
			var inst = data.instance;
			var selectedNode = inst.get_node(data.selected);
			addNode(inst,selectedNode);
			
		}).bind("ready.jstree", function(event, data) {
		});
	}
	function addNode(inst, selectedNode) {
		if(selectedNode ==false){
			return;
		}
		batchArr = [];
		batchArr.push({
			 "RequestType":selectedNode.data.RequestType,
			 "name":selectedNode.data.name,
			 "code":selectedNode.data.code,
			 "id":selectedNode.data.id
		 });
		var id = selectedNode.data.id;
		var RequestType = selectedNode.data.RequestType;
		if(RequestType=="classroom"){
			return;
		}
		var random=new Date().getTime();
		var data="";
		$.ajax({
			url:ctx+"/****/****/****?random="+random,
			data:{
				id:id
			},
			type:"post",
			dataType:"json",
			success:function(data){
				if(data.length<=0){
					return;
				}
				selectedNode.children = [];
				var dataArr = [];
				for(var i = 0; i < data.length; i++) {
					var id=data[i].id;//用来展开节点用的参数
					var name=data[i].name;
					var nodeTypeWord=data[i].nodeTypeWord;//节点类型。如果你要区分节点图标就用
					var code=data[i].code;//组装指令用的参数
					dataArr.push({
						'text': name,
						'data': {
							"RequestType": nodeTypeWord,
							"name": name,
							"code": code,
							"id": id
						},
						"icon": false
					});
				}
				$.each(dataArr, function(i, item) {
					var obj = {
						text: item.text,
						data: item.data,
						icon: item.icon
					};
					//创建新的子节点
					$('#jstree').jstree('create_node', selectedNode, obj, 'last');
				});
				//打开新建的子节点
				inst.open_node(selectedNode);
			}
		});
	}