本文介绍了表格组件的配置和使用方法。

概述

表格组件以表格形式展示数据,支持绑定静态数据、接口数据源或数据表资源。

新表格组件

样式配置

在组件的配置页面包含数据表数据展示两个页签:

  • 数据表:已配置数据源后,用于预览数据表,该数据表展示维度和度量下所有字段的数据。
  • 数据展示:用于数据源配置和表格数据及展示效果配置。

配置表格组件的数据展示前,需要完成数据源配置。详细内容请参见数据源

样式配置
功能类型 说明
数据源 完成表格数据源配置后,此处显示表格的数据源名称。
说明
  • 未配置表格数据源时,此处显示数据源配置,单击此按钮可开始表格数据源配置。详细内容请参见数据源
  • 当组件数据源类型为接口数据源和静态数据源时,组件中数据不支持筛选、排序、聚合等功能。
维度 表格组件数据源配置完成后,会根据数据类型自动解析相关字段至维度或度量模块中。

维度和度量支持的数据类型:

  • 维度:布尔型、字符型、时间型字段。
  • 度量:数值型字段。

支持操作如下:

  • 拖拽维度或度量下的多个字段到数据字段框,作为表格展示中的列数据源。
  • 修改字段的显示名称。
  • 添加字段到筛选器,作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。
度量
数据字段 显示已添加的维度或度量的字段。

支持操作如下:

  • 添加多个维度或度量字段。
  • 调整添加的维度或度量顺序,此处的顺序即为表格列的显示顺序。
  • 编辑数据表字段的显示名称。
数据排序 支持对每个字段设置排序规则:升序、降序,不排序。
属性:筛选器 只有当表格数据源类型为数据表资源时,才支持该功能。

筛选器作用:

  • 支持通过筛选器对数据进行过滤,展示特定数据。
  • 支持将筛选项在前端显示为查询项,方便在运行态随时对数据进行搜索或过滤。

使用方法:

  1. 在维度或度量栏下,单击字段的三角入口,选择筛选器选择筛选器
  2. 设置字段的过滤筛选条件,并单击确认

    表格默认展示该字段的全部数据,支持字符型、数值型、时间型的筛选条件设置。下文以字符型筛选设置为例:

    单击字段筛选下的输入框,输入关键字搜索并选择筛选值,支持多选。

    设置筛选器

    如果您还需要在运行态时,随时对字段进行过滤查询,可勾选展示为查询项,组件上方会出现该字段的查询框。

    显示项

    右侧属性栏显示已配置筛选字段名称。

    筛选字段
    说明 将字段设置为筛选器时,如果没有设置任何过滤,且未勾选展示为查询项,该字段不会显示在右侧的筛选器中。
样式:全局样式 设置全局样式效果。
  • 字体:微软雅黑、苹方、宋体、黑体
  • 支持导出数据:勾选后,可展示导出按钮,单击导出可获取当前页面所有数据
    说明 仅支持导出当前页面展示的数据。如果数据表设置了分页显示数据,仅支持导出当前表格第一页展示的数据。
  • 区分奇偶行:勾选后,表格中奇偶行显示不同背景颜色
  • 冻结首行:勾选后,首行可固定显示
  • 显示分页器:勾选后,需要设置每页数量,默认值为50,取值范围为1~200行。设置分页显示后,可切换页面查看表格中的数据。
    说明 如果表格数据类型为接口数据源,显示分页器需满足以下要求:
    • 接口入参需包含:pageSize(每页记录数);pageNo(当前页码,第一页从 1 开始)
    • 接口出参需包含:pageSize(每页记录数);pageNo(当前页码,第一页从 1 开始);total(总记录数,可不传。不传时,目前会影响表格组件的分页器显示)

    以上参数名字母大小写需与本文描述保持一致。

    如果没有开启分页显示,但表格中数据过多,超出了表格的高度,可以通过鼠标滚动查看所有数据。如果勾选了冻结首行,表格滚动时,表头将固定在表格顶部。

样式:标题 设置标题内容、表头文字、内容文字的显示效果。
  • 标题内容:设置标题的内容
  • 字号:设置字号值
  • 颜色:设置字体颜色
  • 粗细:可选加粗(默认值)、标准
  • 位置:设置表头文字、内容文字显示位置,可选居左(默认值)、居中、居右
  • 表头背景:设置表头的背景颜色
