三、jq前端树插件ztree使用

最新推荐文章于 2024-08-15 14:23:35 发布

悠然～.～

最新推荐文章于 2024-08-15 14:23:35 发布

阅读量2.8k

点赞数

分类专栏：前端-插件文章标签：前端插件

本文链接：https://blog.csdn.net/lze693/article/details/54927330

版权

前端-插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ztree 插件使用（使用了h-ui框架）

1.添加div

2.写ztee配置

前端源码：

<%@ page language="Java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../resources/common/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../resources/common/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="../resources/common/lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../resources/common/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="../resources/common/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="../resources/common/static/h-ui.admin/css/style.css" />
<link rel="stylesheet" href="../resources/common/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	</style>
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>栏目分类</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span class="c-gray en">&gt;</span> 栏目管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<table class="table">
	<tr>
		<td width="400" class="va-t"><ul id="treeDemo" class="ztree"></ul></td>
		<td class="va-t"><IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100%  height=600px SRC="admin-column-add.jsp"></IFRAME></td>
	</tr>
</table>
<script type="text/javascript" src="../resources/common/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../resources/common/lib/layer/2.1/layer.js"></script> 
<script type="text/javascript" src="../resources/common/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script> 
<script type="text/javascript" src="../resources/common/static/h-ui/js/H-ui.js"></script> 
<script type="text/javascript" src="../resources/common/static/h-ui.admin/js/H-ui.admin.js"></script> 
<script type="text/javascript">
var setting = {
    edit: {  
        drag:{  
            isMove:false,  
            isCopy:false  
        },  
        enable: true,//不可编辑  
        showAddBtn: true,//显示增加按钮  
        showRemoveBtn: showRemoveBtn,  
        showRenameBtn: showRenameBtn  
    },  
	data: {
		simpleData: {
			enable: true
		}
	}, 
    view: {  
        addHoverDom: addHoverDom,  
        removeHoverDom: removeHoverDom,  
        selectedMulti: false,
    },  
    callback: {  
        beforeRemove:beforeRemove,  
        beforeRename:beforeRename,  
        onRemove: removeFun,  
        onRename: renameFun,  
    }
}; 
function removeFun(event,treeId,treeNode){
    //删除之后执行此方法


}  
function renameFun(event,treeId,treeNode){  
    //重命名之后执行此方法      
}  


function beforeRemove(treeId, treeNode) {  
         //删除之前的回调函数，  
    var  Remove= false;
	if(!treeNode.pId==0){  
 		$.ajax({
		    url: "/wwwydl/s/admin/delsubcolumn",
		    type: "post",
		    dataType: "json",
		    data:{subcolumnid:treeNode.id,columnid:treeNode.pId},
            async : false,
    	    success: function (result) {
    	        if (result.success) {    	        	
    	        	layer.msg('删除成功!',{icon:1,time:1500});
    	        	Remove=true;
    	        }else{ 	        	
    	        	layer.msg(result.message,{icon:1,time:1500}); 
    	        }
    			},
		    error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert('网络连接异常，请重试！');
		    }
		}); 
 		return Remove;
		}else{  
 			$.ajax({
			    url: "/wwwydl/s/admin/delcolumn",
			    type: "post",
			    dataType: "json",
	            async : false,
			    data:{columnid:treeNode.id},
	    	    success: function (result) {
	    	        if (result.success) {
	    	        	layer.msg('删除成功!',{icon:1,time:1500});
	    	        	Remove= true;
	    	        }else{
	    	        	layer.msg(result.message,{icon:1,time:1500});
	    	        }
	    			},
			    error: function (XMLHttpRequest, textStatus, errorThrown) {
						alert('网络连接异常，请重试！');
			    }
			}); 
 			return Remove;
		} 
}  
function beforeRename(treeId, treeNode, newName, isCancel) {  
	 var  Remove= false;
	if(!treeNode.pId==0){  
		$.ajax({
		    url: "/wwwydl/s/admin/upsubcolumnname",
		    type: "post",
		    dataType: "json",
		    async: false ,
		    data:{subcolumnid:treeNode.id,subcolumnname:treeNode.name,columnid:treeNode.pId},
    	    success: function (result) {
    	        if (result.success) {
    	        	layer.msg('修改成功!',{icon:1,time:1500});
    	        	testIframe.window.location.reload();
    	        	Remove=true;
    	        }else{
    	        	layer.msg(result.message,{icon:1,time:1500});
    	        }
    			},
		    error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert('网络连接异常，请重试！');
		    }
		});  
		}else{  
			$.ajax({
			    url: "/wwwydl/s/admin/upcolumnname",
			    type: "post",
			    dataType: "json",
			    async: false ,
			    data:{columnid:treeNode.id,columnname:treeNode.name},
	    	    success: function (result) {
	    	        if (result.success) {
	    	        	layer.msg('修改成功!',{icon:1,time:1500});
	    	        	testIframe.window.location.reload();
	    	        	Remove=true;
	    	        }else{
	    	        	layer.msg(result.message,{icon:1,time:1500});
	    	        }
	    			},
			    error: function (XMLHttpRequest, textStatus, errorThrown) {
						alert('网络连接异常，请重试！');
			    }
			}); 
		}
	return Remove;
}  
 function showRemoveBtn(treeId, treeNode) {  
         //用于控制删除按钮的显示与否  
if(treeNode.id == 0){  
   //隐藏删除按钮  
   return false;  
}else{  
   return true;  
}  
}  
function showRenameBtn(treeId, treeNode) {  
        //用于控制修改按钮的显示与否  
if(treeNode.id == 0){  
   //隐藏修改按钮  
   return false;  
}else{  
   return true;  
}  
}
var newCount1 = 1;
var newCount2 = 1;
function addHoverDom(treeId, treeNode) {
	if(treeNode.pId==0||treeNode.id==0){  
		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' οnfοcus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var name1="new_column" + (newCount1++);
			var name2="new_subcolumn" + (newCount2++);
			if(treeNode.id==0){
				$.ajax({
				    url: "/wwwydl/s/admin/addcolumn",
				    type: "post",
				    dataType: "json",
				    data:{columnname:name1},
		    	    success: function (result) {
		    	        if (result.success) {
		    	        	zTree.addNodes(treeNode, {id:result.data, pId:treeNode.id, name:name1});			
		    	        	layer.msg('添加成功!',{icon:1,time:1500});
		    	        	testIframe.window.location.reload();
		    	        }else{
		    	        	layer.msg(result.message,{icon:1,time:1500});
		    	        }
		    			},
				    error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert('网络连接异常，请重试！');
				    }
				}); 				
			}else if(treeNode.pId==0){
				$.ajax({
				    url: "/wwwydl/s/admin/addsubcolumn",
				    type: "post",
				    dataType: "json",
				    data:{subcolumnname:name2,columnid:treeNode.id},
		    	    success: function (result) {
		    	        if (result.success) {
		    	        	zTree.addNodes(treeNode, {id:result.data, pId:treeNode.id, name:name2});			
		    	        	layer.msg('添加成功!',{icon:1,time:1500});
		    	        	testIframe.window.location.reload();
		    	        }else{
		    	        	layer.msg(result.message,{icon:1,time:1500});
		    	        }
		    			},
				    error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert('网络连接异常，请重试！');
				    }
				}); 
			}			
			return false;
		});  
	}
};
function removeHoverDom(treeId, treeNode) {  
     //鼠标移除节点后，新增按钮消失  
$("#addBtn_"+treeNode.tId).unbind().remove();  
}; 
//第一次，异步请求出根节点。  
	$.ajax({
	    url: "/wwwydl/s/admin/getcolumnztree",
	    type: "get",
	    dataType: "json",
	    success: function (result) {
	        if (result.success) {
	        	var rootJson = eval(result.data); 
	        	$.fn.zTree.init($("#treeDemo"), setting, rootJson);
	        }
		},
	    error: function (XMLHttpRequest, textStatus, errorThrown) {
				alert('网络连接异常，请重试！');
	    }
	}); 
