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

表格

表格是一个组合组件,与模型绑定之后,可以提供快速构建基本表单能力,包括查询、保存、重置能力。也支持用户根据实际业务要求在上面进行二次修改编排。

向页面中拖入一个表格组件,单击“表格”页签,并为表格组件绑定数据模型,增加查询条件,工具栏。具体属性如下表1所示,效果图如下图所示。

图1 效果图

绑定数据模型、增加查询条件、工具栏

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

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

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

    如需要在每行添加行序号,可在表格的“扩展属性”中打开“行号”。

    图4 绑定数据模型后的结果列
  6. 选中上图中“已添加列”中的任意一项,单击,调整列的显示顺序。
  7. 单击上图中每个字段后的齿轮图标,修改列标题、是否隐藏、是否可编辑等字段属性。

    以“设备编码”为例,其属性配置如下图所示。在配置列标题时,可选择已有多语言、创建或更新多语言。此处创建的多语言会保存在租户的多语言库中。

    图5 设置“设备编码”列的属性
  8. 为表格增加操作列。
    1. 在左侧“设计视图”中选中“表格”,单击右侧“属性”页签中“表格列”中的

    2. 单击上图中Operation1后的齿轮图标。
    3. 在“属性配置”对话框中修改“列标题”为“操作”。
    4. 单击“添加操作按钮”,设置“编辑”按钮的样式,如下图所示。
      图6 为操作列增加修改图标
    5. 在上图中单击事件图标,单击“动作列表”后的“+”号,在弹出的事件编排器中,在右侧代码编辑区添加如下事件代码,单击“创建”。
      //获取当前组件(即table)
      let _component = context.$component.current;
      //获取当前行row,取对象的id属性
      let rowId = _component.$attrs.row.id;
      //带着id跳转到设备详情页面
      context.$page.load('/besBaas/page#/HW__editEquipment?id='+rowId);
    6. 单击页面上方保存按钮,保存页面。
    7. 再次单击“添加操作按钮”,添加“删除”按钮。

      参照图6,设置按钮的“类型”为“主要按钮” 、“图标”为“android-delete”。

    8. 单击事件图标,在弹出的事件编排器中,在右侧代码编辑区添加如下事件代码,单击“创建”。
      //获取当前组件(即table)
      let _component = context.$component.current;
      //获取当前行
      let row = _component.$attrs.row;
      // 表格组件
      let _table = this.$component.table;
      // 删除当前行数据
      this.$dialog.confirm({
          title: '确认框',
          content: '确认是否删除?',
          okText: "确定",
          cancelText: "取消",
          onOk: () => {
              _table.doDelete([row]).then(()=>{_table.doQuery();})
          }
      })
    9. 单击页面上方保存按钮,保存页面。
    10. 单击上图中“确定”;再单击页面上部的保存图标。
  9. 设置查询条件区域。
    1. 单击右侧“属性”页签中“表格区块”中“查询”后的“添加”按钮。
      图7 增加查询条件区域
    2. 如下图所示,在“添加查询条件”对话框中选择查询条件,单击“确定”。
      图8 选择查询条件
    3. 单击页面上部的保存图标。
  10. 设置工具栏区域。
    1. 在左侧“设计视图”中选中“表格”,单击右侧“属性”页签“表格区块”中“工具栏”后的“添加”按钮。
    2. 删除上图工具栏中多余的按钮,只保留“新增行”、“保存”和“删除”按钮。
    3. 单击页面上部的保存图标。
表1 表格属性说明

参数名

说明

添加字段图标

表格的列,当表格组件绑定了数据模型后,可选择绑定的模型中的字段成为表格的列,以及表格的查询条件。

添加操作列图标

表格的列,在表格中添加可操作列,即在操作列中通过添加图标,并为图标添加onclick事件代码,实现某些功能,如删除、编辑等。

添加空白列图标

表格的列,可添加表格空白列。

合并图标

在已添加列中,选择了某几列,再单击“合并”,即可合并为一个大列,选中的列将作为大列的子列显示。