样式:表头文字
样式:内容文字
样式:行/列 设置行或列的显示效果。
  • 行高:仅支持行样式
  • 分割线:勾选后,需设置分割线颜色分割线粗细
样式:背景 设置表格的背景和边框显示效果。
  • 背景色
  • 边框:勾选后,需设置粗细颜色样式

数据源

  • 静态数据源

    选择静态数据源时,自定义的数据需要符合以下格式:

    {
      "data": [
        {
          "month": "Jan",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Feb",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Mar",
          "sales": 300,
          "cost": 150
        }
      ]
    }

    数据中的每一行以{"列名1":"值1","列名2":"值2",...}表示,列对应的值不带上英文双引号表示数据为数值型。每行的数据个数必须相同。如果某个单元格没有数据,需保留双引号,否则表格将无法正确显示。

    例如数据源中最后一行的最后一列没有数据:

    {
      "data": [
        {
          "month": "Jan",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Feb",
          "sales": 100,
          "cost": 50
        },
        {
          "month": "Mar",
          "sales": 200,
          "cost": ""
        }
      ]
    }

    表格数据显示如下:

    数据列
  • 接口数据源

    选择接口数据源时,如果接口返回的数据格式和以上静态数据源中的格式相同,则是否分页时展示的规则也相同。

    选择接口数据源时,还支持动态返回每页的内容。如果勾选显示分页器,需要满足以下要求:

    • 接口入参需包含:pageSize(每页记录数);pageNo(当前页码,第一页从1开始)
    • 接口出参需包含:pageSize(每页记录数);pageNo(当前页码,第一页从1开始);total(总记录数,可不传。不传时,目前会影响表格组件的分页器显示)
    说明 以上参数名的字母大小写需与本文描述保持一致。

    组件调用接口时将自动传递pageSizepageNo参数,如果接口支持返回分页数据,则应该返回类似以下的格式:

    {
      "pagination":{
        "pageSize": 3,
        "pageNo": 1,
        "total":6
      },
      "data": [
        {
          "month": "Jan",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Feb",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Mar",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Apr",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "May",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Jun",
          "sales": 300,
          "cost": 150
        }
      ]
    }

    total表示的是所有数据的总条数,表格组件将根据这个数字和每页的条数显示分页,list表示的是当前页的数据,格式和上方静态数据源中一致。

    注意 建议list中的数据个数和参数中的pageSize保持一致,如果不一致,会导致表格的分页控件无法正常展示。
  • 数据表资源

    有关数据表资源的配置详情,请参见数据表资源

动作

在Web可视化编辑页面,选中表格组件的交互页签,可进行事件和动作的交互配置。

交互配置

表格组件支持交互动作配置的详细内容请参见交互配置

组件支持的事件详情见下表。

注意 单元格所在行以及列均以0开始计算。即第一行列,传出的值为0。
事件 字段名 字段说明
点击单元格 content 单元格内容
row 所在行号
column 所在列号
双击单元格 content 单元格内容
row 所在行号
column 所在列号
鼠标移入单元格 content 单元格内容
row 所在行号
column 所在列号
鼠标移出单元格 content 单元格内容
row 所在行号
column 所在列号
点击行 rowData 所在行数据
row 所在行号
双击行 rowData 所在行数据
row 所在行号
鼠标移入行 rowData 所在行数据
row 所在行号
鼠标移出行 rowData 所在行数据
row 所在行号
点击列 column 所在列号
双击列 column 所在列号
鼠标移入列 column 所在列号
鼠标移出列 column 所在列号
点击标题 title 标题内容
双击标题 title 标题内容
鼠标移入标题 title 标题内容
鼠标移除标题 title 标题内容
翻页 page 页码

案例

以配置静态数据源为例,展示某公司1月至3月某物品的销售单价(cost)和销售量(sales)数据,如下图所示:

{
  "data": [
    {
      "month": "Jan",
      "sales": 300,
      "cost": 150
    },
    {
      "month": "Feb",
      "sales": 300,
      "cost": 150
    },
    {
      "month": "Mar",
      "sales": 300,
      "cost": 150
    }
  ]
}
数据表
  1. 在Web可视化编辑界面的组件栏,拖拽一个表格组件到画布中,并单击右侧样式栏的配置添加新表格组件
  2. 在数据源配置中,选择静态数据,自定义静态数据,并单击确定配置数据源
  3. 数据展示页面,拖拽自动解析的维度和度量字段,进行如图所示配置。数据展示配置
    说明 更多样式配置请参见样式配置