FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 1989|回复: 0

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

[复制链接]
发表于 2019-12-18 10:05:47 | 显示全部楼层 |阅读模式

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

上个版本(v6.0.0),我们对树表格(本质上还是表格)进行了重构,由单层TR改为层级嵌套结构,效果不错:https://www.cnblogs.com/sanshi/p/11291478.html


这个版本,类似的手法用于树控件,改为层级嵌套结构有很多好处:
  • 表里如一,数据和DOM节点结构一致
  • 按层次处理,代码逻辑更清晰(v6.0.0之前的版本为每个节点添加data-nodelevel属性,方便迂回处理层次结构)
  • 有助于简化展开折叠代码,特别是CSS3动画更加丝滑


先来直观对比下两者的区别:

FineUIPro v6.0.0:



FineUIPro v6.1.0:


这个改动有助于提升节点展开折叠的CSS3动画效果,是不是很奇怪?没关系,下面听我详细道来...



========================================================
FineUIPro/Mvc/Core v6.0.0中,由于子节点和父节点是平级的,所以在动画开始前,我们需要做一些的改变:
  • 计算获得所有需要折叠的子节点
  • 新建一个TR-TD-TABLE结构
  • 将所有需要折叠的子节点移动到新建的 TR-TD-TABLE

下面给出了 F.js 中相关实现的源代码:
  1. var fakeNode = $('<tr class="f-tree-fakenode"><td><div class="f-tree-fakenode-inner" style="opacity:1;"><table></table></div></td></tr>');
  2. var fakeNodeInner = fakeNode.find('.f-tree-fakenode-inner');
  3. var fakeNodeInnerTable = fakeNodeInner.find('table');
  4. removedTrs.appendTo(fakeNodeInnerTable);
  5. fakeNode.insertAfter(nodeTr);
复制代码


下图可以看出,在折叠时DOM节点的改变,其中 f-tree-fakenode 是我们新增的 TR-TD-TABLE,用来作为当前节点所有子节点的容器,并执行折叠动画。

当然,这个截图的效果你是不太容易观察的,因为这个动画过程很快(300ms),所以新增的  TR-TD-TABLE 结构一闪而过,随即在折叠完成后给删除了。

不过这个过程需要计算和DOM节点操作,势必对动画效果有影响。

========================================================


新版本中(v6.1.0),由于所有子节点本来就在一个TR-TD-TABLE结构,所以无需上述的复杂操作,CSS3动画效果会更加丝滑。




官网示例已更新:

FineUIPro:https://pro.fineui.com/
FineUIMvc:https://mvc.fineui.com/
FineUICore:https://core.fineui.com/
FineUICore (Razor Pages & Tag Helpers):https://pages.fineui.com/
F.js:https://js.fineui.com/


现在加入【三石和他的朋友们】星球,下载FineUIPro/Mvc/Core(基础版):https://fineui.com/fans/



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-3-29 16:05 , Processed in 0.048806 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表