三、jq前端树插件ztree使用
2017-02-08 15:20
127 查看
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){
//删除之后执行此方法
}
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' 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.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)
f952
;
$.fn.zTree.init($("#treeDemo"), setting, rootJson);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('网络连接异常，请重试！');
}
});
</script>
前端源码：
后端：
控制层：
服务层：
vo层：
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){
//删除之后执行此方法
}
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' 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.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)
f952
;
$.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){
//删除之后执行此方法
}
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' 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.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;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery插件使用ZTree创建一个树
- zTree：JQuery树形插件使用示例
- 在AngularJS中使用jQuery的zTree插件的方法
- jquery树形插件zTree高级使用
- jquery树形插件zTree使用示例--入门
- jquery插件-zTree 使用出现- NotSupportedError: DOM Exception 9 错误
- Ztree分级插件的使用总结
- zTree插件下拉树使用入门教程
- zTree插件下拉树使用入门教程
- jquery树形插件zTree使用示例
- 使用ztree插件时，ie8下不能拖动的问题
- ztree插件的使用
- jQuery ztree 树插件的使用
- 在AngularJS中使用jQuery的zTree插件的方法
- jQuery使用zTree插件实现树形菜单和异步加载
- 无限树Jquery插件zTree的使用方法
- jQuery树形菜单，使用zTree插件,异步加载 & 编辑功能&Check 共存
- zTree -- jQuery 树插件 使用小结
- 页面弹框的一个小插件（可结合Ztree使用）
- ztree插件使用实例