更新时间:2022-04-26 GMT+08:00
分享

表格(新)

表格(新)为数据表格组件,主要用于展示大量的结构化数据,支持电脑端和移动端。使用时需要先通过数据绑定来绑定数据模型,再设置表格属性。支持对数据列表进行选择、排序、筛选、分页、自定义操作等复杂功能。

表格(新)相对于表格中的表格组件来说,更适用于移动端,但是不支持展示树形结构。当表格中的数据有父子关系,需要展示出树形结构时,您还是需要选用表格中介绍的表格组件。

向页面中拖入一个表格(新)组件,单击“表格”页签,并为表格组件绑定数据模型,设置表格属性,效果图如图1所示。

图1 效果图

绑定数据模型、设置组件属性

设置组件绑定的数据模型,有自定义对象、对象、服务以及事件四种,以下是绑定模型、设置组件属性的大致步骤。

  1. 向页面中拖入一个表格(新)组件,单击“表格”页签,在表格属性“数据绑定”中单击齿轮图标,绑定数据模型。
    图2 数据绑定
  2. 在弹出页面中单击“新增模型”。
  3. 设置表格的数据模型,如下图所示,添加对象模型,模型名称“equipmentInstance”,单击“下一步”。
    图3 创建数据模型
  4. “选择对象”选择一个提前创建好的对象,例如“HW__Equipment__CST”,“选择字段”中选择表单中需要展示的字段,单击“下一步”,然后单击“确定”。
    图4 选择展示字段
  5. 勾选刚建好的数据模型,单击“确定”。

    绑定对象模型后,显示如图5所示。

    系统默认添加了斑马纹,如果不需要,可在表格属性的“基本设置”中关闭“斑马纹”。

    图5 绑定数据模型后的结果列
  6. 参考表1表2配置表格属性。
    表1 表格(新)属性说明

    参数名

    说明

    序号

    是否显示序号列,序号累加显示。

    自动加载

    预览或加载页面时是否自动加载数据。仅当模型为对象模型时有效,启用后,预览或加载页面时,将调用后台的对象查询接口自动加载数据,不需要通过事件触发。

    单选

    启用后,显示单选按钮。

    多选

    启用后,显示多选按钮。与属性“单选”互斥,只能勾选“单选”或“多选”的一种。

    斑马纹

    是否显示间隔斑马纹。

    表头

    是否显示表头。表头的对齐方式,支持left、center、right

    表格边框

    表格边框样式设置。

    • 显示完整边框
    • 显示默认边框
    • 显示外边框
    • 显示内边框
    • 隐藏全部边框

    文字对齐方式

    表格中文字整体的对齐方式。

    编辑数据的方式

    编辑表格中数据的方式,可以设置“链接到页面”编辑数据。

    设置“链接到页面”时需要配置关联的页面名称,例如配置“详情页”、“添加页”、“修改页”的页面名称。

    若在当前页面编辑数据,则清空“编辑数据的方式”值。

    调整列宽

    展开“高级设置”,可查看到该参数。设置项只在电脑端有效。表示是否支持拖拽调整列宽。

    表头溢出省略

    展开“高级设置”,可查看到该参数。设置项只在电脑端有效。当每列的表头内容超过表格当前列宽后,是否设置超过的部分为省略号。

    内容溢出省略

    展开“高级设置”,可查看到该参数。设置项只在电脑端有效。当每列的内容超过表格当前列宽后,是否设置超过的部分为省略号。

    尺寸

    设置项只在电脑端有效。表示表格整体尺寸。

    表格最大高度

    设置项只在电脑端有效。表示表格的最大高度,单位为px。

    表格固定宽度

    设置项只在电脑端有效。表示表格的固定宽度,单位为px,为0表示不限制。

    表格固定高度

    设置项只在电脑端有效。表示表格的固定高度,单位为px,为0表示不限制。

    设置后,如果表数据内容超出该高度,会自动固定表头。

    分页设置/启用

    可以选择是否启用分页。

    风格

    启用分页后,可以对分页风格等进行设置。

    默认分页大小

    启用分页后,默认的分页大小。

    每页大小选项列表

    启用分页后,每页显示的条数选项列表,例如[10,20,40]。

    分页显示位置

    启用分页后,分页的显示位置。

    查询条件

    扩展表格能力,可以在表格上方添加查询条件,快速查询数据。

    单击“+ 新建”,设置条件文字的对齐方式、文字宽度、排列方式、按钮(查询、重置按钮)是否单独一行以及选择查询的条件字段。

    工具栏设置

    扩展表格能力,单击“+ 新建”,可以在表格上方添加工具栏,系统预置了新建、删除、打印、刷新,可根据需要进行选择。

    操作列

    单击“+ 新建”,可以在表格列配置单独的操作列,系统预置了详情、修改、删除,可根据需要进行选择。

    展开行

    单击“设置”,可以配置展开行后显示的字段,配置后系统自动在每行下方生成字段展示区域。

    表格列

    表格列生成后,单击“设置”,可以进行列的配置调整:支持配置列对齐方式、是否固定列、调整列宽、该列是否排序、列是否支持筛选、列是否支持合计等配置。

    表格列的属性请参见表2

    在表格属性中单击“表格列”后的“设置”,表格列的属性参数说明如表2所示。

    图6 设置表格列
    表2 “表格列”属性配置说明

    参数名

    说明

    对齐方式

    该列的对齐方式:居左、居中、居右。

    是否固定列

    是否固定列:不固定、固定左侧、固定右侧。

    当横向内容过多时可以配置固定左侧或者固定右侧。

    列宽

    列的宽度,单位为px,为0表示不限制。

    排序

    列是否开启排序功能。例如打开排序开关,列头效果为

    筛选

    列是否开启筛选功能,筛选条件:多选、单选、相等或者包含。

    例如设置支持筛选且多选,列头效果如下。

    合计

    列是否开启合计功能,支持统计:合值、平均值、最大值、最小值、数量。

    表格列开启合计后,系统自动在表尾生成合计行进行信息展示。

    显示平台

    列支持的显示平台:电脑端、移动端。

    移动端配置

    在移动端支持多级表头设置。该列在移动端显示为主标题还是副标题。

    展示方式

    单击齿轮图标,可设置如下属性:

    • 选择字体:该列文字的字体。
    • 字号大小
    • 字体颜色
    • 文字背景
    • 选择字型:例如加粗、斜体、下划线
    • 单元格:是否展示单元格,效果示例:。只有勾选“单元格”,展示方式中的上述配置(例如字体、字号大小等)才生效。

    是否添加组件

    是否添加图标。选择“添加图标”后,要设置图标展示形式、图标和颜色。效果示例:

    选择图标时,支持从以下三个页签选择图标:

    • 预置图标:系统预置了一些图标显示在该页签供用户选择。
    • 自定义库图标:从自定义的库图标中选择图标。
    • 存储图标(不推荐):从存储中选择已上传的图标。
分享:

    相关文档

    相关产品

close