分解图标

在已添加列中,选中某个包含多个子列的大列,再单击“分解”,即可分解此大列。

字段配置图标

对列字段进行属性配置,包括基本属性,功能,样式等。

删除字段图标

删除已存在的列字段。

顺序调整图标

对表格列字段重新排序。

查询

扩展表格能力,为表格添加查询区块,快速查询数据。

工具栏

扩展表格能力,为表格添加工具栏,提供增删改查以及保存的功能按钮。

扩展属性

  • 自动加载数据:仅当模型为对象模型时有效,启用后,预览或加载页面时,将自动加载数据,不需要通过事件触发。
  • 渲染可视区域:表格数据量大时,开启可提升渲染性能。
  • 可编辑:启用后,表格中每行的内容知否能进行编辑操作,不启用则内容为只读。
  • 单选:启用后,显示单选按钮。
  • 多选:启用后,显示多选按钮。
  • 行号:启用后,表格首列显示当前行号。分页时行号重新从1依次开始,不累加。
  • 累加行号:和“行号”只能启用其中一个,启用后,表格首列显示当前行号,分页时行号累加上前一页依次显示。
  • 加载中状态:是否显示表格加载中状态
  • 空数据提示:数据为空时显示的提示内容。
  • 筛选为空提示:筛选数据为空时显示的提示内容,仅当列筛选时生效。
  • 树形数据:当表格中的数据有父子关系,可开启树形数据,并指定关联字段后,可展示出树形结构。
  • 默认展开:开启树形数据时,子数据是否默认展开。
  • 可选择:开启树形数据时,是否启用父子关联选择。
  • 单行选择:开启树形数据时,是否单行可选择,父子不关联选择。
  • 图标显示字段:开启树形数据时,图标所在位置显示的字段。不配置,就是第一列的字段。
  • 父节点字段:开启树形数据时,关联的父节点字段。
  • 子节点字段:开启树形数据时,关联的子节点字段。
  • 根节点字段值:开启树形数据时,根节点的字段值。不配置默认为空。
  • 子节点缩进:子节点缩进,单位px。
  • 行拖拽:开启树形数据时,是否启用行拖拽,拖拽行可改变数据的父子结构。

表格宽高

设置表格的宽度和高度。

分页具体使用及说明,请参考分页

树形数据功能介绍

当表格中的数据有父子关系,可在表格属性中开启“树形数据”开关,并指定关联字段后,可展示出树形结构。

例如:系统中存在如图9所示的数据,数据之间存在父子关系,效果需要展示成“树形数据”,如图10所示,明确层级关系。您需做如下操作。

图9 数据源
图10 树形数据
  1. 首先查看数据对应的对象,查看数据列的字段名。若需要构造如图9所示的数据,在新建对象,新增如下图所示自定义字段后,打开布局页签,选中“对象名Records”数据记录页,新增图9所示的数据。

  2. 在标准页面中选中表格组件,新增模型,设置为对象模型,选中上一步的对象。设置表格数据源。
    图11 设置数据绑定
    图12 新增模型
    图13 设置对象模型
    图14 设置关联字段
    图15 选中模型
  3. 在标准页面中选中表格组件,开启“树形数据”开关,参考表1设置如下参数。

  4. 预览该页面,可查看到如图10所示层级关系。

表格组件需要以树形展示有个前提条件:表格绑定的模型中存在取值上有父子关系的两个字段,再举例如下:

图16 举例

上述模型中,“主管”字段的值来源于“名称”,这两个字段就可以认为是父(主管)子(名称)关系,而“部门”字段仅在逻辑上和“名称”是父子关系,取值上并不是,这一点极易混淆。基于上述前提,就可以在表格的属性面板中绑定上述模型,开启“树形数据”开关,然后配置“主管”为父字段,“名称”为子字段。

图17 配置父子节点字段

设置后,效果如下图所示。

分享:

    相关文档

    相关产品

关闭导读