前端框架——树形结构Ztree的使用
地址
官网：http://ztree.me
码云：https://gitee.com/zTree/zTree_v3
可以实现效果
使用方式
下载资源文件，引入到自己的项目中
<head>
<meta charset="UTF-8">
<title></title>
<!--导入样式文件和js文件 jquery要在ztree之前引入-->
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
</head>通过阅读API文档进行编码
实现简单的一棵树
<head>
<meta charset="UTF-8">
<title></title>
<!--导入样式文件和js文件 jquery要在ztree之前引入-->
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
<!--创建放置树的容器-->
<ul id="ztree1" class="ztree">
</ul>
</body>
<script>
$(function() {
//创建ztree的配置对象
var setting1 = {
treeId: "ztree1",
data: {
simpleData: {
enable: true, //设置使用简单数据格式
idKey: "id",//id标识 可以修改为数据库对应字段
pIdKey: "pId",//父级id
rootPId: 0,//根节点id
}
}，
//设置点击事件
callback:{
onClick:function(event,treeId,treeNode,clickFlag){
console.log(treeNode.name)
}
}
}
//树节点数据
var zNodes1 = [{
"id": 1,
"pId": 0,
"name": "菜单一"
},
{
"id": 101,
"pId": 1,
"name": "菜单一子菜单一"
},
{
"id": 102,
"pId": 1,
"name": "菜单一子菜单二"
},
{
"id": 2,
"pId": 0,
"name": "菜单二"
},
{
"id": 201,
"pId": 2,
"name": "菜单二子菜单一"
},
{
"id": 202,
"pId": 2,
"name": "菜单二子菜单二"
},
{
"id": 3,
"pId": 0,
"name": "菜单三"
},
];
//初始化第一个树
$.fn.zTree.init($("#ztree1"),setting1,zNodes1)
})
</script>实现一个可以勾选的树
//创建ztree的配置对象
var setting1 = {
treeId: "ztree1",
data: {
simpleData: {
enable: true, //设置使用简单数据格式
idKey: "id", //id标识 可以修改为数据库对应字段
pIdKey: "pId", //父级id
rootPId: 0, //根节点id
}
},
//设置点击事件
callback: {
onClick: function(event, treeId, treeNode, clickFlag) {
console.log(treeNode.name)
}
},
check: {
enable: true,//是否显示 checkbox/radio
chkStyle: "radio",//设置显示类型 值可选：radio/checkbox
}
}
function getCheckedNode(){
//获取选中的数据
//获取指定id的tree对象
var treeObj = $.fn.zTree.getZTreeObj("ztree1");
//获取选中的数据
var checkedNods = treeObj.getCheckedNodes();
console.log(checkedNods)
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入样式文件和js文件 jquery要在ztree之前引入-->
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
<!--创建放置树的容器-->
<ul id="ztree1" class="ztree">
</ul>
<button onclick="getCheckedNode()">获取已选的数据</button>
</body>
<script>
$(function() {
//树节点数据
var zNodes1 = [{
"id": 1,
"pId": 0,
"name": "菜单一"
},
{
"id": 101,
"pId": 1,
"name": "菜单一子菜单一"
},
{
"id": 102,
"pId": 1,
"name": "菜单一子菜单二"
},
{
"id": 2,
"pId": 0,
"name": "菜单二"
},
{
"id": 201,
"pId": 2,
"name": "菜单二子菜单一"
},
{
"id": 202,
"pId": 2,
"name": "菜单二子菜单二"
},
{
"id": 3,
"pId": 0,
"name": "菜单三"
},
];
//创建ztree的配置对象
var setting1 = {
treeId: "ztree1",
data: {
simpleData: {
enable: true, //设置使用简单数据格式
idKey: "id", //id标识 可以修改为数据库对应字段
pIdKey: "pId", //父级id
rootPId: 0, //根节点id
}
},
//设置点击事件
callback: {
onClick: function(event, treeId, treeNode, clickFlag) {
console.log(treeNode.name)
}
},
check: {
enable: true, //是否显示 checkbox/radio
chkStyle: "radio", //设置显示类型 值可选：radio/checkbox
}
}
//初始化第一个树
$.fn.zTree.init($("#ztree1"), setting1, zNodes1);
})
function getCheckedNode() {
//获取选中的数据
//获取指定id的tree对象
var treeObj = $.fn.zTree.getZTreeObj("ztree1");
//获取选中的数据
var checkedNods = treeObj.getCheckedNodes();
console.log(checkedNods)
}
</script>
</html>前端框架——树形结构Ztree的使用的更多相关文章
- js文章列表的树形结构输出
文章表设计成这样了 后端直接给了无任何处理的json数据,现在要前端实现树形结构的输出,其实后端处理更简单写,不过既然来了就码出来 var doclist = [{ "id": 1 ...
- 使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- zTree动态初始化树形结构加载
zTree动态加载初始化,纠结了一小下.最终还是做出来了.注意动态获取数据在前,初始化树形结构放在成功的回调函数中,并放在$(document).ready(function () {})中: $(d ...
- 使用像AdminLTE的前端框架，树形导航菜单实现方式都有哪些？
之前用easyui等富前端框架开发的时候都是使用封装好的县城的插件,现在使用最新的类似AdminLTE似的前段框架实现树形菜单都用什么方式? 后台拼接html然后前端用JS append方法添加还是直 ...
- ztree的树形结构不能正常显示原因
1.ztree树形结构不能正常显示情况如下: 2.原因之一:未给其类添加 ztree 原因二:未引用ztree的css样式 <link href="~/Content/CSS/zTre ...
- 递归、嵌套for循环、map集合方式实现树形结构菜单列表查询
有时候, 我们需要用到菜单列表,但是怎么样去实现一个菜单列表的编写呢,这是一重要的问题. 比如我们需要编写一个树形结构的菜单,那么我们可以使用JQuery的zTree插件:http://www.tre ...
- Web前端框架汇总
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
- 树形插件zTree与组织插件jOrgChart交互
<html> <head> <title>组织架构</title> <meta http-equiv="content-type&quo ...
随机推荐
- QML Settings 小的示例
QML 中使用 Settings 可以保存一些简单的信息,例如用户名,密码,窗口位置,大小等,没有Sqlite那么麻烦,简单易用哦~~~(环境:Qt5.8 for android ,Windows ...
- new和delete必须成对出现吗？【网上集合贴+个人总结】
new和delete必须成对出现吗?[网上集合贴+个人总结] 1.从内存泄露与否的角度考虑 new 和 delete不一定要成对出現.理论上是這樣的.但是从习惯上來說,new delete成對出現是一 ...
- 谷歌推出全新Android开发语言Sky：让App更流畅
土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 使用HTML 创建Mac OS App 视频教程. 官方QQ群: (1)App实践出真知 434 ...
- [铁人赛] ASP.NET Core 2 系列- 从头开始
来势汹汹的.NET Core似乎要取代.NET Framework,ASP.NET也随之发布.NET Core版本.虽说名称沿用ASP.NET,但相较于ASP.NET确有许多架构上的差异,可说是除了名 ...
- Realm_King 之 .NET 打包详细教程(A)
最近一直在winform程序开发,听说身边的人不是很了解打包,给大家提供一点简单的打包,相信能看懂的... (一)右键解决方案: 在弹出"添加新项目"窗体中找到 其他项目类型=& ...
- web.congfig 禁用 ViewState Session
<!--禁用 ViewState Session--> <pages enableViewState="false" enableSessionState=&qu ...
- 检索 COM 类工厂中 CLSID 为 {{10020200-E260-11CF-AE68-00AA004A34D5}} 的组件时失败解决办法
检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下: 第一步:首先将msvcr71.dll, SQLDM ...
- mogodbshell中数组对象查询修改方法
在mongodb中,存在如下数据 { "_id" : ObjectId("59af55078a8fc5e51ff425de"), "title&quo ...
- Spring_two
Spring_two 基于注解的IOC配置 准备工作(参考上一篇) ); 接口的实现类AccountDaoImpl.java修改 /** * 账户的持久层实现类 */ @Repository(&quo ...
- Linux基础及系统优化
1 如何实现自动挂载操作(光驱自动挂载--fstab) 1.1 方法 第一种方法:编辑fstab文件 vi /etc/fstab /dev/cdrom /mnt iso9660 default 0 0 ...