前端框架——树形结构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 ...
随机推荐
- Windows RabbitMQ 安装
操作系统 Win10 企业版 目标: 在win10上安装RabbitMQ 安装步骤 1.安装RabbitMQ需要先安装Erlang语言开发包,下载地址:http://www.erlang.org/d ...
- 该内存不能read 或written数值 叙述（居然还有具体的讲究）
该内存不能read 或written数值 叙述 0 0x0000 作业完成. 1 0x0001 不正确的函数. 2 0x0002 系统找不到指定的档案. 3 0x0003 系统找不到指定的路径. 4 ...
- Delphi xe5调用外部扫描程序——谷歌 zxing
unit uZXing; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System.Va ...
- c# 获取cook
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServi ...
- spring cloud之eureka简介
最近线上的接口出了一些问题,有一些可能不是代码的问题,但是由于是测试和其他方面的同事爆出来的,所以感觉对接口的监控应该提上日程. 经过搜索发现,spring cloud的eureka就是专门做这方面工 ...
- ORACLE(emp)表习题与答案
因为答案都是小编自己写的,解法可能有多种,如果您觉得我的解法有误,希望您有时间给我留言. 一.习题 (1) 查询20部门的所有员工信息. SELECT * FROM emp where deptno ...
- 02、MySQL—数据库基本操作
数据库是数据存储的最外层(最大单元) 1.创建数据库 基本语法:create database 数据库名字 [库选项]; 范例:使用create database 创建数据库 库选项:数据库的相关属性 ...
- springboot如何读取自定义配置项
我们springboot项目有自己默认的配置文件,一般地由application.yml和bootstrap.yml组成,前者是模块的配置,后者是微服务的配置,后台比前者先被框架加载. 我们有时需要自 ...
- HBase —— 单机环境搭建
一.安装前置条件说明 1.1 JDK版本说明 HBase 需要依赖JDK环境,同时HBase 2.0+ 以上版本不再支持JDK 1.7 ,需要安装JDK 1.8+ .JDK 安装方式见本仓库: Lin ...
- spring boot 2.x 系列 —— spring boot 实现分布式 session
文章目录 一.项目结构 二.分布式session的配置 2.1 引入依赖 2.2 Redis配置 2.3 启动类上添加@EnableRedisHttpSession 注解开启 spring-sessi ...