jstree实际应用

开发功能数据源管理之设置数据源弹出框，包含数据源新增同级、新增下级、修改、删除、上移下移。
类似于左侧树，右侧有以上按钮。
查询出数据源表中的数据，构造树数据。

 for(var i=0;i<result.data.length;i++){
		             var obj = result.data[i];
		             var data = {
		            	 id:obj.id,
		            	 text:obj.name,	            	
		            	 state:{'opened':true},
		            	 
		            	 icon:false
		             };
		             if (obj.pid) {
		            	 data.parent = obj.pid;
		             } else {
		            	 data.parent = '#';
		             }
		             dataList.push(data);		           
		         }

先初始化jstree 树

 var jstreeOpt = {
						core:{
							multiple:false,
							animation:1,
							force_text:true,
							check_callback:true,
							strings:{'New node':'xx分类'},
							data:dataList,
							themes:{ stripes:false,responsive:false,icons:false }
						},
						checkbox:{"undetermined":false,"three_state":false},
						plugins: ["types", "search", "create_node", "unique"]//"sort", 
				 };
		         //业务系统树选择事件
		         $('#dataSourceTree').on("changed.jstree", function (e, data) {
			          if(data.selected.length) {
			        	var ref = $('#dataSourceTree').jstree(true);
			        	_thisPage.selectNode = ref.get_selected(true);
			        	_thisPage.parentNode = ref.get_node(ref.get_selected()[0]).original.parent;
			            var bizSystem = data.instance.get_node(data.selected[0]).text;//业务系统
			            selectOrgId = data.instance.get_node(data.selected[0]).id;
			  
			     });		            
		          $('#dataSourceTree').on("loaded.jstree",function(e,data) {
				           //默认选中第一个子节点
				           var inst = data.instance;
				           if (e.target.firstChild.firstChild!=null) {
					             var rootNode = inst.get_node(e.target.firstChild.firstChild.lastChild.firstChild); 
					             inst.select_node(rootNode);      
				           }
				 });
				 $("#dataSourceTree").on("select_node.jstree",function(event, data){		
					initBtnTips();
				 });
				 $("#dataSourceTree").jstree(jstreeOpt);

/**
	 * 上移.
	 */
    $("#removeUpBtn").unbind("click").bind("click",function(){
    	var _this = this;
		var ref = $('#dataSourceTree').jstree(true),
		sel = ref.get_selected(true);
		if(!sel.length) { return false; }
		treeMoveData("prev");
    });
    $("#removeDownBtn").unbind("click").bind("click",function(){
    	var _this = this;
		var ref = $('#dataSourceTree').jstree(true),
		sel = ref.get_selected(true);
		if(!sel.length) { return false; }
		treeMoveData("next");
    });
  }
  //上移、下移
  function treeMoveData(moveType){
		var ref = $('#dataSourceTree').jstree(true);
		var currNode = ref.get_selected(true)[0];
		var parentNode = ref.get_node(currNode.parent);
		var nodes = [];
		if (parentNode) {
			var id = currNode.id;
			var ids = $.extend(true, [], parentNode.children);
			var index = $.inArray(id, ids);
			var idx = index;
			var ordernum = currNode.original.ordernum;
			if ('next' == moveType) {
				//下移上面一定有节点
				if (index < 0 || index > ids.length - 2){
					return;
				}
				var nextNode = ref.get_node(ids[index + 1]);
				//var nextNode = ref.get_next_dom(currNode,true);
				ref.move_node(currNode.id,currNode.parent,index+2,false,false,false);
				currNode.original.ordernum = nextNode.original.ordernum;
				nextNode.original.ordernum = ordernum;
				if(currNode.original.saveState != 0){
					currNode.original.saveState = 1;
				}
				if(nextNode.original.saveState != 0){
						nextNode.original.saveState = 1;
			    }
				saveNodeDatas[currNode.original.id] = currNode.original;
			    saveNodeDatas[nextNode.original.id] = nextNode.original;
				idx++;
			} else if ('prev' == moveType && parentNode) {
				//上移上面一定有节点
				if (index < 1){
					return;
				} 
				var prevNode = ref.get_node(ids[index - 1]);
				//var prevNode = ref.get_prev_dom(currNode,true);
				ref.move_node(currNode.id,currNode.parent,index-1,false,false,false);
				currNode.original.ordernum = prevNode.original.ordernum;
				prevNode.original.ordernum = ordernum;
				if(currNode.original.saveState != 0){
					currNode.original.saveState = 1;
				}
				if(prevNode.original.saveState != 0){
				   prevNode.original.saveState = 1;
			    }
				saveNodeDatas[currNode.original.id] = currNode.original;
			    saveNodeDatas[prevNode.original.id] = prevNode.original;
				idx--;
			}
			if(ids.length <2){
				$("#removeUpBtn").attr("disabled", true);
				$("#removeDownBtn").attr("disabled", true);
			}else if(idx == 0){
				//是否移动到最前面
				$("#removeUpBtn").attr("disabled", true);
				$("#removeDownBtn").attr("disabled", false);
			}else if(idx == ids.length-1){
				//是否移动到最后
				$("#removeUpBtn").attr("disabled", false);
				$("#removeDownBtn").attr("disabled", true);
			}else{
				$("#removeUpBtn").attr("disabled", false);
				$("#removeDownBtn").attr("disabled", false);
			}
		}
  }

将新增、修改、删除的数据存入saveNodeDatas里，然后通过后台进行处理。