表格组件以表格形式展示数据,支持绑定静态数据、接口数据源或数据表资源。本文介绍表格组件的配置和使用方法。

前提条件

参考以下操作完成Web应用创建。
  1. 项目管理
  2. 创建Web应用

操作步骤

本文主要介绍组件样式的个性配置。有关组件样式的通用配置,请参见样式配置

  1. 在Web可视化编辑页面,单击最左侧的组件图标组件
  2. 在画布左侧组件下拉列表,选择基础组件,并展开图表列表。
  3. 拖拽一个表格组件到画布中,单击右侧样式中的配置
    新表格组件
    在打开的组件数据配置页面,自动展开了数据源配置面板。
  4. 选择数据源类型,完成配置后,单击确定
    有关数据源的配置说明,请参见本文下方的数据源数据源配置
  5. 可选: 单击左上角数据表,查看已配置数据源的所有数据信息。
  6. 数据展示配置页面,根据配置项说明(见下表)设置表格数据和样式。
    数据展示配置
    配置项 说明
    数据源 显示已配置的数据源名称。
    说明 当组件数据源类型为接口数据源和静态数据源时,组件中数据不支持筛选、排序、聚合等功能。
    维度 显示根据数据源的数据类型自动解析到维度或度量模块中的字段。

    支持的数据类型:

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

    支持操作:

    • 拖拽维度或度量下的多个字段到数据字段框,作为表格展示中的列数据源。
    • 修改字段的显示名称。
    • 添加字段到筛选器,作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。
      说明 只有当组件数据源类型为数据表资源时,才支持该功能。 详细配置指导请参见筛选器配置
    度量
    数据字段 显示已添加的维度或度量的字段。

    支持操作:

    • 添加多个维度或度量字段。
    • 调整添加的维度或度量顺序,即表格列的显示顺序。
    • 编辑字段的显示名称。
    数据排序 支持对每个字段设置排序规则:升序、降序,不排序。

    您可在预览或发布后的应用页面,单击表头中列名称右侧的排序图标排序调整排序规则。

    说明 只有当组件数据源类型为数据表资源时,才支持该功能。
    全局样式 设置全局字体和背景色。
    导出数据入口 设置是否显示表格数据的导出按钮。 默认不显示。

    设置显示导出按钮后,支持配置字色、icon颜色、背景色和边框色。单击导出可获取当前页面所有数据。

    说明 仅支持导出当前页面展示的数据。如果数据表设置了分页器,仅支持导出当前表格第一页展示的数据。
    表格标题 设置是否显示表格标题。默认显示,支持配置标题内容、字号、颜色和粗细。
    表头文字 设置表头、内容文字的字号、字色、粗细、位置等。
    内容文字
    行/列样式 设置行或列的显示效果:行高、是否冻结首行、是否区分奇偶行和分割线颜色/粗细。
    表身外边框 设置表格外边框是否显示。默认显示,支持配置粗细颜色样式
    分页器 设置是否显示分页器。默认显示 ,支持以下配置:
    • 每页数量:默认值为50,取值范围为1~200行。
    • 选中页/普通页:设置字色背景色和边框色。
    • 切换按钮icon:设置正常颜色不可用颜色

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

    说明 如果表格数据类型为接口数据源,显示分页器需满足以下要求:
    • 接口入参需包含:pageSize(每页记录数);pageNo(当前页码,第一页从 1 开始)
    • 接口出参需包含:pageSize(每页记录数);pageNo(当前页码,第一页从 1 开始);total(总记录数,可不传。不传时,目前会影响表格组件的分页器显示)

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

    单击页面右上角的完成配置后,您可在Web可视化编辑页面查看到已配置的组件数据。
  7. 可选: 在Web可视化编辑页面,选中目标组件的交互页签,配置事件和交互动作。详细配置指导请参见交互配置
  8. 单击页面右上方的预览,查看或调试组件的展示数据。

数据源

  • 静态数据

    自定义的数据需要符合以下格式:

    {
      "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保持一致,如果不一致,会导致表格的分页器无法正常展示。
  • 数据表资源

    支持的数据表类型为平台系统表设备数据表设备快照表设备事件表