ztree学习使用之一

1，首先必要的几个jar包要准备好。

jquery.ztree.core-3.5.js：zTree核心包  
jquery.ztree.excheck-3.5.js：复选框功能包   
jquery.ztree.exedit-3.5.js：编辑功能包 

zTreeStyle.css，zTreeStyle_customized.css,bootstrap.min.css,最后一个是可选的，一般是结合bootstrap使用的，比较美观

2.前台jsp

<div class="row">
					<div class="col-md-2" id="nav_left" style="margin-top: 5px">
						<!-- Widget ID (each widget will need unique ID)-->	
							<header style="background-color: #307ecc;line-height: 30px;color: #fff;padding: 0;">
								<ul class="nav nav-tabs">
									<a data-toggle="tab"> <i class="fa fa-fw fa-lg fa-sitemap"></i> <span
											class="hidden-mobile hidden-tablet" style="margin-left:15px;">左边tree </span>
									</a>
								</ul>
							</header>
							<div>
							<!-- widget edit box -->
							<div class="jarviswidget-editbox">
								<!-- This area used as dropdown edit box -->
							</div>
							<!-- widget content -->
							<div class="widget-body">
									<div id="tree_tab_panel" class="tab-content padding-10" >
										<!-- ci樹 -->
										<div id="role_ci_div"
											class="zTreeDemoBackground left fade in active"
											style="height: 700px; overflow: auto">
											<ul id="role_clouds" class="ztree"></ul>
										</div>
									</div>
								</div>
							</div>
					</div>
				
					<div id="nav_right" class="col-md-10" style="margin-top: 5px">
						<!-- NEW WIDGET START -->
						<div class="col-md-12">
							<header id="ci_grid_header" style="padding: 0;  background: #307ecc none repeat scroll 0 0;">
				
								<ul id="" class="nav nav-tabs">
									<li style="background-color: #307ecc none repeat scroll 0 0;width:90; line-height: 30px;">
										<i class="fa fa-fw fa-lg fa-table" style="margin:0 5px 0 5px;"></i> <span>右边内容 </span>
									</li>
								</ul>
				
							</header>
							<div id="clouds_content_ci" style="height: 770;">
								<div class="col-sm-12" id="taskmanager"
									style="background-color: white; border: 1px solid #c2c2c2;">
									<div class="row" id="section1"
										style="height: 770; display: block; margin-left: 30">
										<fieldset>
											
											<div class="col-sm-12">
												xxx
				
											</div>
										</fieldset>
				
										<form class="form-horizontal">
											<div class="col-sm-12" id="cloud_table"></div>
											<input type="hidden" name="showIds" id="showIds" value="123" />
										</form>
									</div>
								</div>
							</div>						
						</div>
					</div>
				
				</div>

3,对应的js

// 載入ci樹
function loadCloudsCiTree() {
	var zTreeObj;
	var zSetting = {
		view : {
			showLine : false,
			showIcon : false,
			selectedMulti : false,
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId",
				rootPId : 0
			}
		},
		edit : {
			enable : false,
			drag : {
				isCopy : false,
				isMove : false
			},
			showRenameBtn : isShowRenameBtn,
			showRemoveBtn : isShowRemoveBtn
		},
		callback : {
			onClick : zTreeOnClick
		}
	};

	var zTreeNodes = [ {
		"id" : "0",
		"pId" : "-1",
		"name" : "全部",
		"open" : "true"
	}, {
		"id" : "1",
		"pId" : "0",
		"name" : "a"
	}, {
		"id" : "2",
		"pId" : "0",
		"name" : "b
	}, {
		"id" : "3",
		"pId" : "0",
		"name" : "c"
	}, {
		"id" : "4",
		"pId" : "0",
		"name" : "d"
	}, {
		"id" : "4",
		"pId" : "0",
		"name" : "e
	},{
		"id" : "4",
		"pId" : "0",
		"name" : "f"
	}  ];
	setContent("role_clouds", zSetting, zTreeNodes);
	zTreeObj = $.fn.zTree.getZTreeObj("role_clouds");

	// 默认选中第一个子节点
	var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
	if (nodes.length > 0) {
		var selectedNode;
		selectedNode = zTreeObj.selectNode(nodes[1]);
		$("#role_clouds li a span.treespan")
				.removeClass('label label-success');
		$("#role_clouds li .curSelectedNode  span:eq(2)").addClass(
				'label label-success');
		$("#role_clouds li .curSelectedNode  span:eq(2)").css('font-weight',
				'normal');
		$(".curSelectedNode").trigger("click");
	}

	$("#role_clouds").addClass("showIcon");
	var obj = $(".ztree li").has("ul").addClass('parent_li');

	// isShowRenameBtn，是否显示重命名按钮
	function isShowRenameBtn(treeId, treeNode) {
		return !treeNode.isParent;
	}

	// isShowRemoveBtn，是否显示移除按钮
	function isShowRemoveBtn(treeId, treeNode) {
		return !treeNode.isParent;
	}

	// zTreeOnClick，点击当前节点触发
	function zTreeOnClick(event, treeId, treeNode) {
		var planId = treeNode.id;
		if (planId != -1) {
			//loadContent(planId);
		}
	}

	// zTreeBeforeRename，输入新的节点名称触发，若返回true，继续触发zTreeOnRename
	function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
		var status = confirm("确定要将" + treeNode.name + "更名为" + newName + "吗?");
		return status;
	}
}

function setContent(treeid, setting, zNodes) {
    setting.view.showLine=true;
    setting.view.showIcon=false;
    $.fn.zTree.init($("#"+treeid), setting, zNodes);
    $.fn.zTree.getZTreeObj(treeid).expandAll(true);
    $('.ztree').find('li:has(ul)').addClass('parent_li');
    $('.ztree').find('ul.level0').removeAttr("style");
    $(".ztree li.level1").on("mouseover",function(e){
        if (!e) {
            e = window.event;
        } else {
            e.srcElement = e.target;
            var element = e.target;
            if($(element).hasClass('level1')&&$(element).is('a')){
                $(element).parent().removeAttr("style");    
                $(element).parent().css("background","#f1f1f1");    
            }else if($(element).hasClass('level1')&&$(element).is('li')){
                $(element).removeAttr("style");    
                $(element).css("background","#f1f1f1");    
            }else{
                $(element).parent().parent().removeAttr("style");    
                $(element).parent().parent().css("background","#f1f1f1");
            }
        }
    });
    $(".ztree li.level1").on("mouseout",function(e){
        if (!e) {
            e = window.event;
        } else {
            e.srcElement = e.target;
            var element = e.target;
            if($(element).hasClass('level1')&&$(element).is('a')){
                $(element).parent().removeAttr("style");    
            }else if($(element).hasClass('level1')&&$(element).is('li')){
                $(element).removeAttr("style");    
            }else{
                $(element).parent().parent().removeAttr("style");    
            }
        }
    });
    $(".ztree li a span.treespan").on("click",function(e){
        var ztree = $(this).parents(".ztree");
        ztree.find("li a span.treespan").removeClass('label label-success');
        $(this).addClass('label label-success');
        $(this).css('font-weight','normal');
    });
    $("#"+treeid).addClass("showIcon");
}