Layui实现动态加载Tree

目录

    • 前言
    • 实现步骤
      • 初步准备
      • 构建data数据源

前言

有空研究了一下Layui,感觉相对于EasyUI来说,美观了不少,结合后台加载动态Tree带大家初步了解一下这个框架

实现步骤

初步准备

Layui官网
去官网下载好Layui,里面有示例和css、js等文件
在这里插入图片描述
具体使用步骤:
要使用Layui,必须引入css文件和js文件:

<link rel="stylesheet" href="css/layui.css" />

在这里插入图片描述
Layui官方文档是说有两种加载方式的,也就是:非模块化方式和模块化方式
两者区别就是:
非模块化方式所有模块一次性加载,而模块化方式加载指定的模块:例如引用tree的模块…

<script>
layui.use('tree', function(){});
</script>

有一点注意:官方说的是使用非模块化方式加载引入的是layui.all.js文件,但是使用模块化加载时,引入layui.all.js才有样式效果,具体原因不太清楚(layui官方对tree组件可能做了更新,但是具体的更新日至稳定没见着)

构建data数据源

一起来看官方文档中对Tree组件的结构要求和参数介绍:
在这里插入图片描述在这里插入图片描述为了追求简单实现效果,就不弄花里胡哨的了,直接拿最主要的属性:

        <script>
			//由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
			;
			! function() {
				var layer = layui.layer,
					form = layui.form,
					tree = layui.tree;
					//渲染
					tree.render({
						elem: '#test1' //绑定元素
							,
						data: [//后台传入指定格式json对象数组]
					});
			}();
		</script>

后台构建对应节点:
在这里插入图片描述TreeVo节点实体类:

package com.xiaoyang.vo;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class TreeVo<T> {
	/**
	 * 节点ID索引
	 */
	private String id;
	/**
	 * 显示节点标题
	 */
	private String title;
	/**
	 * 节点的子节点
	 */
	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	/**
	 * 父ID
	 */
	private String parentId;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public List<TreeVo<T>> getChildren() {
		return children;
	}

	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public TreeVo(String id, String title, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
			List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.title = title;
		this.children = children;
		this.parentId = parentID;
	}

	public TreeVo() {
		super();
	}

}

这里比较奇怪一点就是,明明官方文档写的指定数据源格式没有parentId等选项,我构建和EasyUI一样的数据源都能ok,感觉layui的文档完整性不太好…

BuildTree构建节点结构方法类:

package com.xiaoyang.util;
import com.xiaoyang.vo.TreeVo;
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class BuildTree {
	/**
	 * 指定idparam为顶级节点
	 * @param nodes
	 * @param idParam
	 * @param <T>
	 * @return
	 */
	public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {
		if (nodes == null) {
			return null;
		}
		List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
		for (TreeVo<T> children : nodes) {
			String pid = children.getParentId();
			if (pid == null || idParam.equals(pid)) {
				topNodes.add(children);
				continue;
			}
			for (TreeVo<T> parent : nodes) {
				String id = parent.getId();
				if (id != null && id.equals(pid)) {
					parent.getChildren().add(children);
					continue;
				}
			}
		}
		return topNodes;
	}
}

后台方法构建好后,只需将数据源进行Json解析后,进行后台获取输出到页面即可:

       /**
		 * 封装节点方法
		 * @param menu
		 * @param pageBean
		 * @return
		 * @throws SQLException 
		 * @throws IllegalAccessException 
		 * @throws InstantiationException 
		 */
		public List<TreeVo<Permission>> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
			List<Permission> list = this.list(permission, pageBean);
			List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
			TreeVo treevo = null;
			for (Permission m : list) {
				treevo = new TreeVo<>();
				treevo.setId(m.getId()+"");//设置节点id
				treevo.setTitle(m.getName()+"");//设置节点文本
				treevo.setParentId(m.getPid()+"");//设置父节点
				nodes.add(treevo);
			}
			return BuildTree.buildList(nodes,"0");//返回构建好的节点树结构
		}
   /**
	 * 对传入节点进行Json解析,并输出到页面
	 * @param response
	 * @param o
	 * @throws Exception
	 */
	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		ObjectMapper om=new ObjectMapper();
		String jsonStr = om.writeValueAsString(o);
		PrintWriter out=response.getWriter();
		System.out.println(jsonStr.toString());
		out.println(jsonStr.toString());
		out.flush();
		out.close();
	}

到这里,后台已经搞定,重要的部分来了:由于官方文档并没有看到Tree结构后台动态加载,也没有提供类似于url的跳转路径参数,所以博主结合ajax跳转后台获取数据源:

