feat: 明细表的 getCellData 可获取单行数据 (#1482)

* chore: playground 添加链接跳转操作 * feat: 明细表的 getCellData 可获取单行数据 * test: 明细表的 getCellData 可获取单行数据
antvis · Jun 23, 2022 · c3e1662 · c3e1662
1 parent c23e105
commit c3e1662
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 2 deletions.
diff --git a/packages/s2-core/__tests__/unit/data-set/table-data-set-spec.ts b/packages/s2-core/__tests__/unit/data-set/table-data-set-spec.ts
@@ -103,6 +103,18 @@ describe('Table Mode Dataset Test', () => {
 
   describe('test for query data', () => {
     test('getCellData function', () => {
+      expect(
+        dataSet.getCellData({
+          query: { rowIndex: 0 },
+        }),
+      ).toEqual({
+        city: '杭州市',
+        number: 7789,
+        province: '浙江省',
+        sub_type: '桌子',
+        type: '家具',
+      });
+
       expect(
         dataSet.getCellData({
           query: {

diff --git a/packages/s2-core/src/data-set/table-data-set.ts b/packages/s2-core/src/data-set/table-data-set.ts
@@ -149,7 +149,13 @@ export class TableDataSet extends BaseDataSet {
     if (this.displayData.length === 0 && query.rowIndex === 0) {
       return;
     }
-    return this.displayData[query.rowIndex][query.col];
+
+    const rowData = this.displayData[query.rowIndex];
+
+    if (!('col' in query)) {
+      return rowData;
+    }
+    return rowData[query.col];
   }
 
   public getMultiData(query: DataType, isTotals?: boolean): DataType[] {

diff --git a/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts
@@ -152,7 +152,7 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
       const { valueField: key, data: record } = cellData;
       this.spreadsheet.emit(S2Event.GLOBAL_LINK_FIELD_JUMP, {
         key,
-        record,
+        record: Object.assign({ rowIndex: cellData.rowIndex }, record),
       });
     }
   }

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -150,6 +150,7 @@ function MainLayout() {
   });
   const [themeColor, setThemeColor] = React.useState<string>('#FFF');
   const [showCustomTooltip, setShowCustomTooltip] = React.useState(false);
+  const [showJumpLink, setShowJumpLink] = React.useState(false);
   const [adaptive, setAdaptive] = React.useState<Adaptive>(false);
   const [options, setOptions] =
     React.useState<Partial<S2Options<React.ReactNode>>>(defaultOptions);
@@ -266,6 +267,13 @@ function MainLayout() {
       S2Event.DATA_CELL_TREND_ICON_CLICK,
       logHandler('趋势图点击'),
     );
+    s2Ref.current?.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
+      logHandler('🔗链接跳转 data:')(data);
+
+      window.open(
+        'https://s2.antv.vision/en/docs/manual/advanced/interaction/link-jump#%E6%A0%87%E8%AE%B0%E9%93%BE%E6%8E%A5%E5%AD%97%E6%AE%B5',
+      );
+    });
   }, [sheetType]);
 
   useUpdateEffect(() => {
@@ -772,6 +780,19 @@ function MainLayout() {
                   checked={showCustomTooltip}
                   onChange={setShowCustomTooltip}
                 />
+                <Switch
+                  checkedChildren="打开链接跳转"
+                  unCheckedChildren="无链接跳转"
+                  checked={showJumpLink}
+                  onChange={(checked) => {
+                    setShowJumpLink(checked);
+                    updateOptions({
+                      interaction: {
+                        linkFields: checked ? ['province', 'city'] : [],
+                      },
+                    });
+                  }}
+                />
               </Space>
             </Collapse.Panel>
             <Collapse.Panel header="交互配置" key="interaction">
-Original file line number
+Diff line change
@@ Expand Up @@
           const { valueField: key, data: record } = cellData;
           this.spreadsheet.emit(S2Event.GLOBAL_LINK_FIELD_JUMP, {
             key,
-            record,
+            record: Object.assign({ rowIndex: cellData.rowIndex }, record),
           });
         }
       }
@@ Expand Down @@