使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做起来比较繁琐,几个功能做了一个月,当然了有能力的关系,也有插件易用度的关系
最近要实现的功能用tree树形结构来做是最好的,就是资源的分配,来简单讲讲ztree吧,这是目前国内很火的一个插件,百度一下就能了解,使用起来十分简单
小编我用过3年的jqgrid,在此还是要再次感谢当年的王组让我去跟jqgrid深入浅出,多用了jqgrid后,再看ztree,那就十分简单了,不知道ztree作者是否也参考过jqgrid
首先你需要引入js以及css吧
<!-- ztree -->
<link href="<%=request.getContextPath()%>/css/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/ztree/jquery.ztree.core.js"></script>
然后你需要定义一个id="treePermission",这点和jqgrid一样
<!-- ztree start --><div class="zTreeDemoBackground left"><ul id="treePermission" class="ztree"></ul></div>
定义一下数据结构和基本配置
var setting = {async: {enable: true,url: getAsyncUrl,autoParam: ["id"]},data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}} };// 查询子节点 function getAsyncUrl(treeId, treeNode) {return "<%=request.getContextPath()%>/auth/permission/getTreeSubNode"; }var zNodes =[{ id:1, pId:0, name:"父节点1 - 展开", open:true},{ id:11, pId:1, name:"父节点11 - 折叠"},{ id:111, pId:11, name:"叶子节点111"},{ id:112, pId:11, name:"叶子节点112"},{ id:113, pId:11, name:"叶子节点113"},{ id:114, pId:11, name:"叶子节点114"},{ id:12, pId:1, name:"父节点12 - 折叠"},{ id:121, pId:12, name:"叶子节点121"},{ id:122, pId:12, name:"叶子节点122"},{ id:123, pId:12, name:"叶子节点123"},{ id:124, pId:12, name:"叶子节点124"},{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},{ id:2, pId:0, name:"父节点2 - 折叠"},{ id:21, pId:2, name:"父节点21 - 展开", open:true},{ id:211, pId:21, name:"叶子节点211"},{ id:212, pId:21, name:"叶子节点212"},{ id:213, pId:21, name:"叶子节点213"},{ id:214, pId:21, name:"叶子节点214"},{ id:22, pId:2, name:"父节点22 - 折叠"},{ id:221, pId:22, name:"叶子节点221"},{ id:222, pId:22, name:"叶子节点222"},{ id:223, pId:22, name:"叶子节点223"},{ id:224, pId:22, name:"叶子节点224"},{ id:23, pId:2, name:"父节点23 - 折叠"},{ id:231, pId:23, name:"叶子节点231"},{ id:232, pId:23, name:"叶子节点232"},{ id:233, pId:23, name:"叶子节点233"},{ id:234, pId:23, name:"叶子节点234"},{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true} ];$(document).ready(function(){$.post("<%=request.getContextPath()%>/auth/permission/getTreeRootNode",{},function(jsonResult){$.fn.zTree.init($("#treePermission"), setting, jsonResult.data);}); });
zNodes是初始化的静态数据,可以不用,这里为了方便贴了出来,初始化的时候放入$.fn.zTree.init($("#treePermission"), setting, zNodes);即可
znodes我没有使用,在初始化的时候会预先加载根目录,然后点击再次加载子目录
@Overridepublic List<TreeNode> queryNode(Integer parentId) {SysPermissionExample example = new SysPermissionExample();Criteria criteria = example.createCriteria();criteria.andParentidEqualTo(parentId);List<SysPermission> permissions = sysPermissionMapper.selectByExample(example);// 如果为空,说明没有根权限,需要创建一个if (permissions.isEmpty()) {return null;} // 获得根权限返回出去List<TreeNode> rootNodeList = new ArrayList<TreeNode>();for (SysPermission p : permissions) {TreeNode rootNode = new TreeNode(p.getId(), p.getParentid(), p.getName(), p.getType() == ShiroPermissionTypeEnum.MENU.value ? true : false, p.getType() == ShiroPermissionTypeEnum.MENU.value ? true : false);rootNodeList.add(rootNode);}return rootNodeList;}
@RequestMapping(value="/permission/getTreeSubNode")@ResponseBodypublic List<TreeNode> getTreeSubNode(TreeNode node) throws Exception{List<TreeNode> rootNodeList = systemAuthService.queryNode(node.getId());return rootNodeList;}
好了,调用后就直接可以使用了,非常简单,还有一些简单配置请参考官网吧~
转载于:https://www.cnblogs.com/leechenxiang/p/5952959.html
使用ztree.js,受益一生,十分钟学会使用tree树形结构插件相关推荐
- JQuery Tree 树形结构插件 zTree
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JS ...
- 一些生活中简单可用的技能--十分钟学会,终生受益
一些日常生活中简单可用的技能 十分钟学会,终生受益 工作 学习 生活 社交 十分钟学会,终生受益 下面的文章是从知乎高赞回答中"日常生活中有哪些十分钟就能学会并可以终生受用的技能?" ...
- 虚拟局域网软件开源_玩转虚拟机,十分钟学会一台电脑安装3个操作系统
玩转虚拟机,十分钟学会一台电脑安装3个操作系统 本文目录 一.什么是虚拟机 1.普通虚拟机 2.Java虚拟机 二.虚拟机的作用 三.虚拟机的安装需求 四.常用的虚拟机软件 1.VMware虚拟机 2 ...
- 十分钟学会win10系统封装之系列教程(一):在VMware Workstation虚拟机上安装win10母盘系统
关于系统封装这个话题,历来就一直受到很多小伙伴的青睐,很多同学都认为会封装系统是一件很高大上的事情,所以一直都有很多小伙伴向亦是美网络小编询问到底什么时候能出一些关于win10系统封装的教程,其实小编 ...
- java中xml的组装与解析(十分钟学会)
xml的组装与解析(十分钟学会) 一.xml的解析 话不多说直接上代码 1.引入pom依赖 // 解析xml <dependency><groupId>org.jsoup< ...
- js树形结构html源码,纯JS树形结构插件
插件描述:纯JS树形结构插件,代码精简方便定制修改 更新时间:2020-05-20 22:30:39 更新说明:内含旧版.新版源码更新功能: 1.简化全部代码,从660行减少为430行 2.优化实现思 ...
- Python + wordcloud + jieba 十分钟学会生成中文词云
前述 本文需要的两个Python类库 jieba:中文分词分词工具 wordcloud:Python下的词云生成工具 写作本篇文章用时一个小时半,阅读需要十分钟,读完该文章后你将学会如何将任意中文文本 ...
- Python + wordcloud + jieba 十分钟学会用任意中文文本生成词云
前述 本文需要的两个Python类库 jieba:中文分词分词工具 wordcloud:Python下的词云生成工具 写作本篇文章用时一个小时半,阅读需要十分钟,读完该文章后你将学会如何将任意中文 ...
- 快速入门:十分钟学会Python
初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...
最新文章
- 一个简单的PHP模板引擎
- python3标准库书怎么样_Python3标准库:filecmp比较文件
- boost::test模块测试参数化测试
- java xml转map_java练习本(原每日一练)(20190514)
- 2022年中国企业直播多场景应用策略白皮书
- 在ubuntu安装使用miniconda
- java中间件_uncode-mq 基于netty的轻量级java消息中间件
- 安卓动画全解:补间动画(视图动画)、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性,动画集AnimationSet
- chrome webstore
- com.lowagie.text.DocumentException: Font ‘STSong-Light‘ with ‘UniGB-UCS2-H‘
- bin to npy
- 如何用c语言编写语音识别程序,使用C语言对文本进行语音识别
- 基于spring boot的毕业设计论文选题申报管理系统
- 【米思米工业产品知识分享】- 轴承的分类与主要用途
- shell脚本打印出时间
- css transform导致字体像素模糊的问题解决办法(多种方法,亲测有效)
- 3D动画旋转rotateY的用法(23)
- 看看这些医疗差距在哪里?
- BeagleBone Black USB一线通(2)
- 关于andorid中录音app之间的冲突问题