zTree实例

如果我的博文能帮到你，我感到非常荣幸。能力所限，对于我所写的内容如有不详不对，你们能给一些意见的话我将非常感谢。以后我会将我在工作中学到的一些知识，尽量整理出来给大家分享。 你们的意见是我的动力

对于zTree实在不知道写什么分析见解，因为zTree仅仅就是一个开发好的树型工具，我们只需要了解怎么使用就可以了。详情见zTree的APIhttp://www.ztree.me/v3/main.php
不过我还是对新接触的同学提一些注意事项：
$.fn.zTree.init($("myZtreeID"), setting, jsonStr):初始化zTree树，如果setting, json都配置正确，执行这句话，zTree树就会显示
$("myZtreeID"):   zTreeID对象.
setting:    zTree的设置.
jsonStr:    树节点的json.jsonStr 只要按照规定格式组合即可。
对于jsonStr:通常有2种方式：一种是通过id,pId确定父子级的；如：
var jsonStr = "[{id:1,pId:0,name:'基础根节点',open:true,isParent:true},{id:11,pId:1,name:'分组一1',open:true,isParent:},{id:12,pId:1,name:'叶子节点',open:true,isParent:false},{id:111,pId:11,name:'分组一叶子',open:true,isParent:false}]";
一种是通过children的方式确定父子级的；如：var jsonStr = [
   {name:"基础根节点", open:true, children:[{name:"分组一1", open:true, children:[{name:"分组一叶"}]},
      {name:"test1_1"}, {name:"test1_2"}]}
   ];
两种方式任意一种都可显示
我的实例-效果图

先直接上基本的代码
-------------------------------------------
html代码

<style>
<!--
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
-->/**解决新增按钮不显示**/
</style>
<div>
   <ul id="myZtreeID" class="ztree"></ul>
</div>

-------------------------------------------
js代码

var setting = {
	    async: {
			enable: true,
			url: function (treeId,treeNode){
				return "execute.do?method=getZTreeJson";
			},
			dataFilter: function(treeId, parentNode, responseData) {
			    return responseData;
			}
		},
		check: {
			enable: true  //是否开启checkbox
		},
		edit: {
			drag:{
				isMove:false,
				isCopy:false
			},
			enable: true,//不可编辑
			showAddBtn: true,//显示增加按钮
			showRemoveBtn: showRemoveBtn,
			showRenameBtn: showRenameBtn
		},
		data: {
			keep:{
				parent: true,//保持是父节点状态，
//默认为false,删除下面所有子节点之后，会自动变为叶子节点状态
				leaf:true//保持是叶子节点状态
			},
			simpleData: {
				enable: false   //是否可以编辑
			}
		},
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: true,
			expandSpeed: ""
		},
		callback: {
			beforeRemove:beforeRemove,
			beforeRename:beforeRename,
			onRemove: removeFun,
			onRename: renameFun
			
		}
	};

	function removeFun(event,treeId,treeNode){
	         //删除之后执行此方法
	}
	function renameFun(event,treeId,treeNode){
	         //重命名之后执行此方法	
         }
	
	function beforeRemove(treeId, treeNode) {
                  //删除之前的回调函数，
                     // return false; //阻止删除
         }
	function beforeRename(treeId, treeNode, newName, isCancel) {
                  //重命名之前回调函数
                     //return false;//阻止重命名
	}
	function showRemoveBtn(treeId, treeNode) {
                  //用于控制删除按钮的显示与否
		if(treeNode.pId == -1){
			//隐藏删除按钮
			return false;
		}else{
			return true;
		}
	}
	function showRenameBtn(treeId, treeNode) {
                 //用于控制修改按钮的显示与否
		if(!treeNode.isParent){
			//隐藏修改按钮
			return false;
		}else{
			return true;
		}
	}
	function addHoverDom(treeId, treeNode) {
              //鼠标移上去。新增按钮显示
              var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
                     //doSomthing.自定义的新增按钮点击事件
                   });
         }
	function removeHoverDom(treeId, treeNode) {
              //鼠标移除节点后，新增按钮消失
	     $("#addBtn_"+treeNode.tId).unbind().remove();
	};
       //第一次，异步请求出根节点。
         $.ajax({
	    url:"execute.do?method=getZTreeJson",//同步方式取根节点
	     type:'post',
	    dataType:'text',
	    success:function(data) {
	    var rootJson = eval(data);
	    $.fn.zTree.init($("myZtreeID"), setting, rootJson);
	    //展开第一个节点
	     var treeObj_ = $.fn.zTree.getZTreeObj("myZtreeID");
	    var nodes = treeObj_.getNodes();
	    if(nodes.length>0) {
	         treeObj_.expandNode(nodes[0], true, true, true);
	    }
	   }
	});   

--------------------------------------------
java代码

public String getZTreeJson(HttpServletRequest request){
         	//自己组织出这样的字串即可，			
String jsonStr = "[{id:1,pId:0,name:'基础根节点',open:true,isParent:true},{id:11,pId:1,name:'分组一1',open:true,isParent:},{id:12,pId:1,name:'叶子节点',open:true,isParent:false},{id:111,pId:11,name:'分组一叶子',open:true,isParent:false}]";
        return jsonStr;
}