表格数据中的展开-收起功能

[askwuxue]

对于数据展示的网站，表格很常见，表格中的内容形式很多，所有有很多的展示样式，某个单元格的数据超过三行时展示...进行省略，鼠标移入时，通过气泡框的形式展示完整的内容。本次遇到的需求是，当某个单元格的数据超过四行时，使用展开收起功能。展示的正文+展开，如下图：

当点击展示时，展示完整内容

前置内容

1. 表格控件atnd table
2. 数据是动态请求接口获取的。

分析过程

1. 什么时候出现展开-收起？
   当数据渲染在表格上、获取正文的高度，判断正文的高度是否超过限制高度，出现展开。
2. 难点是什么？
   当数据渲染在表格上之后，再获取高度，判断是否出现展开-收起功能。UI体验非常差，先要展示数据，然后再进行调整，有闪烁的感觉，页面至少回流两次，性能差。
3. 如何在表格还没有渲染到页面上时获取内容的高度？
   这里需要对页面的渲染原理有一些了解，页面的渲染大致分为以下步骤
   a. 将HTML构建成一个DOM树（DOM = Document Object Model 文档对象模型），DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
   b. 将CSS解析成CSS去构造CSS Rule Tree
   c. 根据DOM树和CSSOM来构造 Rendering Tree（渲染树）。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。
   有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
   下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置 layout render tree。
   再下一步就是绘制(Paint)，即遍历render树，并使用浏览器UI后端层绘制每个节点。
   Layout会发生在回流阶段，Paint发生在重绘阶段

解决方案

1. 根据分析过程3，我们在页面重绘之前就可以拿到页面的布局信息，换句话说，重绘之前可以获取正文的高度了，即使这时正文还没有渲染在页面上。浏览器的requestAnimationFrame方法。window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

2. 因为表格是数据驱动的，所以我们可以在渲染数据时，根据数据的值来决定是否出现展开-收起。所以我们需要在每一行的数据中加入是否展开-收起的标识。

详细步骤

1. 在渲染之前给数据打标识，方便在真正渲染到页面时根据数据进行判断。
2. 根据rebuild之后的数据渲染到页面上。

具体代码