跳转到内容
Trantor 文档

Table 数据容器

表格 Table

以列表形式展示模型数据，支持行操作

API

通用属性见： 容器通用属性

ITableProps

参数类型说明默认值
presetSelectedDataRecord<string, unknown>[] | ((record: Record<string, unknown>, index: number) => boolean)可预设默认勾选项-
getId(record: IDictionary) => string可自定义唯一标识id，如果返回的列表数据最外层没有 id，则必须指定此属性(record) => record.id
filter’default’ | ‘singleGroup’ | ‘multiGroup’筛选器模式，singleGroup为单组逻辑模式，multiGroup为多组逻辑模式’default’
actionColumnWidthnumber自定义操作列宽度-
paginationboolean是否开启分页-
presetConfigNamestring自定义默认筛选方案名称-
filterGroupCountRecord<string, boolean>[] | {[key: string]: boolean} | ((data?: IDictionary) => {[key: string]: boolean} | Record<string, boolean>[])指定进行分组后，按需筛选显示分组类型及其统计数值。指定后默认不展示“全部”分组。可配置{GROUP_COUNT_ALL: true} 为显示“全部”-
groupCountFieldstring使用指定字段进行分组展示，目前只支持枚举类型-
groupCountFlowstring表头分组Flow数据源，只有指定了groupCountField才生效-
groupCountFuncstring表头分组Func数据源，只有指定了groupCountField才生效-
groupCountControllerstring表头分组Controller数据源，只有指定了groupCountField才生效-
groupCountPostFlowstring指定了groupCountField后，ds请求返回数据的后处理flow-
groupCountPostFuncstring指定了groupCountField后，ds请求返回数据的后处理func-
advancedboolean高级表格类型（包含拖拽和表头工具栏）-
showImportboolean是否显示导入-
fuzzySearchableboolean是否显示模糊搜索-
onUpdatestring更新时触发的 Action, 可以指定一个 action key 或一个方法(参数为行数据)-
columnOrderboolean是否开启字段排序true
orderFieldstring默认排序的字段名-
order’desc’ | ‘asc’排序方式-
serialNumberboolean | ‘pageIncrease’ | ((record: any, index: number) => any)序号显示规则, true 为翻页从 1 开始计数, false 为不显示, pageIncrease 为翻页累计计数, 还可以为一个方法: @serialNumber=“(record) => record.sn”-
enableExportboolean是否支持导入-
maxCountnumber最大显示行数-
genSummaryData(data: IDictionary) => [{ label: string, value: string }]生成表格下面统计行数据的方法-
showViewManageboolean是否显示配置视图管理器，默认为true-
skipCountboolean是否跳过count总数（可加快请求响应速度）-
onRowClickstring选中行时触发的 Action, 可以指定一个 action key 或一个方法(参数为行数据)-
onRowSelectstring点击行前checkbox时触发的 Action, 可以指定一个 action key 或一个方法-
singleSelectionboolean该字段即将废弃，请使用selection替代。 selection?: ‘Radio’ | ‘Checkbox’ 既可开启Table Selection-
selectionbooleanTable Selection 类型-
selectByRowClickboolean是否开启点击行时选中该行（在配置了radio或checkbox的情况下）true
rowSelectDisabled(record: IDictionary) => boolean行选项禁用-
virtualboolean开启虚拟表格-
virtualRowCountnumber虚拟行统计-
allowTransientTableSortboolean是否允许虚字段排序-
sortableFieldsstring配置特定字段可排序-
showEditableIconboolean显示可编辑图标-
comboFieldstring用于行合并指定字段名-
comboRowActionboolean是否连同合并操作栏-
advancedFilterboolean是否开始高级筛选-
compRefany允许容器向外暴露在运行时的引用，用来执行一些衍生数据的操作-
pageSizeOptionsstring[]用户可切换的页码列表-
rowClassName(record: any, index: number) => string动态设置行类型-
defaultExpandAllRowsboolean默认展开所有行-
customDerivedDataboolean是否显示自定义导出true
borderedboolean是否开启边框-
allowCheckAllboolean是否开启表格勾选的”选择全部”-
batchExportboolean是否开启批量导出-
showFilterOnlyboolean只显示工具栏（筛选器），仅用于单独使用筛选器的场景-
selectSummaryFieldsstring配置选中后可展示的字段，多个字段用’,‘隔开-

table 作为 lookupFrom 关联的数据容器刷新需要调用父数据容器的 refresh

<Action label="删除" logicFlow="xxx" after="#{() => getContainerByKey('mainContainerKey').refresh()}"/>

行合并

