@g3-cscec/table v0.0.2

g3-table

Table表格组件

G3Table

基础表格，基于Antd的Table的封装，扩展了以下能力

• props.rowKey只支持string类型，默认为id
• 可动态改变列的宽度，props.resizable作为全局控制，默认为true，props.columns[x].resizable可单独控制某一列是否可以改变宽度
• 可动态控制列的显示/隐藏和排序，并缓存在浏览器中，用户刷新不会变化
  • 在最后一列渲染一个齿轮icon，点击icon出现列的勾选，利用拖拽实现列的排序
  • 缓存列的数据到浏览器，缓存的key为组件的widgetKey，即只有通过页面设计器拖拽的组件才有缓存功能
• 表格文本是否换行显示，props.rowBreak作为全局控制，默认为false, props.columns[x].rowBreak可单独控制某一列是否可换行显示
• 是否显示序号列，props.showRowNum，默认为true
• 是否显示可选择列，props.multiSelect，默认为false
  • 可获取选中的列的数据
• 列标题文本的tooltip提示，props.columns[x].titleTip，默认为空
• 列标题文本的对齐方式，props.columns[x].headAlign，默认对齐方式与props.columns[x].align相同
• 显示合计行，props.columns[x].enableTotal，默认为false，仅在props.columns[x].fieldType为number时生效，且暂时只支持求和
• 操作栏，props.rowActions，默认为[]
  • 支持配置为浮动操作栏和fixed固定列的操作栏
  • 支持根据行数据控制显示/隐藏/禁用等状态
  • 支持超过多少个就以下拉菜单的方式显示，props.maxRowActionCount，默认为3
  • 支持自定义回调事件
• 支持列的自定义渲染逻辑
  • 场景1，行数据中gender字段取值0和1，分别渲染为男和女
  • 场景2，行数据中money字段大于5000显示为红色，小于1000时显示为黄色，1000-5000之间时显示为绿色
  • 场景3，该列为超链接，根据行数据配置超链接地址和打开方式，默认当前窗口打开
• 支持列的排序、在本地进行
  • 本地仅支持number类型的排序
  • 支持配置列的排序方式，升序、降序、不排序
• 支持列的筛选，在本地进行
  • 支持配置筛选条件，通过文本包含关系判断是否符合筛选条件
• 支持分页可配置，在本地分页
• 支持列的可复制，点击icon即可复制文本
• 支持配置表头合并
• 支持配置表格的展现形式，传统表格？卡片表格？

Props

继承自Antd Table的表格，大部分Antd Table的props都适用，少量不适用的属性计划将来说明一下

{
  /**
   * 物料key，由设计器提供，供解析器消费
   */
  widgetKey?: string;
  /**
   * 是否可编辑表格
   * @default false
   */
  editable?: boolean;
  /**
   * 是否启用排序, 可编辑表格会用到，但是放到了基础表格里，未来可能调整
   * @default false
   */
  enableRowSort?: boolean;
  /**
   * antd table rowKey
   */
  rowKey?: string;
  /**
   * 是否多选模式
   * @default true
   */
  multiSelect?: boolean;
  /**
   * 是否显示行序号
   * @default true
   */
  showRowNum?: boolean;
  /**
   * 是否启用列宽拖拽
   * @default true
   */
  resizableTitle?: boolean;
  /**
   * 是否折行显示(只控制内容区,表头固定不允许折行)
   * @default false
   */
  rowBreak?: boolean;
  /**
   * 是否启用行编辑，控制列的显隐、排序
   * @default true
   */
  enableColEdit?: true;
  /**
   * 最小列宽
   * @default 100
   */
  minColWidth?: number;
  /**
   * 行操作按钮
   * @default []
   */
  rowActions?: RowAction<RecordType>[];
  /**
   * 行操作最多显示个数，超过则以下拉菜单展示
   * @default 3
   */
  maxRowActionCount?: number; // 行操作最多按钮数
  /**
   * 行操作按钮的显示方式，fixed以固定列的形式显示，float以浮动的形式显示
   * @default fixed
   */
  rowActionPosition?: 'fixed' | 'float';
  /**
   * 列数据
   */
  columns?: G3ColumnProps<RecordType>[];
  /**
   * 数据源
   */
  dataSource?: readonly RecordType[];
  /**
   * 搜索框
   */
  searchForm?: SearchFormConf;
}

G3EditTable

可编辑表格，基于G3BaseTable实现，扩展了以下能力

• [] 可编辑行，通过Form组件实现，可自定义数据校验规则以及校验提示信息
  • 逐行编辑
  • 逐行编辑时，错误提示已tooltip的形式显示，不撑开表格高度
  • 错误提示支持异步校验
  • 弹出层编辑 - Modal弹窗
  • 弹出层编辑 - Drawer抽屉
  • 行内展开编辑，可延后
• 动态新增行，可选择新增至最上面、新增至最下面、或者新增至任意两行之间
• 增加行状态，old未变化, add新增行，edit编辑行，del删除行
• 动态删除行，要根据当前行状态来判断是直接删除还是修改行状态
• 增加行的排序，行的序号rowNum要提交给后端，所以不能是基础表格中的index+1

Props

继承自G3BaseTable的属性，并新增了以下属性：

{
  /**
   * 表格是否可编辑
   * @default true
   */
  editable?: boolean;
  /**
   * 是否展示基本的操作按钮，指的是删除、向上新增一行、向下新增一行
   * @default true
   */
  showBaseActions?: boolean;
  /**
   * 表格行是否可排序
   * @default false
   */
  enableRowSort?: boolean;
}

API

{
  /**
   * 获取tableId
   */
  getTableId: () => string | undefined;
  /**
   * 新增行
   * @property props.pos 新增行的位置
   * @property props.rowData 新增行的数据
   * @property props.callback 回调函数
   */
  addRow: (props: AddRowProps<RecordType>) => void;

  /**
   * 删除行, 提供根据 rowKey 和 rowIndex 两种删除方式
   * @property props.rowKey 删除行的rowKey字段
   * @property props.rowIndex 删除行的索引
   * @property props.callback 回调函数
   */
  delRow: (props: DelRowProps) => void;
  /**
   * 获取表格数据
   * @property options.rowState 行状态 old | add | del | edit, 不传则获取全部
   *
   */
  getTableData: (options?: { rowState: RowState }) => RecordType[];
}

G3DataTable(暂未导出)

数据表格，大多数情况下所使用的表格，基于基础表格的封装，扩展了以下能力

• 可配置是否显示SearchBar查询表单，props.showSearch，false表示不显示
• 可配置查询表单的文字等信息，props.searchConfig字段配置，可像ProTable一样把showSearch和searchConfig字段合并
• 可配置查询表单显示的字段，props.columns[x].search，false表示不显示在查询表单中
• 可配置查询表单请求的url、header、params、请求方式等，props.request
  • 支持手动触发查询
  • 支持数据变化后自动查询
  • 提供success请求成功，failed请求失败，complete请求完成（成功失败都执行）的回调函数
• 分页可配置，分页变化重新查询
• 筛选、排序、分页等变化都通过接口获取数据