</script>
</body>
</html>

效果图：

后端：

控制层：

	/**
	 * 方法描述：获取栏目ztree
	 *@return
	 */
	@RequestMapping("/getcolumnztree")
	@ResponseBody
	public ResResult getcolumnztree(){	
		logger.info("后端-系统管理-获取栏目ztree");
		List<ZtreeVo> ztreelist=columnService.getcolumnztree();	
        return ResResult.ok(ztreelist);
	}

服务层：

       	public List<ZtreeVo> getcolumnztree() {
		List<Mcolumn> column=getcolumn();
		List<ZtreeVo> ztreelist=new ArrayList<ZtreeVo>();
		ZtreeVo ztree=new ZtreeVo();
		ztree.setId(0);
		ztree.setpId(-1);
		ztree.setName("栏目列表");
		ztree.setOpen(true);
		ztreelist.add(ztree);
		for(Mcolumn c:column){
			ZtreeVo ztree1=new ZtreeVo();
			ztree1.setId(c.getColumnid());
			ztree1.setpId(0);
			ztree1.setName(c.getColumnname());
			ztree1.setOpen(true);
			ztreelist.add(ztree1);
			List<Subcolumn> subcolumns=subColumnService.getsubcolumnid(c.getColumnid());
			for(Subcolumn s:subcolumns){
				ZtreeVo ztree2=new ZtreeVo();
				int id= Integer.parseInt(Integer.toString(c.getColumnid())+Integer.toString(s.getSubcolumnid()));
				ztree2.setId(id);
				ztree2.setpId(s.getColumnid());
				ztree2.setName(s.getSubcolumnname());
				ztree2.setOpen(false);
				ztreelist.add(ztree2);
			}
		}
		return ztreelist;
	}

vo层：

public class ZtreeVo {
	/**
	 * ztree id
	 */
	private int id;
	/**
	 * ztree pId
	 */
	private int pId;
	/**
	 * ztree name
	 */
	private String name;
	/**
	 * ztree url
	 */
	private String url;

	/**
	 * ztree icon 节点自定义图标的 URL 路径
	 */
	private String icon;
	/**
	 * ztree iconClose 父节点自定义折叠时图标的 URL 路径
	 */
	private String iconClose;
	/**
	 * ztree iconOpen 父节点自定义展开时图标的 URL 路径
	 */
	private String iconOpen;
	/**
	 * ztree iconSkin 节点自定义图标的 className
	 */
	private String iconSkin;
	/**
	 * ztree open
	 */
	private boolean open;
	

	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getpId() {
		return pId;
	}
	public void setpId(int pId) {
		this.pId = pId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}	
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}	
	public String getIconClose() {
		return iconClose;
	}
	public void setIconClose(String iconClose) {
		this.iconClose = iconClose;
	}
	public String getIconOpen() {
		return iconOpen;
	}
	public void setIconOpen(String iconOpen) {
		this.iconOpen = iconOpen;
	}
	public String getIconSkin() {
		return iconSkin;
	}
	public void setIconSkin(String iconSkin) {
		this.iconSkin = iconSkin;
	}
	public boolean isOpen() {
		return open;
	}
	public void setOpen(boolean open) {
		this.open = open;
	}	
}