【新特性速递】树表格结构由单层 TR 改为 TR-TD-TABLE 层级嵌套!
由于历史原因,在之前实现树表格时,我们有点偷懒,本来应该是层级嵌套的树结构,被我们硬生生的拉平了,请看:

可以看到,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 层级嵌套!的更多相关文章
- 【新特性速递】树控件结构由单层 TR 改为 TR-TD-TABLE 层级嵌套
FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对树控件进行了优化,由原来的单层 TR 改为 TR-TD-TABLE 层级嵌套,从而做到表里如一. 上个版本(v6.0.0),我们对 ...
- ActiveReports 11 新特性速递
又到了一年一度,翘首期盼的ActiveReports11 即将发布,ActiveReports 10 表控件横空出世,成为中国式复杂报表的救星后,ActiveReports11 又会有哪些令人惊奇的新 ...
- 【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)
上下左右按键 其实单元格导航(上下左右按键,需要启用表格的ShowSelectedCell属性)一直都存在,只不过之前的版本(v5.5.0)有一些小的BUG. BUG1 比如锁定列存在时,上下左右键只 ...
- 【新特性速递】CSS3动画增强
FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对多个地方的CSS3动画进行了增强,使得用户体验更好. 1. 树控件启用EnableSingleExpand时,使得展开动画和折叠其 ...
- 【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!
移动端支持 虽然 FineUIPro 早在 2016 年就已经完成对移动端的适配工作,并新增了 50 多个官网示例. 并且,我们也新增了一个移动端的首页 http://pro.fineui.com/m ...
- FineUIMvc新特性速递(大间距模式,隐藏菜单垂直滚动条)
即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字 ...
- 【新特性速递】优化Shift/Ctrl行多选逻辑,和Windows的文件资源管理器保持一致!
别告诉我你不知道 别告诉我你不知道可以使用键盘的 Shift 和 Ctrl 来多选表格行,因为这个在 Windows 文件资源管理器中的常用操作,此时的画风是这样的: 这个动图中进行了如下操作: 1. ...
- 【新特性速递】F.doPostBack的说明文档
FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对客户端JS函数 F.doPostBack 进行了增强,并增加说明文档. 如果你还没有查阅过FineUI的客户端文档,可以收藏下这个 ...
- golang1.16新特性速览
今天是假期最后一天,明天起大家也要陆续复工了.golang1.16也在今天正式发布了. 原定计划是2月1号年前发布的,不过迟到也是golang的老传统了,正好也趁着最后的假期快速预览一下golang1 ...
随机推荐
- 【JS】JS校验密码复杂度(必须包含字母、数字、特殊符号)
#场景一:密码中必须包含大小写 字母.数字.特称字符,至少8个字符,最多30个字符: var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a- ...
- Java 泛型示例 - 泛型方法,类,接口
Java Genrics 是 Java 5 中引入的最重要的功能之一. 如果您一直在使用Java Collections并使用版本 5 或更高版本,那么我确定您已经使用过它. Java 中具有集合类的 ...
- jQuery 源码分析(十九) DOM遍历模块详解
jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...
- javascript刷新当前页面的几种方式
这里总结一下JavaScript刷新当前页面的几种方式. 1.history对象. history.go(0); 2.location对象. location.reload(); location = ...
- hibernate手动设置的id无效的原因与解决方法
在使用Hibernate的过程中,发现手动设置的id(主键)无效,Hibernate仍然会在保存(调用Hibernate提供的merge()方法)的时候自动生成一个随机的id. 经过调试发现问题出在了 ...
- 数据库——SQL-SERVER练习(5) 供应关系
以下题目用到工程供应数据库关系模式:供应商(供应商号,供应商名,城市) S(Sno,Sname,City)零件(零件号,零件名,零件颜色) P(Pno,Pname,Color)工 ...
- 【maven】【idea】使用idea的maven进行deploy操作失败,报错:Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:2.7:deploy (default-deploy) on project proengine-db-sdk: Failed to deploy artifacts 错误码401
使用idea的maven进行deploy操作失败,报错: Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:- f ...
- Spring Boot快速集成kaptcha生成验证码
Kaptcha是一个非常实用的验证码生成工具,可以通过配置生成多样化的验证码,以图片的形式显示,从而无法进行复制粘贴:下面将详细介绍下Spring Boot快速集成kaptcha生成验证码的过程. 本 ...
- Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合
Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合 摘要:本文主要记录了如何将将前端的对象数组通过Json字符串传到后端,并在后端将Json字符串转换为对象集合. 前端代码 前 ...
- git 多账户链接不同gitlab仓库
1.若之前对 git 设置过全局的 user.name 和 user.email.类似(用git config --global --list 进行查看你是否设置) 一定要清除之前设置的用户和邮箱 $ ...