⚠ 注意：使用行合并功能，必须按照列表当前合并字段先排序，否则合并出错。

新增参数说明类型默认值备注
comboField指定合并的字段（该字段一样，则列为一组展示，且合并字段不可编辑）string--
comboRowAction根据合并字段分组合并操作栏（需要联合 comboField 一起使用才生效）booleanfalse操作栏只保留当前组别第一顺位的操作按钮展示
combo需要合并的行booleanfalse-
<View title="设备管理" type="List" forModel="pos_EquipmentBO">
    <Table comboRowAction="true" comboField="siteName" model="pos_EquipmentBO" dataCondition="">
        <!-- 定义行操作 -->
        <RecordActions label="操作">
            // 该行操作栏会根据合并字段合并为一行，record默认为当前合并分组第一行的信息
            <Action label="修改配置" show="#{this.record.posActivateStatus != 'ACTIVATED'}" targetView="pos_EquipmentBO_equipmentEdit"/>
        </RecordActions>
        <Fields>
            <Field name="siteName" label="门店" combo="true"/>
            <Field name="posCode" label="设备编码" combo="true"/>
            <Field name="udid" label="UDID"/>
        </Fields>
    </Table>
</View>

table 数据容器可以额外的配置 Search 节点指定哪些字段可以用于搜索.

Search

参数说明类型默认值
onSearchValueChangeSearch 中搜索项值发生变化时的回调(changedValue, fieldName)=> void-

Fields

参数说明类型默认值
fullMatch用于 Search 中的字段,指定搜索的字段是否采用精确匹配booleanfalse
singleInSearch该参数仅用于 <Search>  内的 <Field>  上，配置字段类型为 Boolen/Enum/EnumMulti/ToOne/ToMany  的字段是否为单选； Int/Number/Float/Date/Time/DateTime 的字段是否为范围选择boolenfalse

可以通过onSearchValueChange联动搜索项的值

<View title="用户" version="2">
 <Table key="table" model="user2_User">
    <Search>
      <Fields onSearchValueChange="#{onSearchValueChange}">
        <Field name="address" />
        <Field name="username" />
      </Fields>
    </Search>
    <Fields>
      <Field name="age" singleInSearch="#{true}">
      <Field name="username" fullMatch="#{true}"/>
      <Field name="address"/>
    </Fields>
    <Actions>
      <Action openViewType="Dialog" label="批量" multi="#{true}" logicFlow="CUSTOM_User_ReName" />
  </Actions>
</Table>
</View>

Table 多选

可以通过在 Actions/Action 上配置 multi 属性支持 table 多选操作

<View title="用户" version="2">
  <Table key="table" model="user2_User">
    <Fields>
      <Field name="address" />
      <Field name="username" />
    </Fields>
    <Actions>
      <Action openViewType="Dialog" label="批量" multi="#{true}" logicFlow="CUSTOM_User_ReName" />
    </Actions>
  </Table>
</View>

Table 默认勾选

可以通过配置 presetSelectedData/updateSelectedData 设置 table 默认勾选

  • 静态默认勾选 presetSelectedData 赋值需要勾选的 rowData
<View title="用户" version="2">
  <Table key="table" model="user2_User" presetSelectedData="#{[{id: 1,address: 1, username: 2}]}">
    <Fields>
      <Field name="address" />
      <Field name="username" />
    </Fields>
    <Actions>
      <Action openViewType="Dialog" label="批量" multi="#{true}" logicFlow="CUSTOM_User_ReName" />
    </Actions>
  </Table>
</View>
  • 动态默认勾选
<View title="用户" version="2">
  <Table key="table" model="user2_User" >
    <Fields>
      <Field name="address" />
      <Field name="username" />
    </Fields>
    <Actions>
      <Action openViewType="Dialog" label="批量" multi="#{true}" logicFlow="CUSTOM_User_ReName" />
    </Actions>
  </Table>
</View>
import { Controller } from "nusi-sdk";


export default class extends Controller {
  pageDidLoad = async () => {
    const selectData = await getRemoteData();
    this.table.updateSelectedData(selectData);
  };
}

用法

基础表格

<View title="人员列表" version="2">
  <Table key="person" model="trantor_doc_Person">
    <Alert type="normal" message="这是一个提示信息" />
    <Fields>
      <Field name="name"/>
      <Field name="avatar"/>
      <Field name="age"/>
      <Field name="password"/>
      <Field name="credentials"/>
      <Field label="部门名称" name="department.name"/>
      <Field name="birthday"/>
      <GroupField title="嵌套字段">
        <Field name="name"/>
        <Field name="age"/>
      </GroupField>
    </Fields>
  </Table>
</View>

