设置AstroZero标准页面表格组件属性

数据绑定

表格列

• 合并：在已添加列中，选择了某几列，再单击“合并”，即可合并为一个大列，选中的列将作为大列的子列显示。
• 分解：在已添加列中，选中某个包含多个子列的大列，再单击“分解”，即可分解此大列。
• 添加字段：表格的列，当表格组件绑定了数据模型后，可选择绑定的模型中的字段成为表格的列，以及表格的查询条件。
• 添加操作列：表格的列，在表格中添加可操作列，即在操作列中通过添加图标，并为图标添加onclick事件代码，实现某些功能，如删除、编辑等。
• 添加空白列：表格的列，可添加表格空白列。

表格区块

• 工具栏用于扩展表格能力，为表格添加工具栏，提供增删改查以及保存的功能按钮。
  图4 添加工具栏
  

• 表格组件绑定数据后，可基于表格中的字段，添加数据表格查询栏。
  图5 添加查询条件
  
  图6 设置后效果
  

扩展属性

• 自动加载数据：仅当模型为对象模型时有效，启用后，预览或加载页面时，将自动加载数据，不需要通过事件触发。
• 可编辑：启用后，表格中每行的内容是否能进行编辑操作，不启用则内容为只读。
• 单选：启用后，显示单选按钮。
• 多选：启用后，显示多选按钮。
• 行号：启用后，表格首列显示当前行号。分页时行号重新从1依次开始，不累加。
• 累加行号：和“行号”只能启用其中一个，启用后，表格首列显示当前行号，分页时行号累加上前一页依次显示。
• 最小列宽：设置最小列宽值。
• 加载中状态：是否显示表格加载中状态。
• 空数据提示：数据为空时，显示的提示内容。
• 筛选为空提示：筛选数据为空时，显示的提示内容，仅当列筛选时生效。
• 树形数据：当表格中的数据有父子关系，可开启树形数据，并指定关联字段后，可展示出树形结构。
  • 默认展开：开启树形数据时，子数据是否默认展开。
  • 可选择：开启树形数据时，是否启用父子关联选择。
  • 图标显示字段：开启树形数据时，图标所在位置显示的字段。不配置，就是第一列的字段。
  • 父节点字段：开启树形数据时，关联的父节点字段。
  • 子节点字段：开启树形数据时，关联的子节点字段。
  • 根节点字段值：开启树形数据时，根节点的字段值。不配置默认为空。
  • 子节点缩进：子节点缩进，单位px。
  • 行拖拽：开启树形数据时，是否启用行拖拽，拖拽行可改变数据的父子结构。
• 风格
  • 尺寸：设置表格的尺寸。
  • 显示表头：启用后，表格显示标题行。
  • 斑马纹：启用后，表格会间隔显示不同颜色，用于区分不同行数据。
  • 纵向边框 ： 启用后，显示一个纵向的选择框。
  • 高度跟随内容：表格行高度是否跟随内容多少变化。
  • AUI风格：是否开启AUI风格。
  • 表头样式类：表头固定的class类名。
  • 数据行样式类：表数据行class类名的回调方法，支持自定义各行数据不同的class类名。
  • 合并行或列：合并行或列的计算方法，支持自定义设置行或列，单元格合并规则。
    图7 合并行或列
    

公共

• 控件名称：当前组件的名称。
• 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。

样式

针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。

• 表格宽高：设置表格的宽度和高度。
• 布局：对页面CSS属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写CSS代码进行更深度的个性化布局定制。
  • 单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。
  • “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。
  • 当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。
  • 盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。
    图8 样式属性配置面板
    
• 字体：设置字体大小、字体样式、颜色等。
• 背景：设置背景颜色、透明度。
• 阴影：设置阴影颜色、模糊、扩散等，支持“px”、“em”和“%”三种单位。
• 高级设置：在高级设置中，直接编写CSS代码作用于当前元素。
  • 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。
  • 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。
  • 样式透传：启用后，可以将设置好的样式透传给组件的子节点。

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

设置组件绑定的数据模型，有自定义对象、对象、服务和事件四种，本章节以绑定模型为例进行介绍。

1. 在表格的“属性 > 数据绑定”中，单击，进入选择模型页面。
2. 在选择模型页面，单击“新增模型”。
3. 设置表格的元数据模型，模型名称设置“equipmentInstance”，来源选择“对象”，单击“下一步”。
   图9 创建对象数据模型
   

4. 在选择对象页面，选择一个提前创建好的对象，例如“命名空间__Equipment__CST”，“选择字段”中选择表单中需要展示的字段，单击“下一步”，单击“确定”。
5. 返回选择模型页面，勾选创建好的元数据模型，单击“确定”。

   绑定对象模型后，显示如下图所示。如果需要在每行添加行序号，可在表格的“扩展属性”中打开“行号”。

   图10 绑定数据模型后的结果列
   

6. 选中上图中“已添加列”中的任意一项，单击，调整列的显示顺序。
7. 单击上图中每个字段后的，修改列标题、是否隐藏、是否可编辑等字段属性。

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

   图11 设置“设备编码”列的属性
   

8. 为表格增加操作列。
   1. 在左侧“设计视图”中选中“表格”，单击右侧“属性 > 表格列”中的。
      图12 单击表格列后的+
      
   2. 单击新建表格列，即Operation1后的。
      图13 新建列
      
   3. 在“属性配置”页面，修改“列标题”为“操作”。
   4. 在“操作按钮”中，单击“添加操作按钮”，设置“编辑”按钮的样式。
      图14 为操作列增加修改图标
      
   5. 在上图中单击事件图标，单击“动作列表”后的“+”号，在弹出的事件编排器右侧代码编辑区，添加如下事件代码，单击“创建”。

      //获取当前组件（即table）
      let _component = context.$component.current;
      //获取当前行row，取对象的id属性
      let rowId = _component.$attrs.row.id;
      //带着id跳转到设备详情页面
      context.$page.load('/besBaas/page#/命名空间__editEquipment?id='+rowId);

   6. 返回标准页面开发界面，单击页面上方的，保存页面。
   7. 按照上述操作，再次单击“添加操作按钮”，添加“删除”按钮。

      参照图14，设置按钮的“类型”为“主要按钮” 、“图标”为“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. 返回标准页面开发界面，单击页面上方的，保存页面。

9. 设置工具栏区域。
   1. 在左侧“设计视图”中，选中“表格”，单击右侧“属性 > 表格区块 > 工具栏”后的“添加”。
   2. 删除上图工具栏中多余的按钮，只保留“新增行”、“保存”和“删除”按钮。
   3. 单击页面上方的，保存页面。

树形数据功能介绍

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

例如，低代码平台中存在如图15所示的数据，数据之间存在父子关系，效果需要展示成“树形数据”，如图16所示，明确层级关系。

图15 数据源

图16 树形数据

引申说明

表格组件能够以树形展示有个前提条件，即表格绑定的模型中存在取值上有父子关系的两个字段。

图25 示例

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

图26 配置父子节点字段

图27 设置后效果