一个简单便捷的树形显示Ztree
这是本人在闲时研究的一个用于显示树形列表的小玩意。
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
下面就说说怎么用吧
一、引用需要的js和css,具体可以在官网下载
链接:http://www.treejs.cn/v3/main.php#_zTreeInfo
二、页面上绘制一个div,如下
<div id="treeDemo" class="ztree"></div>
三、写jQuery进行树的初始化
var setting = {
view: {
dblClickExpand: false,
showLine: false,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
//这是定义树节点的点击事件
callback: {
onClick: zTreeBeforeClick
}
};
//树节点的点击事件,主要用来获取绑定节点的id,pid等等
function zTreeBeforeClick(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();
}
//下面重点来了,动态的加载树
var zNodes = [];
$(document).ready(function () {
$.ajax({
url: "",//ajax的路径
type: "get",
success: function (data) {
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
if (i == 0) {
zNodes.push({ id: json[i]["ID"], pId: json[i]["PID"], name: json[i]["Name"], open: true });
}
else {
zNodes.push({ id: json[i]["ID"], pId: json[i]["PID"], name: json[i]["Name"] });
}
}
var t = $("#treeDemo");
$.fn.zTree.init(t, setting, zNodes);
},
error: function (e) {
console.log(e);
}
})
});
OK!树就这么轻松的搞定了,如果您认为上文有用的话,请点赞收藏,如果有错,欢迎评论留言,一起探讨!
一个简单便捷的树形显示Ztree的更多相关文章
- 一个简单的数据查询显示jsp
以前使用jstl标签库只是使用core来显示一些数据,非常方便,今天看了下发现jstl还有其他的标签,使用都非常方便, 1.sql标签,可以直接访问数据库,后台代码都不需要了,这在某些时候非常适合使用 ...
- 【Eclipse】一个简单的 RCP 应用 —— 显示Eclipse 的启动时间。
1 创建一个插件项目 1.1 File - New - Plug-in Project 注: 1 如果 New 下没有 Plug-in Project , 到 Other 里面去找. 2 如上截图的下 ...
- netsh interface portproxy的一个简单例子
netsh interface portproxy的微软帮助文档地址: https://technet.microsoft.com/zh-cn/library/cc776297(WS.10).aspx ...
- WInform 创建一个简单的WPF应用
(一)创建一个简单的WPF应用 首先,在这里我要说明的是:这里的例子,都是通过控制台程序来创建WPF应用,而非使用现成的WPF模版.因为WPF模版封装了创建WPF应用所需要的各种基本元素,并不利于我们 ...
- Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单
原文:Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单 昨天晚上把TreeView的样式做了一下,今天给TreeView绑了数据,实现了切换页面功能 上 ...
- Prism for WPF 搭建一个简单的模块化开发框架(一)
原文:Prism for WPF 搭建一个简单的模块化开发框架(一) 最近闲来无事又想搞搞WPF..... 做个框架吧,可能又是半途而废....总是坚持不下来 不废话了, 先看一下工程结构 布局大概是 ...
- 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
并发编程概述 前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...
- Asp.Net WebApi一个简单的Token验证
1.前言: WebAPI主要开放数据给手机APP,Pad,其他需要得知数据的系统,或者软件应用.Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能.我上次写的<Asp.Net MV ...
- [转帖]Linux杂谈: 树形显示多级目录--tree
Linux杂谈: 树形显示多级目录--tree https://www.cnblogs.com/tp1226/p/8456539.html tree -L 最近写博客的时候偶尔会需要将文件目录结构直观 ...
随机推荐
- Spring Boot 2 整合 Dubbo 框架 ,实现 RPC 服务远程调用
一.Dubbo框架简介 1.框架依赖 图例说明: 1)图中小方块 Protocol, Cluster, Proxy, Service, Container, Registry, Monitor 代 ...
- 微信公众号 $GLOBALS['HTTP_RAW_POST_DATA']数据问题
公司的微信公众号最近出现问题,所有的功能都不能用,一开始以为是微信公众号验证的问题,经过排查才发现是$GLOBALS['HTTP_RAW_POST_DATA']这里的问题,微信公众号会把用户的一些操作 ...
- rhel7 学习第三天
<Linux就该这么学>学习第三天,掌握了一些常用的命令
- Jupyter notebook 中常用的快捷键
1.注释和缩进 注释一行或多行: Ctrl + / 多行同时缩进:Tab 或者 Ctrl + ] 多行取消缩进: Shift + Tab 或者 ctrl + [ 2.编辑和运行 Enter : 转入编 ...
- BeyondCorps
This repository provides a short description of the BeyondCorp security model and resources for impl ...
- 修改Discuz!X系列开启防CC攻击,不影响搜索引擎收录
最近网站一直被攻击,特别是新上线的交流社区,所以今天写了一个开启CC攻击防护代码,而且不影响搜索引擎收录. 在config_global.php文件中有如下代码: $_config['security ...
- pptpd pptpctrl[25553]: segfault at 0 ip 00007fb6fe23ebdc sp 00007ffdef6334e8 error 4 in libc-2.17.so[7fb6fe0dd000+1c2000] pptp拨号连接失败
以下是一次记录pptpd vpn无法连接后的心酸历程: pptp client拨号发现一直无响应,查看日志 因为pptpd服务端是一台高质量公网地址,所以平时拨入vpn连接都非常快,今天发起拨 ...
- Pandas | 21 日期功能
日期功能扩展了时间序列,在财务数据分析中起主要作用.在处理日期数据的同时,我们经常会遇到以下情况 - 生成日期序列 将日期序列转换为不同的频率 创建一个日期范围 通过指定周期和频率,使用date.ra ...
- 对最长公共子序列(LCS)等一系列DP问题的研究
LIS问题: 设\(f[i]\)为以\(a[i]\)结尾的最长上升子序列长度,有: \[f[i]=f[j]+1(j<i&&a[j]<a[i])\] 可以用树状数组优化至\( ...
- Python、Spyder的环境搭建
有什么不对欢迎大家指出,一起交流啊,只针对Windows!!!!(苹果买不起...)Python安装的话2.7版本和3.6版本都可以,虽然2.7比较全面,但还是建议安装3.6,这里以3.6为例进行介绍 ...