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> <spanclass="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，继续触发zTreeOnRenamefunction 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");}