vxe table: 实现tree表格,并且自定义展示指定行

要求,数据中必须有唯一的id字段,并且row-config.KeyField 要指定这个id字段。否则在自定义展开行时展开不生效。并不影响tree的渲染

数据有两种形式

  1. 普通数据结构在这里插入图片描述
  2. tree 状结构,
    在这里插入图片描述

以树状结构为例:
首先我们要将普通结构的数据,按照业务的需求将其处理成tree状结构的数据,常用处理方式用后端的Java8 不断的对类型分组,组装children(如下代码) 这里在组装前我们必须要给所有的数据,添加一个唯一的id字段:


public static List<Map<String,Object> arrayToTreeE(List<Map<String,Object>> data) {
        List<Map<String,Object>> result = new ArrayList<>();
        for(int i=0; i< data.size(); i++) {
            data.get(i).put("id",i);
        }
        Map<Object,List<Map<String,Object>>> glist =data.stream().collect(Collectors.groupingBy(e -> e.get(Constant.RULE_TYPE),
                LinkedHashMap::new,Collectors.toList()));
        System.out.println(data.size());
        glist.forEach((key, list)->{
            List<Map<String,Object>> node1 = list.stream().filter((item)-> item.get("SEC_TYPE1").equals("-")).collect(Collectors.toList());
            for(Map<String,Object> n1 : node1) {
                List<Map<String,Object>> node2 = list.stream().filter((item)-> item.get("SEC_TYPE").equals("-")).collect(Collectors.toList());
                if(node2.size() > 0) {
                    for(Map<String,Object> n2 : node2) {
                        List<Map<String,Object>> node3 = list.stream().filter((item)-> item.get("SEC_TYPE1").equals(n2.get("SEC_TYPE1"))
                                &&!item.get("SEC_TYPE").equals("-")).collect(Collectors.toList());
                        n2.put("children",node3);
                        n2.put("nodeName",n2.get("SEC_NAME1"));
                    }
                    n1.put("children",node2);
                } else {
                    List<Map<String,Object>> nodeList = list.stream().filter((item)-> !item.get("SEC_TYPE1").equals("-") && 
                            !item.get("SEC_TYPE").equals("-")).collect(Collectors.toList());
                    for(Map<String,Object> n2 : nodeList) {
                        n2.put("nodeName",n2.get("SEC_NAME1"));
                    }
                    n1.put("children",nodeList);
                }
                n1.put("nodeName",n1.get("RULE_TYPE_NAME"));
            }
            result.addAll(node1);
        });
       
        return result;
    }

最终的数据结构:
在这里插入图片描述

前端表格需要注意的点:
在这里插入图片描述
设置自定义规则展开:
在这里插入图片描述

  1. 展开指定的行,需要将行放到数组中
    在这里插入图片描述

  2. 展开多行,需要将多行放入同一个数组中。
    在这里插入图片描述

  3. 展开所有第一层节点。
    在这里插入图片描述

  4. 展开所有节点。数据为Array类型时会生效。为树型结构时不会生效,看5的解决方案
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/69114d516ada46f188f33961ba417995.png在这里插入图片描述

  5. 展开所有,我们需要将数据的树形结构转换为Array结构,Array结构是没有children 属性的。
    在这里插入图片描述

最终效果:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JMeter 的并发设置教程

JMeter 是一个功能强大的性能测试工具&#xff0c;可以模拟许多用户同时访问应用程序的情况。在使用 JMeter 进行性能测试时&#xff0c;设置并发是非常重要的。本文将介绍如何在 JMeter 中设置并发和查看报告。 设置并发 并发是在线程组下的线程属性中设置的。 线程数&#…

CentOS 7 构建 LVS-DR 群集 nginx负载均衡

1、基于 CentOS 7 构建 LVS-DR 群集。 DS&#xff08;Director Server&#xff09;&#xff1a;DIP 192.168.231.132 & VIP 192.168.231.200 [root132 ~]# nmcli c show NAME UUID TYPE DEVICE ens33 c89f4a1a-d61b-4f24-a260…

实现Jenkins自动发包配置

参考抖音&#xff1a;Java不良人 其中的视频演示代码 不推荐把jenkins端口一直开放&#xff0c;推荐使用时候放开&#xff08;版本不太新&#xff0c;避免漏洞攻击&#xff09; [rootVM-4-12-centos soft]# docker-compose -v Docker Compose version v2.19.1docker-compose.…

零基础看懂免费开源的Stable Diffusion

文章目录 前言Diffusion模型推理过程训练过程 Stable Diffusion模型参考 前言 前面一篇文章主要讲了扩散模型的理论基础&#xff0c;还没看过上篇的小伙伴可以点击查看&#xff1a;DDPM理论基础。这篇我们主要讲一下一经推出&#xff0c;就火爆全网的Stable Diffusion模型。St…

策略模式(C++)

