S2

注意

阅读本章前，请确保已经阅读过基础排序，组内排序，Tooltip 注意事项等章节。

S2 提供默认的基础排序操作和 React 版本的高级排序组件。

但在某些业务场景下，我们仍需要自定义排序，我们将它分为自定义排序 icon，自定义排序 tooltip，自定义排序操作三个部分。

自定义排序 icon

配置

关闭表头默认排序操作 icon.

const s2Options = {
  showDefaultHeaderActionIcon: false,
  ...
}

配置自定义 icon

const s2Options = {
  customSVGIcons: [
    {
      name: 'customKingIcon',
      src: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg',
    },
  ],
  ...
}

配置 icon 展示位置

const s2Options = {
  headerActionIcons: [
    {
      // 选择 icon, 可以是 S2 自带的，也可以是自定义的 icon
      icons: ['customKingIcon'],
      // 通过 belongsCell + displayCondition 设置 icon 的展示位置
      belongsCell: 'colCell',
      displayCondition: (meta) => meta.level === 2,
      defaultHide: false,
      ...
    }],
  ...
}

效果展示

相关章节：headerActionIcons 配置说明

配置

排序菜单会在 Tooltip 中展示，确认 tooltip 为打开状态。

const s2Options = {
  tooltip: {
    enable: true,
  },
  ...
}

指定排序菜单 UI

注意

如果使用的是 @antv/s2, 需要自行实现排序菜单的 UI, 否则 tooltip 不会展示。查看示例和 Tooltip 注意事项
如果使用的是 @antv/s2-react, 可以结合任意组件库使用。查看示例

import { Menu } from 'antd'

const s2Options = {
  tooltip: {
    enable: true,
    operation: {
      menu: {
        render: (props) => {
          return <Menu {...props} />;
        },
      }
    }
  },
}

自定义 icon 点击后的 tooltip 展示

const items = [
  { key: 'NONE', label: '不排序' },
  { key: 'ASC', label: '升序', icon: 'GroupAsc' },
  { key: 'DESC', label: '降序', icon: 'GroupDesc' },
  { key: 'CUSTOM', label: '自定义排序', icon: 'Trend' },
];

const s2Options = {
  // 设置自定义 `icon` 的展示条件
  headerActionIcons: [
    {
      // 选择 icon, 可以是 S2 自带的，也可以是自定义的 icon, https://s2.antv.antgroup.com/manual/advanced/custom/custom-icon
      icons: ['customKingIcon'],
      // 通过 belongsCell + displayCondition 设置 icon 的展示位置
      belongsCell: 'colCell',
      // 展示条件
      displayCondition: (meta) => meta.level === 2,
      // 默认是否隐藏，hover 后再展示
      defaultHide: false,
      // icon 点击之后的执行函数
      onClick: (options) => {
        const { meta, event } = props;
        // https://s2.antv.antgroup.com/manual/basic/tooltip
        const operator = {
          // 配置 tooltip 中的操作项
          menu: {
            items,
          }
        };
        // 自定义 tooltip 配置，展示 toolTip
        meta.spreadsheet.showTooltipWithInfo(event, [], {
          operator,
          onlyShowCellText: true,
          onlyShowOperator: true,
        });
      },
      onHover: (options) => {}
    },
  ],
  ...
}

预览

自定义排序操作

配置

// 执行自定义排序回调
const handleSortCallback = (meta, key) => {
  if (key === 'CUSTOM') {
    const sortParams = [
      { sortFieldId: 'type', sortBy: [ '办公用品', '家具' ] },
      { sortFieldId: 'city', sortMethod: 'ASC' },
    ];
    console.log('可以在这里实现你手动排序的交互和逻辑哟', sortParams)
  } else {
    // 使用 S2 提供的组内排序方式
    meta.spreadsheet.groupSortByMethod(key, meta)
  }
}

const s2Options = {
  headerActionIcons: [
    {
      onClick: (props) => {
        const { meta, event } = props
        const operator = {
          menu: {
            onClick: ({ key }) => {
              // 执行自定义排序回调
              handleSortCallback(meta, key)
              meta.spreadsheet.hideTooltip()
            },
            items
          },
        }

        meta.spreadsheet.showTooltipWithInfo(event, [], {
          operator,
          onlyShowCellText: true,
          onlyShowOperator: true,
        });
      },
      ...
    }
  ],
  ...
}

预览

在 `@antv/s2` 中使用

在 `@antv/s2-react` 中使用

注意

阅读本章前，请确保已经阅读过基础排序，组内排序，Tooltip 注意事项等章节。

S2 提供默认的基础排序操作和 React 版本的高级排序组件。

但在某些业务场景下，我们仍需要自定义排序，我们将它分为自定义排序 icon，自定义排序 tooltip，自定义排序操作三个部分。

自定义排序 icon

配置

关闭表头默认排序操作 icon.

const s2Options = {
  showDefaultHeaderActionIcon: false,
  ...
}

