zTree的简单使用

ssm中zTreede 简单使用本人将bootstrap和zTree一起使用
最重要的将js和css导入
<!--zTree  -->
    <link rel="stylesheet" href="css/demo.css" type="text/css">  
        <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
    **<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>**  //要在前面引用，不然会有很多错
    <script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>  
    <script type="text/javascript" src="js/jquery.ztree.excheck.min.js"></script>  
    <script type="text/javascript" src="js/jquery.ztree.exedit.min.js"></script> 
    <!-- 导航栏 -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/hoverifyBootnav.css">
    <script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/hoverifyBootnav.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<style type="text/css">.separator { margin-bottom: 20px;}</style> 
1，后台数据为json的//可以参考
List<HashMap<String,Object>> children = new ArrayList<HashMap<String,Object>>();
1.1具体实现
	@ResponseBody//ssm中异步传值
	@RequestMapping("getJson")//前台数据请求地址
	public List<HashMap<String,Object>> getJson(
			String name,
			HttpServletRequest requst,
			HttpServletResponse res,String id,String level,String otherParam,String url) throws IOException{
		 List<HashMap<String,Object>> children = new ArrayList<HashMap<String,Object>>();  
			for(int i = 0; i < 5; i++){  
	            HashMap<String,Object> hm = new HashMap<String,Object>();   //最外层，父节点             
	            hm.put("name", "张"+i); //name属性，显示节点名称    
	            hm.put("id",id+i);//id属性  ，数据传递    
	            hm.put("pId", id);  
	            hm.put("url", "aa.jsp");
	            children.add(hm); 
	        }  
		return children;//返回到页面时就是简单json数据
		
	}
2.前台页面ajax版
<script type="text/javascript">
	var setting = {  
	    isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
	    treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
	    treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
	    showLine : true,                  //是否显示节点间的连线  
	    checkable : true                  //每个节点上是否显示 CheckBox  
	};  
  
var zTree;  
var treeNodes;  
  
$(function(){  
    $.ajax({  
        async : false,  
        cache:false,  
        type: 'POST',  
        dataType : "json",  
        url: "<%=basePath%>getJson.htm",//请求的action路径  
        error: function () {//请求失败处理函数  
            alert('请求失败');  
        },  
        success:function(data){ //请求成功后处理函数。    
            alert(data);  
            treeNodes = data;   //把后台封装好的简单Json格式赋给treeNodes  
        }  
    });  
  
    //zTree = $("#tree").ztree(setting, treeNodes); 
		$("#sel").click(function() {
			$.fn.zTree.init($("#treeDemo"),setting,treeNodes);
		});
}); 
	</script>
2.1、body里面
  <div class="row" align="center">
		<div class="separator col-xs-12 col-sm-6">
			<ul class="nav nav-tabs" data-hbn data-hbn-options='{ "duration_effect_on" : 700, "duration_effect_off" : 1000}'>
				<li role="presentation" class="active"><a href="#">首页</a></li>
				<li role="presentation"><a id="sel" >查询</a></li>
				<li role="presentation"><a >增加</a></li>
				<li role="presentation"><a >修改</a></li>
				<li role="presentation"><a >删除</a></li>
			</ul>
		</div>
	</div>
     <div>
    	<ul id="treeDemo" class="tree"></ul>
    </div>
    3、zTree版前端页面
    <script type="text/javascript">
	$(function(){
	   var setting = {
			async : {
				enable : true,
				url : "getConZtree.htm",
				autoParam : [ "id", "name=n", "level=lv" ],
				otherParam : {
					"otherParam" : "zTreeAsyncTest"
				},
				dataFilter : filter
			},
			edit : {
				enable : true
			},
			data : {
				simpleData : {
					enable : true
				}
			},
		
		};
	
		function filter(treeId, parentNode, childNodes) {
			if (!childNodes) return null;
			for (var i = 0, l = childNodes.length; i < l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
		
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_" + treeNode.id).unbind().remove();
		}
		;
	
		$("#sel").click(function() {
			$.fn.zTree.init($("#treeDemo"), setting);
		});
			}); 
	
	
	</script>
    3.1、body中内容
    <div class="row" align="center">
		<div class="separator col-xs-12 col-sm-6">
			<ul class="nav nav-tabs" data-hbn data-hbn-options='{ "duration_effect_on" : 700, "duration_effect_off" : 1000}'>
				<li role="presentation" class="active"><a href="#">首页</a></li>
				<li role="presentation"><a id="sel" >查询</a></li>
				<li role="presentation"><a >增加</a></li>
				<li role="presentation"><a >修改</a></li>
				<li role="presentation"><a >删除</a></li>
			</ul>
		</div>
	</div>
	 <div>
    	<ul id="treeDemo" class="ztree"></ul>
    </div>