注意：当前例子为 0.17.x 版本

表格搜索

<View title="人员列表" version="2">
  <Table key="person" model="trantor_doc_Person" order="asc" orderField="age" >
    <Search onSearchValueChange="#{onSearchValueChange}">
      <Fields>
        <Field fullMatch="true" name="name"/>
        <Field singleInSearch="true" name="age"/>
        <Field name="credentials"/>
        <Field name="department"/>
      </Fields>
    </Search>
    <!-- 配置列表展示字段 -->
    <Fields>
      <Field name="name"/>
      <Field name="avatar"/>
      <Field name="age"/>
      <Field name="password"/>
      <Field name="credentials"/>
      <Field label="部门名称" name="department.name"/>
      <Field name="birthday"/>
    </Fields>
  </Table>
</View>

注意：当前例子为 0.17.x 版本

表格操作

<View title="人员列表" version="2">
  <Table key="person" model="trantor_doc_Person"  serialNumber="#{(record) => record.sn}"
    genSummaryData="#{handlerSummary}"
    onRowClick="#{handlerRowlick}" >
    <!-- 配置列表展示字段 -->
    <Fields>
      <!-- name可编辑 配合table的onUpdate方法使用 -->
      <Field name="name" editable/>
      <Field name="avatar"/>
      <Field name="age"/>
      <Field name="password"/>
      <Field name="credentials"/>
      <Field label="部门名称" name="department.name"/>
      <Field name="birthday"/>
    </Fields>
    <!-- 配置行数据行为 -->
    <RecordActions label="操作">
      <Action logicFlow="trantor_doc_Person_delete" after="Refresh" label="删除"/>
      <Action logicFlow="edit" after="Refresh" label="编辑"/>
      <Action logicFlow="detail" label="详情"/>
    </RecordActions>
  </Table>
</View>

注意：当前例子为 0.17.x 版本

groupCountField

<View title="公司" version="2">
   <Table model="trantor_doc_Company"
    groupCountField='type'
    groupCountFlow="crm_ItemGroupCountByStatusFlow"
    filterGroupCount="#{{Enum4: true, Enum2: false, Enum3: true}}"
    groupCountPostFlow='trantor_doc_Person_groupCount_postFlow'
    >
    <!-- 假设type是一个枚举值，['Enum1','Enum2','Enum3', 'Enum4] -->
    <!-- 表示只展示 Enum4, Enum2, Enum3分组, 并且 Enum2 不展示起分组数，unknown 不暂时分组数 -->
    <!-- 提供groupCountPostFlow、groupCountPostFunc 进行数据返回前自定义 -->
    <Search>
      <Fields>
        <Field name='name'></Field>
      </Fields>
    </Search>
    <Fields>
      <Field name="name"/>
      <Field name='type'/>
    </Fields>
  </Table>
</View>

注意：当前例子为 0.17.x 版本

单选和禁用可选项

<View title="公司" version="2">
  <Table model="trantor_doc_Company" singleSelection="#{true}" rowSelectDisabled="#{rowSelectDisabled}">
    <Search>
      <Fields>
        <Field name="name"></Field>
      </Fields>
    </Search>
    <Fields>
      <Field name="name"/>
      <Field name="type"/>
    </Fields>
    <Actions>
      <Action layout="Header" multi="#{true}" label="test" action="#{getContext}"/>
    </Actions>
  </Table>
</View>

注意：当前例子为 0.17.x 版本

高级筛选

开启高级筛选

trantor 017 版本支持了高级筛选器的特性，允许搜索条件带上运算符，来满足更丰富的后台查询场景。

目前仅支持表格的筛选可以开启

属性名描述类型默认值
advancedFilter是否开启带操作符的表格筛选器booleanfalse

示例：

<Table advancedFilter="#{true}">
</Table>

操作符控制

开启高级筛选后，trantor 会根据预置的逻辑给筛选器中的字段加上操作符，range 字段目前是没有预置操作符

目前支持的所有操作符：

操作符含义
EQ等于
NEQ不等于
GT大于
GTE大于等于
LT小于
LTE小于等于
IN包含
NOT_IN不包含
CONTAINS文字包含
START_WITH前缀匹配
END_WITH后缀匹配
单字段关闭操作符

示例：

<Table>
  <Search>
    <Field name="xxx" operator="#{false}" />
  </Search>
</Table>
单字段控制操作符

示例：

<Table>
  <Search>
    <Field name="xxx" operator="#{['EQ', 'NEQ']}" />
    <Field name="yyy" operator="#{'EQ'}" />
  </Search>
</Table>

列表场景及操作视屏入门教学

字段统计

请看这里