三、jq前端树插件ztree使用

2024-04-27 15:14:29
字体：大中小
来源：转载
供稿：网友
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"></i> 首页 <span class="c-gray en">></span> 管理员管理 <span class="c-gray en">></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"></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){    //删除之后执行此方法	if(!treeNode.pId==0){  		$.ajax({		    url: "/wwwydl/s/admin/delsubcolumn",		    type: "post",		    dataType: "json",		    data:{subcolumnid:treeNode.id,columnid:treeNode.pId},    	    success: function (result) {    	        if (result.success) {    	        	layer.msg('删除成功!',{icon:1,time:1500});    	        }else{    	        	layer.msg(result.msg,{icon:1,time:1500});     	        }    			},		    error: function (XMLHttpRequest, textStatus, errorThrown) {					alert('网络连接异常，请重试！');		    }		});  		}else{  			$.ajax({			    url: "/wwwydl/s/admin/delcolumn",			    type: "post",			    dataType: "json",			    data:{columnid:treeNode.id},	    	    success: function (result) {	    	        if (result.success) {	    	        	layer.msg('删除成功!',{icon:1,time:1500});	    	        }else{	    	        	layer.msg(result.msg,{icon:1,time:1500});	    	        }	    			},			    error: function (XMLHttpRequest, textStatus, errorThrown) {						alert('网络连接异常，请重试！');			    }			}); 		} }  function renameFun(event,treeId,treeNode){      //重命名之后执行此方法     	if(!treeNode.pId==0){  		$.ajax({		    url: "/wwwydl/s/admin/upsubcolumnname",		    type: "post",		    dataType: "json",		    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();    	        }else{    	        	layer.msg(result.msg,{icon:1,time:1500});     	        }    			},		    error: function (XMLHttpRequest, textStatus, errorThrown) {					alert('网络连接异常，请重试！');		    }		});  		}else{  			$.ajax({			    url: "/wwwydl/s/admin/upcolumnname",			    type: "post",			    dataType: "json",			    data:{columnid:treeNode.id,columnname:treeNode.name},	    	    success: function (result) {	    	        if (result.success) {	    	        	layer.msg('修改成功!',{icon:1,time:1500});	    	        	testIframe.window.location.reload();	    	        }else{	    	        	layer.msg(result.msg,{icon:1,time:1500});	    	        }	    			},			    error: function (XMLHttpRequest, textStatus, errorThrown) {						alert('网络连接异常，请重试！');			    }			}); 		} }  function beforeRemove(treeId, treeNode) {           //删除之前的回调函数，              // return false; //阻止删除  }  function beforeRename(treeId, treeNode, newName, isCancel) {           //重命名之前回调函数              //return false;//阻止重命名  }   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' onfocus='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.msg,{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.msg,{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;	}	}