//由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
;
!function() {
	var id = "";
	var atitle = "";
	var layer = layui.layer, form = layui.form, tree = layui.tree, element = layui.element;
	// 渲染
	tree.render({
		elem : '#test1' // 绑定元素
		,
		data :eval('(' + getData() + ')'),
	});
}();
function getData(){
	var ctx=$("#ctx").val();
	var data ;
	$.ajax({
		url:ctx+"/permission.action?opt=PermissionTree",
		type:"post",
		async:false,
		success:function(result){
			data=result;
		}
	});
	return data;
}

这里一定要注意一点:一定要将获取到的数据源进行eval()函数的转换,否则所有节点都是未定义,
取到的getData()是一个字符串而不是一个对象,所以下面取不到对象的属性,类似于:

         <script>
				var jsonData = [{
					"id": "1",
					"title": "书籍管理",
					"state": null,
					"checked": false,
					"attributes": null,
					"children": [],
					"parentId": "0",
					"hasParent": false,
					"hasChildren": false
				}];
			   console.log(jsonData.id);
		</script>
undefined

数据库表结构:
在这里插入图片描述
最后附上效果图:
在这里插入图片描述

热门文章

暂无图片
编程学习 ·

php-fpm 服务

系统:centos 7版本:php-5.6.9安装目录:/Data/app/php/cd etc/mv php-fpm.conf.default php-fpm.confsbin/php-fpm 「 php-fpm 启动 & 无php-fpm.pid 」 ps -ef | grep php-fpmroot 23536 1 0 20:36 ? 00:00:00 php-fpm: master process (/Data/app/…
暂无图片
编程学习 ·

【图像处理】A Skinned Multi-Person Linear Model(SMPL)浅解析

【图像处理】A Skinned Multi-Person Linear Model(SMPL)浅解析SMPL的原理结语 SMPL的原理首先,博主不做3D建模的工作(尽管这项工作真的很酷),学习blender也仅是出于兴趣,因此,这篇博文中对SMPL模型的理解会有部分不足,内容仅供参考。《SMPL: A Skinned Multi-Person …
暂无图片
编程学习 ·

Python之OpenCV的学习(二)

图像 1.OpenCV读取图像的格式是BGR 2.shape属性 # 返回一个[h,w,c]元组,即height,width,通道数 img_shape = img.shape img_shape1 = img_shape[0] img_shape2 = img_shape[1] img_shape3 = img_shape[2]3.彩色图像与灰度图像 # cv2.IMREAD_COLOR; 彩色图像 # cv2.IMREAD_GRAY…
暂无图片
编程学习 ·

leetcode:208. 实现 Trie (前缀树)

链接:https://leetcode-cn.com/problems/implement-trie-prefix-tree/ 实现一个前缀树(节点),一个前缀树节点需要保存它可能的26个孩子的信息,以及这个节点是不是一个单词的结尾。 C++代码: class Trie {Trie * children[26];bool isWord = false; public:/** Initialize…
暂无图片
编程学习 ·

kubectl源码分析之config delete-context

发布一个k8s部署视频:https://edu.csdn.net/course/detail/26967课程内容:各种k8s部署方式。包括minikube部署,kubeadm部署,kubeasz部署,rancher部署,k3s部署。包括开发测试环境部署k8s,和生产环境部署k8s。腾讯课堂连接地址https://ke.qq.com/course/478827?taid=4373…
暂无图片
编程学习 ·

理解持续测试,才算理解DevOps

软件产品的成功与否,在很大程度上取决于对市场需求的及时把控,采用DevOps可以加快产品交付速度,改善用户体验,从而有助于保持领先于竞争对手的优势。作为敏捷开发方法论的一种扩展,DevOps强调开发、测试和运维不同团队间的协作与沟通。持续集成和持续测试是一个在迭代中构…
暂无图片
编程学习 ·

CSS滚动指示器

一、CSS滚动指示器 滚动指示器指的是页面的顶端会有一个进度条,指示滚动的进度。效果如下GIF所示(点击播放):CSS滚动指示器指的是不借助JavaScript,纯CSS实现滚动进度效果。 二、传统的实现方法 传统CSS实现方法由一个名叫 Mike的人首先提出,时间应该是16年,这个CodePen…
暂无图片
编程学习 ·

EasyNTS上云网关内配置EasyNVR云终端成功后显示设备离线问题解决

之前为大家简单介绍过EasyNTS上云网关,一部分是为了进行网络穿透而产生的设备,目前有部分用户已经在进行了内测,我们也会收集一些内测用户的问题,集中排查解决,以达到更好的使用效果。有的用户在EasyNTS上云网关内进行流媒体终端EasyNVR硬件配置测试时,设备已经配置完成,…
暂无图片
编程学习 ·

Struts2环境搭建及其复现

什么是Struts框架 Struts2 是目前较为普及和成熟的基于MVC设计模式的web应用程序框架,它不仅仅是Struts1 的升级版本,更是一个全新的Struts架构。最初,是以WebWork框架和Struts框架为基础,通过提供增强和改进的Struts框架,进而实现简化web技术人员开发工作的目标。不久之后…
暂无图片
编程学习 ·

thinkphp5.0集成phpword,生成word文档并下载

** 目录 ** 安装 使用 安装 github下载地址:https://github.com/PHPOffice/PHPWord 也可直接使用composer安装, composer require phpoffice/phpword使用 你需要的controller用命名空间的方式引入 use PhpOffice\PhpWord\IOFactory; use PhpOffice\PhpWord\PhpWord;在contro…
暂无图片
编程学习 ·

jar包用ftp协议去获取图片无法成功(IDEA可以成功)

jar包用ftp协议去获取图片无法成功(IDEA可以成功)同样的代码 在同一个服务器上运行,用idea去获取图片 可以成功,但是打成jar包去远程获取图片无法成功,拉回来的图片是0kb 同样的代码 在同一个服务器上运行,用idea去获取图片 可以成功,但是打成jar包去远程获取图片无法成…
暂无图片
编程学习 ·

mysql(二)复制与同步

mysql(二)复制与同步 文章目录mysql(二)复制与同步mysql的主从复制基于GTID的主从复制 + 半同步几种常用复制半同步mysql组复制(全同步复制)节点 身份node1(172.25.136.1) masternode2(172.25.136.2) slavenode3(172.25.136.3) slavemysql的主从复制 node1 2下载所…
暂无图片
编程学习 ·

spring IOC容器 Bean 管理——基于注解方式

IOC 操作 Bean 管理(基于注解方式) ​ 1、什么是注解 ​ (1)注解是代码特殊标记,格式:@注解名称(属性名称=属性值, 属性名称=属性值…) ​ (2)使用注解,注解作用在类上面,方法上面,属性上面 ​ (3)使用注解目的:简化 xml 配置 ​ 2、Spring 针对 Bean 管理中创建对…
暂无图片
编程学习 ·

VMware上安装达梦数据库8.0

VMware上安装达梦数据库8.0 VMware上安装达梦数据库8.0 本文指导达梦数据库8.0版本的安装,安装环境为中标麒麟7操作系统 第一步: 操作系统界面右键进入终端控制台,如下图所示:第二步: 规划dm8安装路径:首先,查看磁盘信息是否满足,如下图所示;2. 新建dm8安装目录,如下…
暂无图片
编程学习 ·

docsify 构建文档网站之定制功能(全网最全)

作者: wugenqiang 学习笔记:https://notebook.js.org/ 微信公众号:码客 E 分享(ID:enjoytoshare)文档后续更新地址:docsify 构建文档网站4 定制功能 文章目录4 定制功能4.1 支持 DOT 语言作图4.2 支持 LaTex 数学公式4.3 支持 PDF 页面展示4.4 支持回到顶部4.5 点击页面…
暂无图片
编程学习 ·

【源码阅读技巧一】查看类关系图,接口实现关系图(idea版本)Diagrams关系图

我们在阅读源码的时候,往往需要理清楚各个类,各个接口之间的关系,然后再去理解他的设计思路,有个大概理解,然后去阅读源码,就容易很多,那么今天就来讲一下如何使用idea来查看关系图: 一、查看类的父类,以及实现的接口 1、打开想要查看的类,通过idea的定位找到类所在位…
暂无图片
编程学习 ·

【leetcode C语言实现】剑指 Offer 07.重建二叉树

题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。 例如,给出 前序遍历 preorder = [3,9,20,15,7] 中序遍历 inorder = [9,3,15,20,7] 返回如下的二叉树:限制: 0 <= 节点个数 <= 5000 来源:…
暂无图片
编程学习 ·

C++ builder listview 自绘条形图

菜鸟的学习笔记,如果对你有用最好。高手请无视。ListView 要开 Doublebuffervoid __fastcall TForm1::ListView1CustomDrawSubItem(TCustomListView *Sender, TListItem *Item,int SubItem, TCustomDrawState State, bool &DefaultDraw) { DefaultDraw=true; int lef=0; T…
暂无图片
编程学习 ·

Matrix工作室纳新管理规章

第一条 总则 为工作室注入新鲜血液,培养和壮大工作室队伍,在为新生提供学习、成长和展现的平台的同时有效开展工作室工作。 第二条 纳新细则 1.纳新时间 工作室每年两次纳新,上学期集中于社团纳新,下学期为志愿纳新。 上学期以社团纳新以大一新生为主,其他年级为辅,考核以…