ztree数使用模板

ztree数使用网站

<script src="${pageContext.request.contextPath}/static/ztreea/script/jquery-2.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/ztreea/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/ztreea/script/docs.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/ztreea/layer/layer.js"></script>
    <script src="${pageContext.request.contextPath}/static/ztreea/ztree/jquery.ztree.all-3.5.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/ztreea/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/ztreea/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/ztreea/ztree/zTreeStyle.css">
<script type="text/javascript">
       $(function(){

	     var setting = {
				async: {
					enable: true,
					url:"${pageContext.request.contextPath}/sources/jsonList",
					autoParam:["id", "name=n", "level=lv"]
				 },
				view: {
					addHoverDom: function(treeId, treeNode){  
						var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
						if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0)
						    return ;
						var s = '<span id="btnGroup'+treeNode.tId+'">';
						if ( treeNode.level == 0 ) {
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="addNode('+treeNode.id+')" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
						} else if ( treeNode.level == 1 ) {
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  οnclick="editNode('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
							if (treeNode.children.length == 0) {
								s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="deleteNode('+treeNode.id+')"  >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
							}
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="addNode('+treeNode.id+')" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
						} else if ( treeNode.level == 2 ) {
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  οnclick="editNode('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" οnclick="deleteNode('+treeNode.id+')" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
						}		
						s += '</span>';
						aObj.after(s);
					},
					removeHoverDom: function(treeId, treeNode){
						$("#btnGroup"+treeNode.tId).remove();
					}
				}
		  };
		  //permissionTree---------------------------
	        $.fn.zTree.init($("#permissionTree"), setting);
      });
        //添加节点
       function addNode(id){
    	   window.location.href = "${pageContext.request.contextPath}/pm-add.jsp?id="+id;
       }
       //编辑节点 更新节点
       function editNode(id) {
       	   window.location.href = "${pageContext.request.contextPath}/pm-edit.jsp?id="+id;
       }
       
       //删除节点
       function deleteNode(id){
    	   layer.confirm("删除资源信息, 是否继续",  {icon: 3, title:'提示'}, function(cindex){
				// 删除选择的用户信息
				$.ajax({
					type : "POST",
					url  : "${pageContext.request.contextPath}/sources/delete/"+id,
					data : {"_method":"delete"},
					success : function(result) {
						if (result.map.statusCode==200 ) {
							// 刷新数据
							var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
							treeObj.reAsyncChildNodes(null, "refresh");
						} else {
                           layer.msg("资源信息删除失败", {time:2000, icon:5, shift:6}, function(){
                           });
						}
					}
				});			
				layer.close(cindex);
			},function(cindex){
			    layer.close(cindex);
			});
       }

</script>

<tr align="center" bgcolor="#FAFAF1" height="22">
	 <td>
     <div class="panel-body">
     //permissionTree---------------------------
           <ul id="permissionTree" class="ztree"></ul>
	 </div>
    </td>
</tr>