Tracy.Liu 发表于 2018-8-31 17:48:56

一看就会,超有用活字格技能:三十四,表格的折叠展开效果(新)

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

重要提示

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

帮助文档

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

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

老规矩,我们先来看看效果~
   

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

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

工程文件




Simon.hu 发表于 2020-3-5 09:06:30

页面数据传递功能,可以解决一些问题
在同一个页面,我们的确实做不到
页: [1]
查看完整版本: 一看就会,超有用活字格技能:三十四,表格的折叠展开效果(新)