由于历史原因,在之前实现树表格时,我们有点偷懒,本来应该是层级嵌套的树结构,被我们硬生生的拉平了,请看:

可以看到,basic目录的子节点和basic是在同一级别的,因为此目录尚未展开,所以这些子节点被标识为隐藏(f-hidden)。

这样做的好处,就是处理方便,因为可以沿用之前表格的一套逻辑代码。

但终究是不够优雅,而且遇到子节点比较多的情况,折叠展开就是显示隐藏一大堆节点,怎么都给人很low的感觉。

这不,我们一直惦记着这个事情,来看下下个版本(v5.6.0)的树表格DOM结构:

可以看出,子节点被包含在一个 f-grid-treegroup 的节点中,这时再折叠展开目录只需要改变一个节点的样式类即可了!

结构看着很清楚,但是实现起来就麻烦多了,因为和表格默认的平面TR不同,这里涉及到嵌套,而且这个嵌套可能就不是一级了,比如:

这里的 common.css 节点就被嵌套在两个 table.f-grid-table,因此我们的代码要Cover这些逻辑少不了一些递归了。

更重要的是,打破了单层 TR 的局限,以后我们可以给表格增加更丰富的功能!

这次的树表格重构,也算是为更美好的未来打下坚实基础,希望你能喜欢这次的更新!

加入知识星球下载FineUIPro/Mvc/Core的基础版

不忘初心,砥砺前行!

【新特性速递】树表格结构由单层 TR 改为 TR-TD-TABLE 层级嵌套!的更多相关文章

  1. 【新特性速递】树控件结构由单层 TR 改为 TR-TD-TABLE 层级嵌套

    FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对树控件进行了优化,由原来的单层 TR 改为 TR-TD-TABLE 层级嵌套,从而做到表里如一. 上个版本(v6.0.0),我们对 ...

  2. ActiveReports 11 新特性速递

    又到了一年一度,翘首期盼的ActiveReports11 即将发布,ActiveReports 10 表控件横空出世,成为中国式复杂报表的救星后,ActiveReports11 又会有哪些令人惊奇的新 ...

  3. 【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)

    上下左右按键 其实单元格导航(上下左右按键,需要启用表格的ShowSelectedCell属性)一直都存在,只不过之前的版本(v5.5.0)有一些小的BUG. BUG1 比如锁定列存在时,上下左右键只 ...

  4. 【新特性速递】CSS3动画增强

    FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对多个地方的CSS3动画进行了增强,使得用户体验更好. 1. 树控件启用EnableSingleExpand时,使得展开动画和折叠其 ...

  5. 【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

    移动端支持 虽然 FineUIPro 早在 2016 年就已经完成对移动端的适配工作,并新增了 50 多个官网示例. 并且,我们也新增了一个移动端的首页 http://pro.fineui.com/m ...

  6. FineUIMvc新特性速递(大间距模式,隐藏菜单垂直滚动条)

    即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字 ...

  7. 【新特性速递】优化Shift/Ctrl行多选逻辑,和Windows的文件资源管理器保持一致!

    别告诉我你不知道 别告诉我你不知道可以使用键盘的 Shift 和 Ctrl 来多选表格行,因为这个在 Windows 文件资源管理器中的常用操作,此时的画风是这样的: 这个动图中进行了如下操作: 1. ...

  8. 【新特性速递】F.doPostBack的说明文档

    FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对客户端JS函数 F.doPostBack 进行了增强,并增加说明文档. 如果你还没有查阅过FineUI的客户端文档,可以收藏下这个 ...

  9. golang1.16新特性速览

    今天是假期最后一天,明天起大家也要陆续复工了.golang1.16也在今天正式发布了. 原定计划是2月1号年前发布的,不过迟到也是golang的老传统了,正好也趁着最后的假期快速预览一下golang1 ...

随机推荐

  1. tomcat运行一段时间后报错"Too many open files"

    tomcat运行一段时间后报打开太多文件错误:Too many open files  查看当前进程的文件打开数: lsof -n |awk '{print $2}'|sort|uniq -c |so ...

  2. python之面向对象设计、编程

    面向对象 一.编程三个范式 1.面向过程编程 2.函数式编程 数学层面的函数 python中的函数编程 3.面向对象编程 二.面向对象设计 1.类:把一类事物共同的特征和共同的动作整合在一起就是类: ...

  3. Delphi 10.2 Tokyo新增JSON类学习——TJsonSerializer

    Delphi 10.3.2 for windows 7 编译通过,源码下载地址: Tokyo 10.2新增类,效率更高更快 TJsonSerializer 需要引用单元:System.JSON.Ser ...

  4. Springboot整合单元测试

    概述 对于简单易懂的小项目而言,可以不适用单元测试对平时开发没有什么影响,但是对于大型项目,单纯的依赖 “手点功能测试”, 那简直就是灾难,好了,说道这里,应该明白测试的一个重要性了,,,接下来,我们 ...

  5. Linux 安装指定版本Git

    git二进制文件下载地址: https://mirrors.edge.kernel.org/pub/software/scm/git/ 1.下载v2.21.0版本 wget https://mirro ...

  6. Java生鲜电商平台-电商支付流程架构实战

    Java生鲜电商平台-电商支付流程架构实战 说明:我一直秉承的就是接地气的业务架构实战.我的文章都有一个这样的核心. 1. 业务场景 2. 解决问题. 3.代码实现. 4.代码重构. 5.总结与复盘. ...

  7. Java日期时间API系列1-----Jdk7及以前的日期时间类

    先看一个简单的图: 主要的类有: Date类负责时间的表示,在计算机中,时间的表示是一个较大的概念,现有的系统基本都是利用从1970.1.1 00:00:00 到当前时间的毫秒数进行计时,这个时间称为 ...

  8. js个人笔记简记

    正则表达式 创建正则表达式的两种方法:   Var reg = new RegExp(‘’) Var reg = / a/ 后面三个参数g:全局匹配 i:不区分大小写 m:多行匹配 开头结尾有用 常见 ...

  9. Python、PyCharm、django环境搭建

    本文又名—— 响应式页面——从无到有(一) 事情是这样的,期末小组作业,需要我把大佬们写的页面搞成响应式的,但是我连py都没用过,只好现学…… 文章目录 一.前言 1.1 环境介绍 1.2 前期尝试 ...

  10. Java并发编程艺术读书笔记

    1.多线程在CPU切换过程中,由于需要保存线程之前状态和加载新线程状态,成为上下文切换,上下文切换会造成消耗系统内存.所以,可合理控制线程数量. 如何控制: (1)使用ps -ef|grep appn ...