docs: 更新隐藏列头相关 demo

antvis · Jan 22, 2024 · 9733ac0 · 9733ac0
1 parent aa1da2e
commit 9733ac0
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)' },
         ],
       },
     };