声明:笔者刚刚当程序员,有误请包涵
zTree树形结构前端控件
官网 http://www.ztree.me/v3/main.php#_zTreeInfo
这是个非常灵活的树形控件,有很多款式,非常好用
如图1
使用这个控件有以下步骤:
第一,到官网上下载插件,放到你的工程里面
如图2
第二,在页面中引入了js和css之后就可以写代码了,
我把最简单的例子贴出来:
<!-- 这个页面是最基础的页面 , 什么都不需要配置 -->
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="First.aspx.cs" Inherits="ZTreeTest1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick: zTreeOnClick
}
};
function zTreeOnClick(event, treeId, treeNode) {
$("#inp").val("id="+treeNode.id + ", name=" + treeNode.name + ",pId=" + treeNode.pId);
};
var zNodes = [
{ id: 1, pId: 0, name: "[core] 基本功能 演示" },
{ id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据" },
{ id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据" },
{ id: 103, pId: 1, name: "不显示 连接线" },
{ id: 104, pId: 1, name: "不显示 节点 图标" },
{ id: 105, pId: 1, name: "自定义图标 -- icon 属性" },
{ id: 106, pId: 1, name: "自定义图标 -- iconSkin 属性" },
{ id: 107, pId: 1, name: "自定义字体" },
{ id: 115, pId: 1, name: "超链接演示" },
{ id: 108, pId: 1, name: "异步加载 节点数据" },
{ id: 109, pId: 1, name: "用 zTree 方法 异步加载 节点数据" },
{ id: 110, pId: 1, name: "用 zTree 方法 更新 节点数据" },
{ id: 111, pId: 1, name: "单击 节点 控制" },
{ id: 112, pId: 1, name: "展开 / 折叠 父节点 控制" },
{ id: 113, pId: 1, name: "根据 参数 查找 节点" },
{ id: 114, pId: 1, name: "其他 鼠标 事件监听" },
{ id: 2, pId: 0, name: "[excheck] 复/单选框功能 演示" },
{ id: 201, pId: 2, name: "Checkbox 勾选操作" },
{ id: 206, pId: 2, name: "Checkbox nocheck 演示" },
{ id: 207, pId: 2, name: "Checkbox chkDisabled 演示" },
{ id: 208, pId: 2, name: "Checkbox halfCheck 演示" },
{ id: 202, pId: 2, name: "Checkbox 勾选统计" },
{ id: 203, pId: 2, name: "用 zTree 方法 勾选 Checkbox" },
{ id: 204, pId: 2, name: "Radio 勾选操作" },
{ id: 209, pId: 2, name: "Radio nocheck 演示" },
{ id: 210, pId: 2, name: "Radio chkDisabled 演示" },
{ id: 211, pId: 2, name: "Radio halfCheck 演示" },
{ id: 205, pId: 2, name: "用 zTree 方法 勾选 Radio" },
{ id: 3, pId: 0, name: "[exedit] 编辑功能 演示", open: false },
{ id: 301, pId: 3, name: "拖拽 节点 基本控制", file: "exedit/drag" },
{ id: 302, pId: 3, name: "拖拽 节点 高级控制", file: "exedit/drag_super" },
{ id: 303, pId: 3, name: "用 zTree 方法 移动 / 复制 节点", file: "exedit/drag_fun" },
{ id: 304, pId: 3, name: "基本 增 / 删 / 改 节点", file: "exedit/edit" },
{ id: 305, pId: 3, name: "高级 增 / 删 / 改 节点", file: "exedit/edit_super" },
{ id: 306, pId: 3, name: "用 zTree 方法 增 / 删 / 改 节点", file: "exedit/edit_fun" },
{ id: 307, pId: 3, name: "异步加载 & 编辑功能 共存", file: "exedit/async_edit" },
{ id: 308, pId: 3, name: "多棵树之间 的 数据交互", file: "exedit/multiTree" },
{ id: 4, pId: 0, name: "大数据量 演示", open: false },
{ id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common" },
{ id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async" },
{ id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page" },
{ id: 5, pId: 0, name: "组合功能 演示", open: false },
{ id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot" },
{ id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick" },
{ id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath" },
{ id: 504, pId: 5, name: "添加 自定义控件", file: "super/diydom" },
{ id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio" },
{ id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu" },
{ id: 513, pId: 5, name: "OutLook 样式的左侧菜单", file: "super/left_menuForOutLook" },
{ id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu" },
{ id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file: "super/select_menu_checkbox" },
{ id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file: "super/select_menu_radio" },
{ id: 508, pId: 5, name: "右键菜单 的 实现", file: "super/rightClickMenu" },
{ id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther" },
{ id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll" },
{ id: 6, pId: 0, name: "其他扩展功能 演示", open: false },
{ id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common" },
{ id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox" },
{ id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio" }
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
})//end document.ready
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="inp" name='inp' style=" width:300px"/>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</div>
</form>
</body>
</html>
运行结果如图3
注释:
我们先看到html部分,
页面只有一个input和一个ul
ul是用来作为树形结构的载体
input是用来显示东西
然后我们看到js部分
这里可以分为3块,
第一块是setting:树形结构的配置
第二块是zNodes:节点的json
这串长长的json有三个特点:1有独一无二的id;有父节点id(pId);有名字(name)
到时候你自己的程序后台就可以返回一系列带有该结构的json
就可以显示你想要的内容。具体一点就是用$.getJson
例如:
$.getJSON("返回json的地址", function (data) {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, data);
})//end get json
第三块:初始化 $.fn.zTree.init
这个控件可能用起来最麻烦的就是取构造那个treeNode的json
慢慢拼,还是可以拼出来的!!!!
最后贴一段带有checkbox的树形结构(很常用)
注意记得引入 jquery.ztree.excheck-3.5.js
代码如下:
<!-- 这个页面是带有checkbox的下拉框,要用到 excheck.js -->
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Third.aspx.cs" Inherits="ZTreeTest1.Third" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--引入js及css -->
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script src="js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>
<script type="text/javascript">
function onCheck(e, treeId, treeNode) {
alert("id="+treeNode.id+ " ,name="+treeNode.name + " ,pId="+treeNode.pId);
}
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "", "N": "" }
},
callback: {
onCheck: onCheck
}
};
var zNodes = [
{ id: 1, pId: 0, name: "随意勾选 1" },
{ id: 11, pId: 1, name: "随意勾选 1-1" },
{ id: 111, pId: 11, name: "随意勾选 1-1-1" },
{ id: 112, pId: 11, name: "随意勾选 1-1-2" },
{ id: 12, pId: 1, name: "随意勾选 1-2" },
{ id: 121, pId: 12, name: "随意勾选 1-2-1" },
{ id: 122, pId: 12, name: "随意勾选 1-2-2" },
{ id: 2, pId: 0, name: "随意勾选 2" },
{ id: 21, pId: 2, name: "随意勾选 2-1" },
{ id: 22, pId: 2, name: "随意勾选 2-2" },
{ id: 221, pId: 22, name: "随意勾选 2-2-1" },
{ id: 222, pId: 22, name: "随意勾选 2-2-2" },
{ id: 23, pId: 2, name: "随意勾选 2-3" }
];
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#btn").click(function () {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var idList = "";
$.each(nodes, function (index, info) {
if (idList != "") {
idList += ",";
}
idList += info.id;
});
alert(idList);
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id='inp' name='inp' />
<input id='btn' type="button" value='click' />
<ul id="treeDemo" class="ztree">
</ul>
</form>
</body>
</html>
贴图4:
zTree树形结构前端控件
官网 http://www.ztree.me/v3/main.php#_zTreeInfo
这是个非常灵活的树形控件,有很多款式,非常好用
如图1
使用这个控件有以下步骤:
第一,到官网上下载插件,放到你的工程里面
如图2
第二,在页面中引入了js和css之后就可以写代码了,
我把最简单的例子贴出来:
<!-- 这个页面是最基础的页面 , 什么都不需要配置 -->
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="First.aspx.cs" Inherits="ZTreeTest1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick: zTreeOnClick
}
};
function zTreeOnClick(event, treeId, treeNode) {
$("#inp").val("id="+treeNode.id + ", name=" + treeNode.name + ",pId=" + treeNode.pId);
};
var zNodes = [
{ id: 1, pId: 0, name: "[core] 基本功能 演示" },
{ id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据" },
{ id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据" },
{ id: 103, pId: 1, name: "不显示 连接线" },
{ id: 104, pId: 1, name: "不显示 节点 图标" },
{ id: 105, pId: 1, name: "自定义图标 -- icon 属性" },
{ id: 106, pId: 1, name: "自定义图标 -- iconSkin 属性" },
{ id: 107, pId: 1, name: "自定义字体" },
{ id: 115, pId: 1, name: "超链接演示" },
{ id: 108, pId: 1, name: "异步加载 节点数据" },
{ id: 109, pId: 1, name: "用 zTree 方法 异步加载 节点数据" },
{ id: 110, pId: 1, name: "用 zTree 方法 更新 节点数据" },
{ id: 111, pId: 1, name: "单击 节点 控制" },
{ id: 112, pId: 1, name: "展开 / 折叠 父节点 控制" },
{ id: 113, pId: 1, name: "根据 参数 查找 节点" },
{ id: 114, pId: 1, name: "其他 鼠标 事件监听" },
{ id: 2, pId: 0, name: "[excheck] 复/单选框功能 演示" },
{ id: 201, pId: 2, name: "Checkbox 勾选操作" },
{ id: 206, pId: 2, name: "Checkbox nocheck 演示" },
{ id: 207, pId: 2, name: "Checkbox chkDisabled 演示" },
{ id: 208, pId: 2, name: "Checkbox halfCheck 演示" },
{ id: 202, pId: 2, name: "Checkbox 勾选统计" },
{ id: 203, pId: 2, name: "用 zTree 方法 勾选 Checkbox" },
{ id: 204, pId: 2, name: "Radio 勾选操作" },
{ id: 209, pId: 2, name: "Radio nocheck 演示" },
{ id: 210, pId: 2, name: "Radio chkDisabled 演示" },
{ id: 211, pId: 2, name: "Radio halfCheck 演示" },
{ id: 205, pId: 2, name: "用 zTree 方法 勾选 Radio" },
{ id: 3, pId: 0, name: "[exedit] 编辑功能 演示", open: false },
{ id: 301, pId: 3, name: "拖拽 节点 基本控制", file: "exedit/drag" },
{ id: 302, pId: 3, name: "拖拽 节点 高级控制", file: "exedit/drag_super" },
{ id: 303, pId: 3, name: "用 zTree 方法 移动 / 复制 节点", file: "exedit/drag_fun" },
{ id: 304, pId: 3, name: "基本 增 / 删 / 改 节点", file: "exedit/edit" },
{ id: 305, pId: 3, name: "高级 增 / 删 / 改 节点", file: "exedit/edit_super" },
{ id: 306, pId: 3, name: "用 zTree 方法 增 / 删 / 改 节点", file: "exedit/edit_fun" },
{ id: 307, pId: 3, name: "异步加载 & 编辑功能 共存", file: "exedit/async_edit" },
{ id: 308, pId: 3, name: "多棵树之间 的 数据交互", file: "exedit/multiTree" },
{ id: 4, pId: 0, name: "大数据量 演示", open: false },
{ id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common" },
{ id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async" },
{ id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page" },
{ id: 5, pId: 0, name: "组合功能 演示", open: false },
{ id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot" },
{ id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick" },
{ id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath" },
{ id: 504, pId: 5, name: "添加 自定义控件", file: "super/diydom" },
{ id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio" },
{ id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu" },
{ id: 513, pId: 5, name: "OutLook 样式的左侧菜单", file: "super/left_menuForOutLook" },
{ id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu" },
{ id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file: "super/select_menu_checkbox" },
{ id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file: "super/select_menu_radio" },
{ id: 508, pId: 5, name: "右键菜单 的 实现", file: "super/rightClickMenu" },
{ id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther" },
{ id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll" },
{ id: 6, pId: 0, name: "其他扩展功能 演示", open: false },
{ id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common" },
{ id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox" },
{ id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio" }
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
})//end document.ready
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="inp" name='inp' style=" width:300px"/>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</div>
</form>
</body>
</html>
运行结果如图3
注释:
我们先看到html部分,
页面只有一个input和一个ul
ul是用来作为树形结构的载体
input是用来显示东西
然后我们看到js部分
这里可以分为3块,
第一块是setting:树形结构的配置
第二块是zNodes:节点的json
这串长长的json有三个特点:1有独一无二的id;有父节点id(pId);有名字(name)
到时候你自己的程序后台就可以返回一系列带有该结构的json
就可以显示你想要的内容。具体一点就是用$.getJson
例如:
$.getJSON("返回json的地址", function (data) {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, data);
})//end get json
第三块:初始化 $.fn.zTree.init
这个控件可能用起来最麻烦的就是取构造那个treeNode的json
慢慢拼,还是可以拼出来的!!!!
最后贴一段带有checkbox的树形结构(很常用)
注意记得引入 jquery.ztree.excheck-3.5.js
代码如下:
<!-- 这个页面是带有checkbox的下拉框,要用到 excheck.js -->
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Third.aspx.cs" Inherits="ZTreeTest1.Third" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--引入js及css -->
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script src="js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>
<script type="text/javascript">
function onCheck(e, treeId, treeNode) {
alert("id="+treeNode.id+ " ,name="+treeNode.name + " ,pId="+treeNode.pId);
}
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "", "N": "" }
},
callback: {
onCheck: onCheck
}
};
var zNodes = [
{ id: 1, pId: 0, name: "随意勾选 1" },
{ id: 11, pId: 1, name: "随意勾选 1-1" },
{ id: 111, pId: 11, name: "随意勾选 1-1-1" },
{ id: 112, pId: 11, name: "随意勾选 1-1-2" },
{ id: 12, pId: 1, name: "随意勾选 1-2" },
{ id: 121, pId: 12, name: "随意勾选 1-2-1" },
{ id: 122, pId: 12, name: "随意勾选 1-2-2" },
{ id: 2, pId: 0, name: "随意勾选 2" },
{ id: 21, pId: 2, name: "随意勾选 2-1" },
{ id: 22, pId: 2, name: "随意勾选 2-2" },
{ id: 221, pId: 22, name: "随意勾选 2-2-1" },
{ id: 222, pId: 22, name: "随意勾选 2-2-2" },
{ id: 23, pId: 2, name: "随意勾选 2-3" }
];
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#btn").click(function () {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var idList = "";
$.each(nodes, function (index, info) {
if (idList != "") {
idList += ",";
}
idList += info.id;
});
alert(idList);
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id='inp' name='inp' />
<input id='btn' type="button" value='click' />
<ul id="treeDemo" class="ztree">
</ul>
</form>
</body>
</html>
贴图4: