“管理Layui树形图，提高页面交互性与可视化效果“

标题：管理Layui树形图，提高页面交互性与可视化效果

  • Layui树形图简介
    • 一、引入Layui和jQuery库：
    • 二、HTML结构准备：
    • 三、初始化树形图：
    • 四、配置树形图的其他属性和事件：
      • 4.1 实体类
      • 4.2 PermissionDao方法
      • 4.3 PermissionAction类的方法实现
      • 4.4 mvc的配置使用
      • 4.5 运行结果
    • 五、异步加载节点数据：
    • 六、拓展功能和样式：
    • 结语：

在这里插入图片描述

Layui树形图简介

Layui树形图是一个强大的前端组件，可以在网页中展示和操作树形结构的数据。本文将介绍如何使用Layui树形图管理数据，以提升页面交互性和可视化效果。

正文：

一、引入Layui和jQuery库：

首先，确保你已经正确引入了Layui和jQuery库。在HTML文件中的head标签中添加以下代码：

  <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css"><script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>

二、HTML结构准备：

接下来，我们需要准备好HTML的结构，用来容纳和展示Layui树形图。可以在body中创建一个div容器作为树形图的父容器，给它一个id，比如：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head><%@ include file = "common/header.jsp" %>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><!-- Top导航栏 --><li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li><li class="layui-nav-item"><a href="javascript:;">nav groups</a><dl class="layui-nav-child"><dd><a href="">menu 11</a></dd><dd><a href="">menu 22</a></dd><dd><a href="">menu 33</a></dd></dl></li></ul><!-- 个人头像及账号操作 --><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="">Your Profile</a></dd><dd><a href="">Settings</a></dd><dd><a href="login.jsp">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">menu group 1</a><dl class="layui-nav-child"><dd><a href="javascript:;">menu 1</a></dd><dd><a href="javascript:;">menu 2</a></dd><dd><a href="javascript:;">menu 3</a></dd><dd><a href="">the links</a></dd></dl></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div></body>
</html>

三、初始化树形图：

在页面加载完成后，需要进行树形图的初始化工作。在JavaScript中添加以下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head><%@ include file = "common/header.jsp" %>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><!-- Top导航栏 --><li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li><li class="layui-nav-item"><a href="javascript:;">nav groups</a><dl class="layui-nav-child"><dd><a href="">menu 11</a></dd><dd><a href="">menu 22</a></dd><dd><a href="">menu 33</a></dd></dl></li></ul><!-- 个人头像及账号操作 --><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="">Your Profile</a></dd><dd><a href="">Settings</a></dd><dd><a href="login.jsp">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">menu group 1</a><dl class="layui-nav-child"><dd><a href="javascript:;">menu 1</a></dd><dd><a href="javascript:;">menu 2</a></dd><dd><a href="javascript:;">menu 3</a></dd><dd><a href="">the links</a></dd></dl></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div><script>
layui.use(['element', 'layer', 'util'], function(){var element = layui.element,layer = layui.layer,util = layui.util,$ = layui.$;console.log(123)$.ajax({url:'${pageContext.request.contextPath }/permission.action?methodName=menus',dataType:'json',success:function(data){var htmlStr = '';$.each(data,function(i,n){htmlStr+='<li class="layui-nav-item layui-nav-itemed">';htmlStr+='<a class="" href="javascript:;">'+n.text+'</a>';if(n.hasChildren){var children = n.children;htmlStr+='<dl class="layui-nav-child">';$.each(children,function(index,node){htmlStr+=' <dd><a href="">'+node.text+'</a></dd>';})htmlStr+='</dl>';}htmlStr+=' </li>';})$("#menu").html(htmlStr);element.render('menu'); }});});
</script>
</body>
</html>

在上述代码中，我们使用Layui的element模块和layer和util模块。通过对树形图进行初始化，其中menu选项为树形图的父容器id，data选项为树形结构的数据，你需要替换成你自己的数据。

四、配置树形图的其他属性和事件：

4.1 实体类

package com.zking.entity;public class Permission {private long id;private String name;private String description;private String url;private long pid;private int ismenu;private long displayno;public Permission() {// TODO Auto-generated constructor stub
}public Permission(String name, String description, String url, long pid, int ismenu, long displayno) {super();this.name = name;this.description = description;this.url = url;this.pid = pid;this.ismenu = ismenu;this.displayno = displayno;
}public long getId() {return id;
}public void setId(long id) {this.id = id;
}public String getName() {return name;
}public void setName(String name) {this.name = name;
}public String getDescription() {return description;
}public void setDescription(String description) {this.description = description;
}public String getUrl() {return url;
}public void setUrl(String url) {this.url = url;
}public long getPid() {return pid;
}public void setPid(long pid) {this.pid = pid;
}public int getIsmenu() {return ismenu;
}public void setIsmenu(int ismenu) {this.ismenu = ismenu;
}public long getDisplayno() {return displayno;
}public void setDisplayno(long displayno) {this.displayno = displayno;
}public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {super();this.id = id;this.name = name;this.description = description;this.url = url;this.pid = pid;this.ismenu = ismenu;this.displayno = displayno;
}@Override
public String toString() {return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid=" + pid+ ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
}

4.2 PermissionDao方法

package com.zking.dao;import java.util.ArrayList;
import java.util.List;import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;public class PermissionDao extends BaseDao<Permission> {public List<Permission> QueryAll(Permission permission,PageBean pagebean) throws Exception {String sql = "select * from t_easyui_permission";return super.executeQuery(sql, Permission.class, pagebean);}public List<TreeVo<Permission>> menus(Permission permission,PageBean pagebean) throws Exception{List<TreeVo<Permission>> lst = new ArrayList<TreeVo<Permission>>();List<Permission> list = this.QueryAll(permission, pagebean);for (Permission p : list) {TreeVo<Permission> tv = new TreeVo<Permission>();tv.setId(p.getId()+"");tv.setText(p.getName());tv.setParentId(p.getPid()+"");lst.add(tv);}return BuildTree.buildList(lst,"0");}public static void main(String[] args) {try {List<TreeVo<Permission>> menus = new PermissionDao().menus(null, null);ObjectMapper om  = new ObjectMapper();System.out.println(om.writeValueAsString(menus));} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}
}

4.3 PermissionAction类的方法实现

package com.zking.web;import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zking.dao.PermissionDao;
import com.zking.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {private Permission p = new Permission();private PermissionDao pd = new PermissionDao();public void menus(HttpServletRequest req, HttpServletResponse resp) {try {List<TreeVo<Permission>> menus = pd.menus(null, null);ResponseUtil.write(resp, menus);} catch (Exception e) {e.printStackTrace();}}@Overridepublic Permission getModel() {// TODO Auto-generated method stubreturn p;}}

4.4 mvc的配置使用

<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/user" type="com.zking.web.UserAction"></action><action path="/permission" type="com.zking.web.PermissionAction"></action></config>

4.5 运行结果

在这里插入图片描述

五、异步加载节点数据：

如果你的树形结构数据很大，可以使用异步加载节点数据，按需展示子节点。在tree.render()的配置项中添加url选项即可：

tree.render({elem: '#treeContainer',url: '/api/getTreeData', // 异步请求的接口地址// 其他配置项...
});

在服务端，可以使用相应的后端框架实现/api/getTreeData的接口，返回符合Layui树形图要求的数据格式。

六、拓展功能和样式：

除了基本的配置外，Layui树形图还提供了丰富的API和内置方法，用于实现更多的功能和样式需求。你可以查阅Layui树形图的官方文档，了解各种拓展功能和样式的用法。

结语：

通过Layui树形图，我们可以方便地管理和展示树形结构的数据，提升页面的交互性和可视化效果。希望本文对你对Layui树形图的使用有所帮助，让你的网页在展示树形数据时更加出色！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/22695.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

20230714----重返学习-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性

20230714----重返学习-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性

day-112-one-hundred-and-twelve-20230714-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性 DOM-diff算法 vue2中diff算法 同级比对&#xff0c;跨级比对性能差。而且采用的方式是递归比对&#xff0c;更差一点。根节点只能有一个&#xff0c;比对的时候会从根节…
阅读更多...
【Unity面试篇】Unity 面试题总结甄选 ｜Unity基础篇 | ❤️持续更新❤️

【Unity面试篇】Unity 面试题总结甄选 ｜Unity基础篇 | ❤️持续更新❤️

2.2 前言 关于Unity面试题相关的所有知识点&#xff1a;&#x1f431;‍&#x1f3cd;2023年Unity面试题大全&#xff0c;共十万字面试题总结【收藏一篇足够面试&#xff0c;持续更新】为了方便大家可以重点复习某个模块&#xff0c;所以将各方面的知识点进行了拆分并更新整理…
阅读更多...
Jenkins全栈体系（二）

Jenkins全栈体系（二）

Jenkins 第三章 Jenkins Git Maven 自动化部署配置 十、几种构建方式 快照依赖构建/Build whenever a SNAPSHOT dependency is built 当依赖的快照被构建时执行本job 触发远程构建 (例如,使用脚本) 远程调用本job的restapi时执行本job job依赖构建/Build after other proj…
阅读更多...
matlab学习指南（2）：安装工具箱Toolbox的方法（详细图解）

matlab学习指南（2）：安装工具箱Toolbox的方法（详细图解）

&#x1f305;*&#x1f539;** φ(゜▽゜*)♪ **&#x1f539;*&#x1f305; 欢迎来到馒头侠的博客&#xff0c;该类目主要讲数学建模的知识&#xff0c;大家一起学习&#xff0c;联系最后的横幅&#xff01; 喜欢的朋友可以关注下&#xff0c;私信下次更新不迷路&#xff0…
阅读更多...
青岛大学_王卓老师【数据结构与算法】Week05_12_队列的类型定义_学习笔记

青岛大学_王卓老师【数据结构与算法】Week05_12_队列的类型定义_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c; 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础…
阅读更多...
Elasticsearch 倒排索引原理

Elasticsearch 倒排索引原理

看下面这个表格里的文档内容&#xff1a; 如果我这时候想要在这么多文档中查找带有 比亚迪 的我要怎么查&#xff0c;传统这个查询里面我想查这个比亚迪的话。就是先在文档1里面搜索一下有没有 比亚迪&#xff0c;没有&#xff0c;我在到文档2中查找比亚迪&#xff0c;还是没有…
阅读更多...
多态的基本使用

多态的基本使用

这部分的内容主要是记住使用方法&#xff0c;原理在之后会讲。 多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 比如说买票&#xff0c;普通人买票就是正常买&…
阅读更多...
Low-Light Image Enhancement via Self-Reinforced Retinex Projection Model 论文阅读笔记

Low-Light Image Enhancement via Self-Reinforced Retinex Projection Model 论文阅读笔记

这是马龙博士2022年在TMM期刊发表的基于改进的retinex方法去做暗图增强&#xff08;非深度学习&#xff09;的一篇论文 文章用一张图展示了其动机&#xff0c;第一行是估计的亮度层&#xff0c;第二列是通常的retinex方法会对估计的亮度层进行RTV约束优化&#xff0c;从而产生…
阅读更多...
OPPO手机便签怎么上传录音文件？

OPPO手机便签怎么上传录音文件？

相信很多网友对OPPO这个手机品牌并不陌生&#xff0c;因为它凭借时尚轻薄的外观设计、流畅简约的系统、清晰的拍照摄影以及高中低不同的价位选择&#xff0c;赢得了不少年轻消费者的青睐。不过在使用OPPO手机的过程中&#xff0c;也有不少用户表示自己遇到了各种各样的问题&…
阅读更多...
接口突然超时10宗罪。。。

接口突然超时10宗罪。。。

前言 不知道你有没有遇到过这样的场景&#xff1a;我们提供的某个API接口&#xff0c;响应时间原本一直都很快&#xff0c;但在某个不经意的时间点&#xff0c;突然出现了接口超时。 也许你会有点懵&#xff0c;到底是为什么呢&#xff1f; 今天跟大家一起聊聊接口突然超时的…
阅读更多...
IEEE ICME 2023论文｜基于交互式注意力的语音情感识别联合网络

IEEE ICME 2023论文｜基于交互式注意力的语音情感识别联合网络

论文题目&#xff1a; A Joint Network Based on Interactive Attention for Speech Emotion Recognition 作者列表&#xff1a; 胡英&#xff0c;侯世静&#xff0c;杨华敏&#xff0c;黄浩&#xff0c;何亮 研究背景 语音情感识别&#xff08;Speech Emotion Recognitio…
阅读更多...
Java正则表达式简介及Jar包

Java正则表达式简介及Jar包

Java提供了java.util.regex包&#xff0c;用于与正则表达式进行模式匹配。 Java正则表达式与Perl编程语言非常相似&#xff0c;非常容易学习。 正则表达式定义了字符串的模式。 正则表达式可以用来搜索、编辑或处理文本。 正则表达式并不仅限于某一种语言&#xff0c;但是在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023