明细表格

明细表格实现了数据表格的可视化设计，主要用于大数据量的展示场景。

基础用法

展示多条结构类似的数据， 可对数据进行排序、筛选、对比、导入导出或其他自定义操作。

属性设置

关联数据表

设置关联数据表，点击“关联表”下拉框，选择对应数据表。

添加列

添加列，点击添加列，增加列数，每列后边有修改和删除按钮。

嵌套明细

在一级明细所属明细表格添加一列，然后将二级明细所属明细表格拖入即可

• 子明细折叠 明细表默认折叠只适用于二级明细，对一级明细不生效

  

关联数据源

若明细表中的数据需要从已有数据源中直接带出时，可对明细表的数据源部分进行配置。 点击“数据源”按钮，选择对应的数据源类型。

选择系统数据源，数据对象对象类型可选表视图或者存储过程

若选择的是表视图，可以配置要查询字段、筛选条件和排序规则等

选用ajax数据源，需要配置数据接口

映射关系

配置数据映射关系，点击数据映射进行配置即可。

选中映射支指定表，可使用自动映射功能，系统将匹配数据源与明细表中名称相同的字段，自动进行映射

表格配置

• 工具栏

​

​ 点击设置，可以更细粒度的控制功能开关 ​

​ 可以根据需求自定义导入导出的字段 ​

​

​

• 分页

  若明细行过多时，可以开启分页配置，同时支持设置默认的每页条数

  

• 其他开关 其他根据需要选择开关即可

性能优化

• 编辑模式

  • 直接编辑 预览后所有明细行都是可编辑状态
  • 点击一行编辑 需要先点击选中一条明细行，该明细行会调整为可编辑状态
  • 双击一行编辑 需要先双击选中一条明细行，该明细行会调整为可编辑状态
  • 点击单元格编辑 需要先单击选中一个单元格，该单元格会调整为可编辑状态
  • 双击单元格编辑 需要先双击选中一个单元格，该单元格会调整为可编辑状态

• 最大、最小高度

  • 当数据量过大，明细行行数过多时，若没有设置最大高度，页面会一致延伸，当配置了最大高度时，会在明细表格自身区域内生成滚动条，不会影响其他组件使用。

• 横、纵向优化

  • 当表格列较多时，可以开启横向优化和纵向优化，但要配合固定行高一起使用

    

筛选

适用于流程审批时，不同审批人看到不同的明细数据，以下是代码示例

return function (rows) {
  rows = rows || [];
  //获取当前登录人账号
  let userCode = ZeroCloud.util.ZcAuthHelper.getUserName();
  //获取businessKey
  let businessKey = this.zcForm.formData.erp.test_master[0].business_key;
  //获取发起人信息
  let requestUser = this.zcForm.formData.erp.test_master[0].request_user_code;
  //判断是否发起流程阶段或是否是发起人打开的表单
  if (!businessKey || requestUser == userCode) {
    return rows;
  }
  //根据明细数据中的user_code来进行筛选
  return rows.filter(row => row.user_code == userCode);
}

关联明细行转列

明细行转列就是如下图所示，将嵌套的二级明细内容，转换成一级明细的列并进行录入和展示

开启关联明细行转列配置，选择关联子表，并配置列字段和值字段。注意：使用换转列配置时，列字段需要有初始值，否则无法正常使用

树形表格

开启树形表格后，明细表格可以树型结构展示数据，展开/收起子节点

启用树形表格，配置标识字段和父标识字段

表尾

开启表尾后，可以在明细表格最后添加字段的统计信息，比如合计值等

启用表尾后，有两种统计类型，分别是字段和自定义

字段类型，就是勾选要统计的字段即可

自定义类型，就是通过代码的形式，自定义显示内容，示例代码如下：

//参数中的rows表示明细数据
return function (rows) {
    let subTotal = 0;
    //遍历明细行，计算合计值
    rows.forEach(r => {
        subTotal += r.sub_total;
    });
    //返回一维数组作为表尾数据，格式：[{ '字段名': '表尾值' }]
    return [{ quantity: "合计", sub_total: "￥" + subTotal }]
}