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

1.添加div

<ul id="treeDemo" class="ztree"></ul>

2.寫ztee配置

<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>

前端源碼：

<%@ 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;	}	}