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

news2024/11/24 9:23:44

要求,数据中必须有唯一的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 属性的。
    在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Go语言工程实践之测试与Gin项目实践

Go 语言并发编程 及 进阶与依赖管理_软工菜鸡的博客-CSDN博客 03 测试 回归测试一般是QA(质量保证)同学手动通过终端回归一些固定的主流程场景 集成测试是对系统功能维度做测试验证,通过服务暴露的某个接口,进行自动化测试 而单元测试开发阶段&#xff0c;开发者对单独的函数…

企业级帮助中心编写方案怎么写?

在现代商业环境中&#xff0c;为客户提供高效的支持和解决方案至关重要。企业级帮助中心是一个集中管理和呈现常见问题和解答的平台&#xff0c;可以为客户提供快速、便捷的自助帮助。本文将提供一个企业级帮助中心编写方案&#xff0c;旨在帮助企业提供优质的客户支持&#xf…

进程间通信(IPC)的几种方式

进程间通信&#xff08;IPC&#xff09; 1.常见的通信方式2.低级IPC方法文件 3.常用于本机的IPC机制3.1无名管道pipe3.2命名管道FIFO3.3消息队列MessageQueue3.4共享内存SharedMemory3.5信号量Semaphore3.6信号Signal3.7unix域套接字 4.不同计算机上的IPC机制5.IPC机制的数据拷…

数学符号说明——三角等号(≜)

三角等号 &#xff0c;LaTex语法宏 (\triangleq&#xff09;&#xff0c;Unicode(U225C)&#xff0c;又称 "delta equal to(Δ 等)"。可以读作 "等于"、"根据定义 x 等于 y "。 有时候&#xff0c;用在数学(和物理学)的某种定义中。例如&#…

VMware vCenter忘记密码操作,和Linus原理一致

mount -o remount,rw / passwd root ## 修改 root 密码要选择对应账户## 输入新密码&#xff0c;再输入一次新密码 umount / ## 卸载根文件系统 reboot -f ## 重新引导 vCenter

生信豆芽菜-t-test差异分析使用说明

网站&#xff1a;http://www.sxdyc.com/diffTtestAnalyse 一、t-test简介 t检验&#xff0c;亦称student t检验&#xff08;Student’s t test&#xff09;&#xff0c;主要用于样本含量较小&#xff08;例如n < 30&#xff09;&#xff0c;总体标准差σ未知的正态分布。 t检…

导入示例工程出现error: failed to start ability. Error while Launching activity错误的解决办法

导入华为健康生活应用&#xff08;ArkTS&#xff09;&#xff0c;使用DevEco Studio打开&#xff0c;运行报错&#xff1a; error: failed to start ability. Error while Launching activity解决办法&#xff1a;修改module.json5里面exported的值&#xff0c;由false改为tr…

ffmpeg命令行是如何打开vf_scale滤镜的

前言 在ffmpeg命令行中&#xff0c;ffmpeg -i test -pix_fmt rgb24 test.rgb&#xff0c;会自动打开ff_vf_scale滤镜&#xff0c;本章主要追踪这个流程。 通过gdb可以发现其基本调用栈如下&#xff1a; 可以看到&#xff0c;query_formats&#xff08;&#xff09;中创建的v…

MacOS创建NetworkExtension 【保姆级流程】

MacOS创建NetworkExtension (保姆级流程) 因为自己工作中的项目&#xff0c;是运行在macos系统上&#xff0c;其中的一部分功能是通过NetworkExtension来获取系统中的流量来做相应的处理&#xff0c;所以也想自己创建一个NetworkExtension&#xff0c;三天&#xff0c;不知道踩…

世微AP2400 电动车 摩托车灯照明 汽车灯照明 手电筒照明LED灯降压恒流驱动IC

PCB 布板参考 1. 大电流路径走线要粗&#xff0c;铺铜走线比较好。 2. 大电路回路面积以最短、最宽路径完成比较好。 3. 开关切换连接点&#xff1a;电感 L、开关管漏级与续流肖特基二极管&#xff0c;走线要短与粗&#xff0c;铺铜走线比较好&#xff0c;但同时需要适当面积作…

