diff --git a/s2-site/examples/analysis/sort/demo/table-sort.tsx b/s2-site/examples/analysis/sort/demo/table-sort.tsx index 7313e461d7..44404870ca 100644 --- a/s2-site/examples/analysis/sort/demo/table-sort.tsx +++ b/s2-site/examples/analysis/sort/demo/table-sort.tsx @@ -110,7 +110,7 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') sortFieldId: 'price', sortMethod: 'DESC', query: { - city: '浙江', + province: '浙江', }, }, ], diff --git a/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts b/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts index 82b5baa7e1..3708b6a024 100644 --- a/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts +++ b/s2-site/examples/interaction/advanced/demo/pivot-hide-columns.ts @@ -1,5 +1,33 @@ import { PivotSheet, S2Event } from '@antv/s2'; +function hideSelectedColumns(s2) { + // 兼容多选 + const selectedColumnNodes = s2.interaction + .getActiveCells() + .map((cell) => cell.getMeta()); + + const selectedColumnFields = selectedColumnNodes.map((node) => node.id); + s2.interaction.hideColumns(selectedColumnFields, true); +} + +function getTooltipContent(cell, options) { + const { spreadsheet, isLeaf } = cell.getMeta(); + + if (!isLeaf || !spreadsheet.options.tooltip.operation.hiddenColumns) { + return null; + } + + const button = document.createElement('button'); + button.type = 'button'; + button.innerHTML = '隐藏'; + button.className = 'ant-btn'; + button.addEventListener('click', () => { + hideSelectedColumns(spreadsheet); + }); + + return button; +} + fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', ) @@ -21,6 +49,7 @@ fetch( // 开启手动隐藏, 叶子节点有效 hiddenColumns: true, }, + content: getTooltipContent, }, }; const s2 = new PivotSheet(container, dataCfg, s2Options); diff --git a/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts b/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts index 08f3ad06c3..8e65be2b8a 100644 --- a/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts +++ b/s2-site/examples/interaction/advanced/demo/table-hide-columns.ts @@ -1,8 +1,34 @@ import { TableSheet, S2Event } from '@antv/s2'; -fetch( - 'https://assets.antv.antgroup.com/s2/basic-table-mode.json', -) +function hideSelectedColumns(s2) { + // 兼容多选 + const selectedColumnNodes = s2.interaction + .getActiveCells() + .map((cell) => cell.getMeta()); + + const selectedColumnFields = selectedColumnNodes.map((node) => node.field); + s2.interaction.hideColumns(selectedColumnFields, true); +} + +function getTooltipContent(cell, options) { + const { spreadsheet, isLeaf } = cell.getMeta(); + + if (!isLeaf || !spreadsheet.options.tooltip.operation.hiddenColumns) { + return null; + } + + const button = document.createElement('button'); + button.type = 'button'; + button.innerHTML = '隐藏'; + button.className = 'ant-btn'; + button.addEventListener('click', () => { + hideSelectedColumns(spreadsheet); + }); + + return button; +} + +fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') .then((res) => res.json()) .then((data) => { const container = document.getElementById('container'); @@ -48,13 +74,16 @@ fetch( // 开启手动隐藏 hiddenColumns: true, }, + content: getTooltipContent, }, }; + const s2 = new TableSheet(container, s2DataConfig, s2Options); s2.on(S2Event.LAYOUT_COLS_EXPANDED, (cell) => { console.log('列头展开', cell); }); + s2.on( S2Event.LAYOUT_COLS_HIDDEN, (currentHiddenColumnsInfo, hiddenColumnsDetail) => { diff --git a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx index 6811f5283d..5f339685b6 100644 --- a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx +++ b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx @@ -8,11 +8,14 @@ const switcherFields = { allowEmpty: false, }, columns: { - items: [{ id: 'type' }], + items: [{ id: 'type', displayName: '类型 (type)' }], }, values: { selectable: true, - items: [{ id: 'price' }, { id: 'cost' }], + items: [ + { id: 'price', checked: true }, + { id: 'cost', checked: false }, + ], }, }; diff --git a/s2-site/examples/react-component/switcher/demo/table.tsx b/s2-site/examples/react-component/switcher/demo/table.tsx index a1e8e1f729..d9c0bc74f0 100644 --- a/s2-site/examples/react-component/switcher/demo/table.tsx +++ b/s2-site/examples/react-component/switcher/demo/table.tsx @@ -23,11 +23,11 @@ fetch( columns: { selectable: true, items: [ - { id: 'province' }, - { id: 'city' }, - { id: 'type' }, - { id: 'sub_type' }, - { id: 'number' }, + { id: 'province', displayName: '省份 (province)' }, + { id: 'city', displayName: '城市 (city)' }, + { id: 'type', displayName: '类别 (type)' }, + { id: 'sub_type', displayName: '子类别 (sub_type)' }, + { id: 'number', displayName: '数量 (number)' }, ], }, };