表格

表格的基础设置

表格的基础设置请参照「图表的基础设置」。

表格可以开启高度自适应选项,使得表格的高度适应内容从而使表格内部不出现纵向滚动条。预览模式下才生效

表格的数据设置

有关使用API拉取方式绑定数据请参照「表格的API格式」。

有关「过滤条件豁免」、「数据自动补全」和「绑定所有行转列」等通用数据设置请参照「图表的数据设置」。

下面介绍使用SQL方式绑定数据时的配置:

使用SQL模型的表格需要将SQL模型中的字段绑定到表格的列中:

  • 可以给表格增加多列,每列绑定一个SQL模型中的字段作为展示用的数据
  • 多列配置可以通过拖拽来决定顺序(工具栏中有个按钮)
  • 展示格式:默认情况下是直接展示绑定的字段数据,当然您可以做一些加工({value}表示数据本身、{row.field}可以拿到当前行的任意字段的数据,field就是字段名):

    • 1、例如在数据后加一个百分号 {value}%
    • 2、如图中第一行对类型字段格式化为了HTML,并且设置了样式
  • 表头字段备注说明:可对某一列的表头进行备注说明,页面展示时会在表头名称后面显示一个小问号,鼠标悬停时将会展示具体的备注说明
  • 是否HTML:上面设置了类型字段展示为HTML,需要开启「是否HTML」,否则将以纯文本的形式展示
  • 单位:这个配置将作为字符串直接附加在本列数据的后面
  • 是否自动换行和列宽是有一定关联的,如果没有打开自动换行,列宽设置的很小也没有效果
  • 是否隐藏:如果选择了隐藏,数据会照样传递到前端,但是该列不会展示
  • 格式化方法:可以选择:秒转时分秒、字节转换、数字转万/亿、百分比等,也可选择自定义,根据其余列的情况选择不同的格式化方法,详见「表格格式化方法
  • 背景色: 如果需要对表格的某一列设置特殊背景色,可以通过此项实现
  • 针对表格,我们还可以设置字段的飘红和飘绿展示,并且飘红飘绿的对比值除了下图中设置的4、3之类的固定值,Sugar还允许使用 {row.field} 的方式来拿到当前行的 field 字段来进行比较
  • 对于飘红飘绿,Sugar还可以设置为触发整行飘红或飘绿

图片

如上图的配置即可展现如下图的表格数据:

图片

自动绑定所有字段

有些情况下,我们SQL语句中select的字段可能因过滤条件的变化而变化,因此建模以及对应的数据绑定就会不好做,这时我们可以开启自动绑定所有字段

开启自动绑定所有字段后,会对SQL语句查询出的结果集全部装入表格中

那么即使我不知道会查出来哪些字段,但有那么几个必然会出现的字段,我希望对它进行特殊的适配呢? 这时你可以按原来的方式进行建模与数据绑定,绑定的那部分数据会覆盖自动绑定所有字段的对应数据。

超级表头

使用SQL建模的方式绑定表格数据,也支持超级表头,如下图的 超级表头配置 即可达成下面的效果:

图片

对比表格

对比表格是指Sugar根据SQL查询到的多天数据,自动计算日环比、周同比、月均比等对比项的特殊表格

数据要求

由于对比表格比较特殊,Sugar对对比表格所绑定的SQL模型有很严格的要求:

  • 必须存在一列数据类型为 日期 的字段
  • 日期字段外,其他的每个字段表示一个指标(如PV、UV等)
  • 注意:SQL语句查询出来的数据必须是多天的,并且包含了对应日期的数据(如要计算周均值,SQL查询结果就必须包含了本周所有天的数据;要计算月均比,SQL查询结果就必须包含本月和上个月的所有天的数据)

一般情况下对比表格要求的SQL查询结果的数据格式类似如下图(如果您数据库中格式不是这样的,很多情况下您可以使用Sugar的 行转列 功能来转换格式):

图片

数据绑定配置

