一看就会，超有用活字格技能：三十四，表格的折叠展开效果（新）

老菜鸟

本帖最后由 willning 于 2022-8-15 15:29 编辑

重要提示

活字格在V8.0中，活字格提供“设置行列布局命令”，通过设置特定行“可见/不可见”，可直接解决该问题

帮助文档

============以下为旧版本的解决方案，适用于V7.0 Update 1及更早期版本============

这个帖子给大家介绍一下页面中表格的折叠展开效果是如何实现的。

老规矩，我们先来看看效果~
表格折叠展开效果.gif

要实现就这功能，只要做好这两件事就OK啦~
1. 隐藏对应的表格
实现这个功能的方法非常简单，就是做多个页面，在点击隐藏或显示时，跳转至对应页面模拟出隐藏或显示的效果。
image.png599051208.png

2.保证在切换表格隐藏/显示状态后，滚动条不会跳转至顶部，而是保持当前浏览位置不变。
熟悉活字格的朋友们都知道，活字格是一种单页应用程序（SPA），就是说整个应用其实只有一张WEB页面，只是在用户与应用程序交互时来动态更新该页面。所以说，在同一个页面中进行操作，滚动条本身就动。但是在活字格中，为什么会出现跳转至顶部的情况呢？这是因为虽说我们的活字格是一款SPA，不存在页面间的跳转（毕竟就一个页面），但是为了实现那种页面跳转的效果，我们在设计这个“页面跳转”功能时，人为让页面在“跳转”后回到顶端。
了解了这个细节后，那就非常好办了，我们为了让他不回到顶部，那把这个回到顶部的功能干掉不就好了嘛~于是，我们可以做如下设置，就可以实现了~
1）给每一个隐藏/显示，添加一段js代码
image.png163146666.png