jstree学习

啥都不说了，直接上代码

	function createContextMenuItems(node){
		var id=$(node).attr("id");
		var type=$(node).attr("nType")
		var items={};
		var createItem = {
			"createPageStyle" : {
				"separator_before"	: false,
				"separator_after"	: true,
				"label"		: "新建",
				"action"		: function (obj) {
						    this.create(obj,'last',{attr:{ntype:'leaf'},data:'名称'});
						  }
			}
		};
		var renameItem={
			"rename" : {
				"separator_before"	: false,
				"separator_after"	: false,
				"label"		: "修改名称",
				"action"		: function (obj) { 
						    this.rename(obj);
						  }
			}
		};
		var removeItem={
			"remove" : {
				"separator_before"	: false,
				"icon"		: false,
				"separator_after"	: false,
				"label"		: "删除",
				"action"		: function (obj) { 
						    if(!confirm("确定要删除吗")) {
						      return;
						    }
						    removeTreeNode(obj);
						  }
			}
		};
		if(type=='root') {
		    items=createItem;
		} else {
		    items=$.extend({},renameItem,removeItem);
		}
		return items;
	};
	
	function removeTreeNode(obj) {
		var nodeData={};
		var id=$(obj).attr("id");
		var isRemove=false;
		if(id){
		    nodeData.id=id;
		    isRemove=true;
		}
		if (!isRemove) {
		    return;
		}
		var ajaxData ={pattern:nodeData};
		$.ajax({
		   contentType:"application/json",
		   dataType:"json",
		   type: "POST",
		   url: "<c:url value='' />",
		   async:false,
		   data: toJSON(ajaxData).json,
		   success:function(result,st) {
			   if(!result.isSuccessed) {
				   alert(result.msg);
				   return;
			   }
			   $("#professionTree").jstree("remove",obj);
		   },
		   error:function(xhr,st,err){
			   if(err !== undefined)
			  	 alert(err);
		   }
		});
	};

$("#professionTree").jstree("destroy");
$("#professionTree").jstree({
	"plugins" : ["themes", "ui", "json_data", "crrm"<security:authorize ifAllGranted="">, "contextmenu"</security:authorize>],
	"core":{initially_open:["-1"], animation:0},
	"themes": {
		"theme": "classic",
		"dots": true,
		"icons": true,
		"url": "<c:url value='/jquery/jstree/themes/classic/style.css' />"
	},
	"json_data" : {
	        	data: [{data : "根节点",state:"closed",attr:{id:-1,nType:"root"}}],
	        	"ajax": { 
			"url" : "<c:url value='' />",
			async:false,
			"type" : "POST"
	  	}
	},
	"contextmenu" : { 
		select_node: true, 
		show_at_node: true,
		items: createContextMenuItems
	}
}).bind("reopen.jstree",function(e,data){
        	var existLeaf = $("li[nType=leaf]").length;
        	if (existLeaf == 0) {
        		$("#professionTree").jstree("select_node",$("#-1"));
        	} else {
        		$("#professionTree").jstree("select_node",$("li[nType=leaf]:first",$("#-1")));
		$("li[nType=leaf]:first a",$("#-1")).click();
        	}
}).bind("click.jstree",function(e){
	var node = $(node).is("li")?$(node):$(e.target).parent("li");
	var id = node.attr("id");
	var nType = type=$(node).attr("nType");
	if(nType=="leaf"){
	    	getUnitGrid(id);
	}
}).bind("create.jstree", function (e, data) {
		 var nodeData={name:data.rslt.name};
	    	 var ajaxData ={pattern:nodeData};
	    	 $("#professionTree").jstree("select_node",data.rslt.obj);
	    	 $("#-1 > a").removeClass("jstree-clicked");
	    	 $("a",$(data.rslt.obj).siblings()).removeClass("jstree-clicked");
	    	 if(data.rslt.name.length>20){
	    		 alert("名称不能大于20个字符！");
	    		 window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
	    		 return;
	    	 }
	    	 $.ajax({
    		   contentType:"application/json",
		   dataType:"json",
    		   type: "POST",
    		   url: "<c:url value='' />",
    		   async:false,
    		   data: toJSON(ajaxData).json,
    		   success:function(result,st) {
    			   if(!result.isSuccessed) {
    				alert(result.msg);
    				window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
		  		return;
    			   }
    		   	   var id = result.ids[0];
    			   $(data.rslt.obj).attr("id", id);
    		   },
    		   error:function(xhr,st,err){
    			   if(err !== undefined)
    			  	 alert(err);
    		   }
    		});
}).bind("rename.jstree", function (e, data) {
		var nodeData={name:data.rslt.new_name};
		var id=$(data.rslt.obj).attr("id");
		var isUpdateName=false;
		if(id){
		    nodeData.id=id;
		    isUpdateName=true;
		}
	    	ajaxData ={pattern:nodeData};
	    	if(data.rslt.new_name.length>20){
	    		 alert("名称不能大于20个字符！");
	    		 window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
	    		 return;
	    	}
	    	$.ajax({
    		   contentType:"application/json",
		   dataType:"json",
    		   type: "POST",
    		   url: "<c:url value='' />",
    		   async:false,
    		   data: toJSON(ajaxData).json,
    		   success:function(result,st) {
    			   if(!result.isSuccessed){
    				alert(result.msg);
    				window.setTimeout(function(){$("#professionTree").jstree("rename",data.rslt.obj)},100);
		  		return;
    			   }
		            if(!isUpdateName) {
				var id = result.ids[0];
	    			$(data.rslt.obj).attr("id", id);
			   }
    		   },
    		   error:function(xhr,st,err){
    			   if(err !== undefined)
    			   	alert(err);
    		   }
    		});
});

构造jstree数据的代码例子：

public List<Map> getTree() {
	List ret = new ArrayList();
	if (list == null || list.size() == 0) {
		return ret;
	}
	for (Node node : list) {
		Map data = new HashMap();
		Map attr = new HashMap();
		data.put("data", node.getName());
		data.put("attr", attr);
		attr.put("id", node.getId());
		attr.put("name", node.getName());
		attr.put("nType", "leaf");
		ret.add(data);
	}
	return ret;
}

至于json数据的来回转换依靠JsonInterceptor实现。

附：jquery core operation的两种执行方式
/* METHOD ONE */
jQuery("some-selector-to-container-node-here").jstree("operation_name" [, argument_1, argument_2, ...]);
 
/* METHOD TWO */
jQuery.jstree._reference(needle).operation_name([ argument_1, argument_2, ...]);  /* NEEDLE can be a DOM node or selector for the container or a node within the container */

NOTE: Functions prefixed with _ can not be called with method one.

Example (Method two)：var currentNode = jQuery.jstree._reference("#professionTree")._get_node(null);

(Method one)： $("#professionTree").jstree("rename_node", currentNode, patternName);