配置自定义 icon

const s2Options = {
  customSVGIcons: [
    {
      name: 'customKingIcon',
      src: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg',
    },
  ],
  ...
}

配置 icon 展示位置

const s2Options = {
  headerActionIcons: [
    {
      // 选择 icon, 可以是 S2 自带的，也可以是自定义的 icon
      icons: ['customKingIcon'],
      // 通过 belongsCell + displayCondition 设置 icon 的展示位置
      belongsCell: 'colCell',
      displayCondition: (meta) => meta.level === 2,
      defaultHide: false,
      ...
    }],
  ...
}

效果展示

相关章节：headerActionIcons 配置说明

配置

排序菜单会在 Tooltip 中展示，确认 tooltip 为打开状态。

const s2Options = {
  tooltip: {
    enable: true,
  },
  ...
}

指定排序菜单 UI

注意

如果使用的是 @antv/s2, 需要自行实现排序菜单的 UI, 否则 tooltip 不会展示。查看示例和 Tooltip 注意事项
如果使用的是 @antv/s2-react, 可以结合任意组件库使用。查看示例

import { Menu } from 'antd'

const s2Options = {
  tooltip: {
    enable: true,
    operation: {
      menu: {
        render: (props) => {
          return <Menu {...props} />;
        },
      }
    }
  },
}

自定义 icon 点击后的 tooltip 展示

const items = [
  { key: 'NONE', label: '不排序' },
  { key: 'ASC', label: '升序', icon: 'GroupAsc' },
  { key: 'DESC', label: '降序', icon: 'GroupDesc' },
  { key: 'CUSTOM', label: '自定义排序', icon: 'Trend' },
];

const s2Options = {
  // 设置自定义 `icon` 的展示条件
  headerActionIcons: [
    {
      // 选择 icon, 可以是 S2 自带的，也可以是自定义的 icon, https://s2.antv.antgroup.com/manual/advanced/custom/custom-icon
      icons: ['customKingIcon'],
      // 通过 belongsCell + displayCondition 设置 icon 的展示位置
      belongsCell: 'colCell',
      // 展示条件
      displayCondition: (meta) => meta.level === 2,
      // 默认是否隐藏，hover 后再展示
      defaultHide: false,
      // icon 点击之后的执行函数
      onClick: (options) => {
        const { meta, event } = props;
        // https://s2.antv.antgroup.com/manual/basic/tooltip
        const operator = {
          // 配置 tooltip 中的操作项
          menu: {
            items,
          }
        };
        // 自定义 tooltip 配置，展示 toolTip
        meta.spreadsheet.showTooltipWithInfo(event, [], {
          operator,
          onlyShowCellText: true,
          onlyShowOperator: true,
        });
      },
      onHover: (options) => {}
    },
  ],
  ...
}

预览

自定义排序操作

配置

// 执行自定义排序回调
const handleSortCallback = (meta, key) => {
  if (key === 'CUSTOM') {
    const sortParams = [
      { sortFieldId: 'type', sortBy: [ '办公用品', '家具' ] },
      { sortFieldId: 'city', sortMethod: 'ASC' },
    ];
    console.log('可以在这里实现你手动排序的交互和逻辑哟', sortParams)
  } else {
    // 使用 S2 提供的组内排序方式
    meta.spreadsheet.groupSortByMethod(key, meta)
  }
}

const s2Options = {
  headerActionIcons: [
    {
      onClick: (props) => {
        const { meta, event } = props
        const operator = {
          menu: {
            onClick: ({ key }) => {
              // 执行自定义排序回调
              handleSortCallback(meta, key)
              meta.spreadsheet.hideTooltip()
            },
            items
          },
        }

        meta.spreadsheet.showTooltipWithInfo(event, [], {
          operator,
          onlyShowCellText: true,
          onlyShowOperator: true,
        });
      },
      ...
    }
  ],
  ...
}

S2

自定义排序操作

S2

自定义排序操作

注意

自定义排序 icon

配置

效果展示

自定义 Tooltip

配置

注意

预览

自定义排序操作

配置

预览

在 `@antv/s2` 中使用

在 `@antv/s2-react` 中使用

注意

自定义排序 icon

配置

效果展示

自定义 Tooltip

配置

注意

预览

自定义排序操作

配置

预览

在 `@antv/s2` 中使用

在 `@antv/s2-react` 中使用

自定义排序操作

自定义排序操作

注意

自定义排序 icon

配置

效果展示

自定义 Tooltip

配置

注意

预览

自定义排序操作

配置

预览

在 @antv/s2 中使用

在 @antv/s2-react 中使用

注意

自定义排序 icon

配置

效果展示

自定义 Tooltip

配置

注意

预览

自定义排序操作

配置

预览

在 @antv/s2 中使用

在 @antv/s2-react 中使用

在 `@antv/s2` 中使用

在 `@antv/s2-react` 中使用

在 `@antv/s2` 中使用

在 `@antv/s2-react` 中使用