要使用对表表格,需要以下配置,如下图:

  • 开启对比表格项
  • 数据日期,用来告诉Sugar将什么日期设定为当日(即标准日期,其他的如上周同日、上月等都是以当日作为标准)。这里可以选 昨天前天以及默认昨天前天很简单,就是现实世界中的昨天前天默认当日计算顺序是:

    • Sugar 会首先从过滤条件进行分析,如果存在类型为日期范围 的过滤条件,那么会以 日期范围条件的结束日期 作为当日
    • 如果存在类型为日期 过滤条件,那么会以 日期的取值作为当日
    • 如果不存在这样的过滤条件,那么Sugar会将SQL查询结果的最大日期作为当日
  • 选择对比项,可任意多选,再次提醒:SQL语句查询出来的数据必须是多天的,并且包含了对应日期的数据(如要计算周均值,SQL查询结果就必须包含了本周所有天的数据;要计算月均比,SQL查询结果就必须包含本月和上个月的所有天的数据)
  • 最后绑定要展示的指标列,可以配置单位、飘红飘绿设置(飘红飘绿是针对指标的比率项,如日环比、周同比等。并且Sugar还支持一键配置共用的飘红飘绿规则,这样就不必每个指标都单独配置,当然,如果单独配置了,那么单独配置的优先级将高于共用配置)

图片

以上配置可以实现如下图的展示效果:

图片

表格格式化方法

如果你传入的数据是想作为时间来处理的一个大数字,例如987654321秒,希望可以自动转化成N天N小时N分钟N秒;如果你传入的数据是想作为字节来处理的一个大数字,例如987654321字节,希望可以自动转化成TB、GB、MB、KB;如果你传入的数据是想作为数字来处理的一个大数字,例如987654321,希望可以自动转化成亿、万; 这个时候可以使用格式化方法功能

图片

除此之外,还有自定义的格式化方法

图片

比如您的字段会取不同类型的值,需要做不同类型的格式化。那么您可以这样做:

  • 选择格式化方法为自定义
  • 点击添加按钮 新增1条或多条自定义格式化方法
  • 在每条格式化方法选择这个字段会在何种情况下进行何种格式化方法,例如 让字段 to_id> 100000 时选 数字转万/亿方法等。
  • 如果您添加了多个方法,Sugar会按从上到下进行优先级排序,满足了更上的条件,则会按更上的格式化方法进行格式化。

展示行号

表格的第一列可以插入序号,如:

图片

表格的高级设置

表格合并单元格

只要在编辑界面配置合并单元格的级数(2级就表示自动合并表格的头两列数据,当然头两列数据中必须要有重复的数据才能有合并的效果),即可达到合并单元格的效果,如下便是2级合并单元格的效果:

图片

表格分页

在控制面板中开启分页功能后,表格支持前后端分页。

图片

  • 前端分页:是将传过来的数据进行分页,切换页码时不会另外请求数据;
  • 后端分页:SQL模型中需要嵌入{limit}语法,如下图左侧的伪SQL语句(用户在切换页面时,我们会自动将伪SQL中的{limit}替换正确的SQL语句):

图片

注意:如果伪SQL中写了{limit}语法,但是并没有开启表格的后端分页,我们也会自动移除{limit},不会对真正的SQL有任何影响。

API方式下的后端分页请参照「表格的API格式」。

表格排序

在控制面板中开启排序功能后,表格支持前后端排序。

图片

  • 前端排序:是将传来的数据进行排序,排序时不会另外请求数据;
  • 后端排序:SQL模型中需要嵌入{order by}语法,如下图左侧的伪SQL语句(用户在切换排序规则时,我们会自动将伪SQL中的{order by}替换正确的SQL语句):

图片

注意:和表格的后端分页一样,如果伪SQL中写了{order by}语法,但是并没有开启表格的后端排序,我们也会自动移除{order by},不会对真正的SQL有任何影响。

API方式下的后端排序请参照「表格的API格式」。

表格合计和均值

Sugar支持在表格的最后加上合计、均值,Sugar会自动判断报表各列的数据类型,只对数字类型的列做累加或均值计算,当然也支持用户显式地输入不需要计算的列ID,如下图:

图片

图片

有一些时候,可能我们某一列的数据在做合计或者均值处理的时候,不应该直接计算该列的值而是直接取其它列的合计值进行计算,所以Sugar提供了均值合计自定义计算,如下所示:

图片

这里这样配置相当于取了 id 以及 to_id 的合计和均值直接按照表达式进行了计算。

图片

表达式 可以支持的计算符合有/\+\-\*\/\%\d\.\s/, 即+,-,*,/,%,数字空格。如果希望用到其他列的数据,格式为{列名id},这之间不许有空格。

注意注意注意:列名id与表达式所用的需要是SQL查出来的字段名称,而不是表头的中文名,切记不要写错

本页内容