Redis_分片集群

10. 分片集群 10.1简介 业务场景&#xff0c;需要存储50G的数据。对于内存和硬盘配置不足&#xff0c;选用两种方式 一种&#xff1a;纵向扩展&#xff1a;加内存&#xff0c;加硬盘&#xff0c;提高CPU。简单、直接。RDB存储效率要考虑。成本要考虑。二种&#xff1a;横向扩…

C# Linq源码分析之Take方法

概要 Take方法作为IEnumerable的扩展方法&#xff0c;具体对应两个重载方法。本文主要分析第一个接收整数参数的重载方法。 源码解析 Take方法的基本定义 public static System.Collections.Generic.IEnumerable Take (this System.Collections.Generic.IEnumerable source…

【Tomcat】tomcat的多实例和动静分离

多实例&#xff1a; 在一台服务器上有多台Tomcat&#xff1b;就算是多实例 安装telnet服务&#xff0c;可以用来测试端口通信是否正常 yum -y install telnettelnet 192.168.220.112 80 tomcat的日志文件 cd /usr/local/tomcat/logsvim catalina.out Tomcat多实例部署&…

一定要会用selenium的等待,3种等待方式解读

很多人问&#xff0c;这个下拉框定位不到、那个弹出框定位不到…各种定位不到&#xff0c;其实大多数情况下就是两种问题&#xff1a; 有frame 没有加等待 殊不知&#xff0c;你的代码运行速度是什么量级的&#xff0c;而浏览器加载渲染速度又是什么量级的&#xff0c;就好比…

CEC2009无约束多目标测试集(UF1-UF10、附Matlab代码)

目录 一、CEC2009无约束多目标测试集 二、CEC2009无约束多目标测试集UF1-UF10Matlab代码 三、多目标灰狼算法测试CEC2009无约束多目标测试集 一、CEC2009无约束多目标测试集 二、CEC2009无约束多目标测试集UF1-UF10Matlab代码 % cec09.m % The Matlab version of the test i…

C# Winform DataGridView 数据刷新问题

目录 一、问题 二、创建项目 三、绑定空的数据源 四、绑定有数据的数据源 五、修改绑定的数据源 六、解决数据源刷新问题 七、解决刷新数据界面闪烁 一、问题 DataGridView 是比较常用的表格控件&#xff0c;在 DataGridView 中显示数据&#xff0c; 一般使用 dataGrid…

自动化更新导致的各种问题解决办法

由于最近自动化频频更新导致出现各种问题&#xff0c;因此在创建驱动对象代码时改成这种方式 我最近就遇到了由于更新而导致的代码报错&#xff0c;报错信息如下&#xff1a; 复制内容如下&#xff1a; Exception in thread “main” org.openqa.selenium.remote.http.Connecti…

搭建了个腾讯滑块服务,直接取ticket的,仅供测试.

最近闲着没事搭建了个TX滑块验证码服务,C#写的. 接口是rest接口 提交任务POST http://47.104.132.20:19090/task/addTask 提交数据: { "url": "https://ssl.captcha.qq.com/template/wireless_mqq_captcha.html?stylesimple&aid16&uin3557247785…

html实现iphone同款开关

一、背景 想实现一个开关的按钮&#xff0c;来触发一些操作&#xff0c;网上找了总感觉看着别扭&#xff0c;忽然想到iphone的开关挺好&#xff0c;搞一个 二、代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&qu…

内生性的蒙特卡罗模拟

这是一个很好的例子,通过蒙特卡洛模拟展示了忽略相关变量时,回归系数估计的偏差。 %% 蒙特卡洛模拟&#xff1a;内生性会造成回归系数的巨大误差 times 300; % 蒙特卡洛的次数 R zeros(times,1); % 用来储存扰动项u和x1的相关系数 K zeros(times,1); % 用来储存遗漏了x2…