定义 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换((变化)。该模式使得算法可独立手使用它的客户程序稳定)而变化(扩展&#xff0c;子类化)。 ——《设计模式》GoF 使用场景 在软件构建过程中&#xff0c;某些对象使用的算法可能多种多…

神码ai伪原创【php源码】

大家好&#xff0c;小编为大家解答python必备常用英语词汇笔记的问题。很多人还不知道python中常用的英语单词&#xff0c;现在让我们一起来看看吧&#xff01; 火车头采集ai伪原创插件截图&#xff1a; 一.什么是注释 注释是对一段代码的解释&#xff0c;不参与程序运行&…

dubbo之整合SpringBoot

目录 zookeeper安装 1.拉取ZooKeeper镜像 2.新建文件夹 3.挂载本地文件夹并启动服务 4.查看容器 5.进入容器&#xff08;zookeeper&#xff09; Dubbo Admin安装 1.下载dubbo-admin 2.zip包解压 3.修改配置文件 4.打包项目 5.启动jar 6.访问 构建项目 api模块 1.创建…

无涯教程-Perl - getservbyport函数

描述 此功能转换协议PROTO的服务编号PORT,在标量context中返回服务名称,并在列表context中返回名称和相关信息- ($name,$aliases,$port_number,$protocol_name) 该调用基于/etc/services文件返回这些值。 语法 以下是此函数的简单语法- getservbyport PORT, PROTO返回值 …

将vsCode 打开的多个文件分行(栏)排列,实现全部显示,便于切换文件

目录 1. 前言 2. 设置VsCode 多文件分行(栏)排列显示 1. 前言 主流编程IDE几乎都有排列切换选择所要查看的文件功能&#xff0c;如下为Visual Studio 2022的该功能界面&#xff1a; 图 1 图 2 当在Visual Studio 2022打开很多文件时&#xff0c;可以按照图1、图2所示找到自…

伺服系统::编码器

一、主要分类 二、组成与原理 光电编码器 磁编码器&#xff1a;N-->磁感元件&#xff08;0&#xff09;&#xff1b;S-->磁感元件&#xff08;1&#xff09;》脉冲 增量编码器的分辨率、倍频与细分技术 (99 封私信 / 81 条消息) 编码器有什么分类&#xff1f; - 知乎 (z…

安卓:UDP通信

目录 一、介绍 网络通信的三要素&#xff1a; &#xff08;1&#xff09;、IP地址&#xff1a; IPv4: IPv6: IP地址形式&#xff1a; IP常用命令&#xff1a; IP地址操作类: &#xff08;2&#xff09;、端口&#xff1a; &#xff08;3&#xff09;、协议: UDP协…

搭建Docker环境

目录 一、docker环境搭建 1、卸载旧版本docker 2、安装依赖和设置仓库 3、安装docker 4、启动并加入开机启动 5、验证是否安装成功 二、利用docker搭建nginx 1、拉取镜像 2、启动容器&#xff0c;部署nginx 一、docker环境搭建 1、卸载旧版本docker yum remove docke…

SD NAND FLASH : 什么是pSLC?

一、什么是pSLC pSLC&#xff08;Pseudo-Single Level Cell&#xff09;即伪SLC&#xff0c;是一种将MLC/TLC改为SLC的一种技术&#xff0c;现Nand Flash基本支持此功能&#xff0c;可以通过指令控制MLC进入pSCL模式&#xff0c;存储时在MLC的每个单元中仅存储1bit数据&#x…

基于k8s job设计与实现CI/CD系统

方案一&#xff1a;Jenkinsk8sCICD 方案二&#xff1a;kanikok8s jobCICD CICD 基于K8s Job设计流水线 CI方案 工具镜像 云原生镜像打包工具 kaniko的使用 与Jenkins对比 可用性与易用性

IntelliJ IDEA 2021/2022关闭双击shift全局搜索

我这里演示的是修改&#xff0c;删除是右键的时候选择Remove就好了 IDEA左上角 File-->Settings 找到Navigate -->Search Everywhere &#xff0c;右键添加快捷键。 OK --> Apply应用

高端百度地图开发1:自定义水滴头像(自定义标注覆盖物、Overlay覆盖类)

自定义水滴头像&自定义标注覆盖物 一、引入百度地图JSAPI库二、构建map容器1. CSS样式表2.HTML容器 三、核心代码1.百度地图API功能2.定义构造函数并继承Overlay3.初始化自定义覆盖物4.绘制覆盖物5.添加覆盖物 自定义标注覆盖物&#xff08;Custom Overlay&#xff09;是百…

从小白到大神之路之学习运维第78天-------Kubernetes集群应用部署测试

第四阶段 时 间&#xff1a;2023年8月11日 参加人&#xff1a;全班人员 内 容&#xff1a; Kubernetes集群应用部署测试 目录 应用部署测试 应用部署测试 下面我们部署一个简单的Nginx WEB服务&#xff0c;该容器运行时会监听80端口。 &#xff08;一&#xff09;环境…

UE5、CesiumForUnreal接入WMTS格式地图瓦片,如ArcGIS、Mapbox、天地图

文章目录 1.实现目标2.实现过程2.1 WMTS与TMS2.2 cesium-native改造2.3 CesiumForUnreal插件改造2.4 WMTS瓦片加载测试2.5 EPSG:3857与43263.参考资料1.实现目标 通过改造cesium-native和CesiumForUnreal插件,参考tms的栅格瓦片地图加载逻辑,实现在UE5中通过CesiumForUnreal…

使用Java根据表名导出与导入Sql

前言 很粗糙啊&#xff0c;有很多可以优化的地方&#xff0c;而且也不安全&#xff0c;但是临时用还是OK的&#xff0c;我这个是公司里面的单机软件&#xff0c;不联网。 嗨&#xff01;我是一名社交媒体增长黑客&#xff0c;很高兴能帮助您优化和丰富关于批量作业导出和导入…

CTFshow web93-104关

这周要学习的是php代码审计 根据师兄的作业 来做web入门的93-104关 93关 看代码 进行分析 他的主函数 include("flag.php"); highlight_file(__FILE__); if(isset($_GET[num])){ $num $_GET[num]; if($num4476){ die("no no no!"); …