1. 版本说明

iOS/Android支持版本

jar包版本

8.4及往后版本

2017年4月1日

2. 描述

tab布局能避免多层次钻取与返回,可以在一个报表内部进行切换,钻取层数如果过多的话,看报表的人的操作体验就会下降很多,这时就可以选用tab组件。

3. 实际效果

新建一张表单,首先在表单中拖入tab组件,然后在第一层级的tab组件中再添加新一层的tab组件,并在第二层tab组件中添加报表块组件,通过表单组件的参数联动,即可实现不同tab系列下不同维度的数据分析。

报表样式设计如下:

我们以行业榜单中的手机行业举例来说明组件间的参数联动,其他tab页的设置方法相同。

新建一个内置数据集手机,其中时间段包含月度、季度和年度。

拖入两个报表块,左侧的为report0,右侧的是report1,左边的报表块(report0)界面设置如下:

右击A1单元格,点击超级链接,进入超级链接窗口,点击“+”号,添加当前表单对象,表单对象为report1,参数a的值为月度,表示当参数为月度的时候,report1中的数据为月度的数据,再添加一个当前表单对象,表单对象为report0,参数line的值为1,表示line的值为1的,report0进行刷新。

A2单元格超级链接中的参数a为季度,line的值为2。

A3单元格超级链接中的参数a月年度,line的值为3。

其他设置均与A1单元格的超级链接设置相同。

右击A1单元格,点击条件属性,弹出条件属性对话框,公式为$line = 1时,背景色为蓝色,字体色为白色,如下图所示:

A2单元格的条件属性为$line = 2 时,背景色为蓝色,字体色为白色。

A3单元格的条件属性为$line = 3 时,背景色为蓝色,字体色为白色。

右边的报表块(report1)界面设置如下:

B2单元格设置了过滤,显示参数a的值时的数据,如下图:

A2单元格中的=seq()为序号公式,根据B2排序,所以A2单元格的左父格为B2。

并且A2单元格设置了条件属性,是为了实现隔行换色,如下图所示:

至此,第一个tab页就设置完成,其他tab页与上述步骤相似,就不一一赘述了。

这时,可以看到在同一个界面中可以切换多个布局,减少了层层钻取的烦恼。

点击预览后,可以看到描述中的效果。

注:在表单body中移动端属性手机重布局的勾选要去掉。

注:在app中适用需要点击模板>移动端属性,选择HTML5解析。

巧用tab组件实现APP的布局效果的更多相关文章

  1. 基于vue与vux做的可滑动tab组件(附源码)

    背景 前不久,刚完成了一个商品列表+购物车功能的页面,因为一级商品分类在顶部tab中显示,可滑动,间距可定制,如下图所示: 定制的tab需求如下: 1. 每个tab-item的间距是相同的,可定制 2 ...

  2. 基于sticky组件,实现带sticky效果的tab导航和滚动导航

    上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...

  3. 关于elementUi tab组件路由跳转卡死问题

    好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi   后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...

  4. 【Android Studio安装部署系列】二十八、Android Studio查看其它APP的布局结构

    概述 日常使用别家的APP过程中,会遇到一些比较好看的布局,这时候我们就想学习一下别人的布局结构,以便参考. (1)手机连接电脑.设置手机为USB调试模式 参考<[Android Studio安 ...

  5. JGUI源码:Tab组件实现(9)

    程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...

  6. Web Components实践开发Tab组件

    本文是对web components的一次实践,最终目的是做出一个tab组件,本文涉及Custom Elements(自定义元素).HTML Imports(HTML导入).HTML Template ...

  7. Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页

    Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页 在FireMonkey iOS应用程序中的Tab Tab由FMX.TabControl.TTabControl定 ...

  8. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue-music 关于基础组件 (Tab组件)

      定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex === ...

随机推荐

  1. SharePoint 2016 安装配置流程及需要注意的地方

    1. 安装域, 安装后创建一个用户用于之后的安装配置, 例如 SPAdmin@XXXXX.com 2. 安装sql server 2016 将要安装sql server 的服务器加入域,   并将域账 ...

  2. Java 泛型在实际开发中的应用

    java泛型是对Java语言的类型系统的一种扩展,泛型的本质就是将所操作的数据类型参数化.下面我会由浅入深地介绍Java的泛型. 一:泛型出现的背景 在java代码里,你会经常发现类似下边的代码: p ...

  3. chrome浏览器iframe兼容性问题,隐藏起来再显示滚动条消失?

    前言:在调试页面时发现谷歌浏览器bug,版本: 58.0.3029.81 问题描述: 1. 页面中,选项卡里面是IFrame,页面初始显示时有纵向滚动条出现 2. 来回切换选项卡一次,原来选项卡页面的 ...

  4. HDU 1051 Wooden Sticks 贪心||DP

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  5. 与你们分享我学习linux系统的三大妙招

    一说到linux,我们就自然会想到企业服务器系统,目前市场上的网络设备都是使用linux内核操作系统,一些网络服务器也是使用linux操作系统下面的服务搭建实现的:目前操作系统这块也基本被linux占 ...

  6. json和xml封装数据、数据缓存到文件中

    一.APP的通信格式之xml xml:扩展标记语言,可以用来标记数据,定义数据类型,是一种允许用户对自己标记语言进行定义的源语言.XML格式统一,扩平台语言,非常适合数据传输和通信,业界公认的标准. ...

  7. Java数据类型+练习

    java基础数据类型: 四类八种: 1, 整数型 byte   2的8次方(取值范围--<-128~127>)--1个字节 short   2的16次方--2个 int   2的32次方- ...

  8. “玲珑杯”ACM比赛 Round #18--最后你还是AK了(搜索+思维)

    题目链接   DESCRIPTION INPUT OUTPUT SAMPLE INPUT 1 4 2 1 2 5 2 3 5 3 4 5 5 5 SAMPLE OUTPUT 35 HINT 对于样例, ...

  9. 干货:基于 Git Flow 的 Git 最佳实践(附加解决大家经常碰到的问题)

    突然想写这一篇Git的使用心得,主要有几个原因,其一是自己使用Git也有快3年时间了,其间自己经历过一些坑,也有迷茫的时候,在呆过的大大小小的团队中,其实每个人也都并不是Git专家,很多对于流程以及G ...

  10. nyoj_7:街区最短路径问题

    做这题时,先假设目标点在某个位置,然后对其稍微移动dx,dy,分析对ans的影响.最终得,选点时,使一半的横坐标比目标点横坐标小,一半的纵坐标比目标点小,这样得到的ans最小. 题目链接: http: ...