前端框架——树形结构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 ...
随机推荐
- new和delete必须成对出现吗？【网上集合贴+个人总结】
new和delete必须成对出现吗?[网上集合贴+个人总结] 1.从内存泄露与否的角度考虑 new 和 delete不一定要成对出現.理论上是這樣的.但是从习惯上來說,new delete成對出現是一 ...
- 获取其他进程的命令行（ReadProcessMemory其它进程的PPROCESS_PARAMETERS和PEB结构体）
type UNICODE_STRING = packed record Length: Word; MaximumLength: Word; Buffer: PWideCh ...
- 如何设计firemonkey的style样式
您好,在窗体上添加一个 TStyleBook(StyleBook1), 可以载入.编辑.另存这些样式.编辑 StyleBook1 后, 可以把它直接赋给窗体的 StyleBook 属性: proced ...
- oracle11g安装时出现程序未找到文件解决办法
在安装的最后可能会出现如下问题 解决办法如下 将win64_11gR2_database_2of2中的\win64_11gR2_database_2of2\database\stage\Compone ...
- Spring Boot配置篇(基于Spring Boot 2.0系列)
1:概述 SpringBoot支持外部化配置,配置文件格式如下所示: properties files yaml files environment variables command-line ar ...
- Django之分页器组件
class Pagination(object): def __init__(self,current_page,all_count,per_page_num=2,pager_count=11): & ...
- Mybatis_two
SqlMapConfig.xml配置文件 SqlMapConfig.xml中配置的内容和顺序如下: properties(属性) settings(全局配置参数) typeAliases(类型别名) ...
- System.arraycopy 和 Arrays.copyOf
System.arraycopy /* native关键字 本地方法 System类 java.lang.System.class 参数说明: src - 源数组. srcPos - 源数组中的起始位 ...
- 39 | 从小作坊到工厂：什么是Selenium Grid？如何搭建Selenium Grid？
- python3的类
python3的类: python是一门面向对象的编程语言,学习python下的类,,能帮助自己形成一个基本的面向对象的概念.关于类和实例的理解,一个易懂的栗子就是动物类,我们把动物看做一个类,而狗啊 ...