From bdd913d7173de64952437014ab9ffd1947ed506c Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Thu, 27 Jul 2023 15:40:49 +0800 Subject: [PATCH 1/4] feat(table): #2556 --- .changeset/long-starfishes-relate.md | 5 ++ .changeset/orange-brooms-shave.md | 5 ++ .changeset/rude-moles-unite.md | 5 ++ packages/ui/table/src/use-table.ts | 13 ++- .../ui/table/stories/table-tree.stories.tsx | 81 ++++++++++++++----- packages/utils/tree-utils/src/index.ts | 51 ++++++++++++ 6 files changed, 137 insertions(+), 23 deletions(-) create mode 100644 .changeset/long-starfishes-relate.md create mode 100644 .changeset/orange-brooms-shave.md create mode 100644 .changeset/rude-moles-unite.md diff --git a/.changeset/long-starfishes-relate.md b/.changeset/long-starfishes-relate.md new file mode 100644 index 000000000..1b4631a09 --- /dev/null +++ b/.changeset/long-starfishes-relate.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Table feat: 增加树形结构排序 diff --git a/.changeset/orange-brooms-shave.md b/.changeset/orange-brooms-shave.md new file mode 100644 index 000000000..6287262cd --- /dev/null +++ b/.changeset/orange-brooms-shave.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/tree-utils": minor +--- + +feat: 增加 flattedTreeSort 函数 diff --git a/.changeset/rude-moles-unite.md b/.changeset/rude-moles-unite.md new file mode 100644 index 000000000..10a2dfbcd --- /dev/null +++ b/.changeset/rude-moles-unite.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": patch +--- + +feat: 增加树形结构排序 diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 94a1d6337..2985d5389 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -5,6 +5,7 @@ import { getLeafChildren, // getNodeAncestors, getNodeRootParent, + flattedTreeSort, // getNodeRootParent, } from '@hi-ui/tree-utils' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -526,17 +527,21 @@ export const useTable = ({ //* *************** 根据排序列处理数据 ************** *// const showData = useMemo(() => { - let _data = transitionData.concat() + let _data = cloneTree(transitionData.concat()) if (activeSorterColumn) { - const sorter = - columns.filter((d) => d.dataKey === activeSorterColumn)[0] && - columns.filter((d) => d.dataKey === activeSorterColumn)[0].sorter + const sorter = columns.filter((d) => d.dataKey === activeSorterColumn)[0]?.sorter + if (sorter) { _data = activeSorterType === 'ascend' ? [..._data].sort(sorter) : [..._data].sort(sorter).reverse() + + // 平铺的树形结构排序 + if (_data.some((d: any) => d.depth !== 0)) { + _data = flattedTreeSort(_data) + } } } diff --git a/packages/ui/table/stories/table-tree.stories.tsx b/packages/ui/table/stories/table-tree.stories.tsx index ed2de405c..b04efc00d 100644 --- a/packages/ui/table/stories/table-tree.stories.tsx +++ b/packages/ui/table/stories/table-tree.stories.tsx @@ -10,51 +10,94 @@ export const TableTree = () => {

TableTree for Table

{ // return
12313
// }} + // maxHeight={'calc(100vh - 900px)'} + columns={[ + { + title: 'A', + dataKey: 'a', + sorter(pre, next) { + return pre.raw.b - next.raw.b + }, + }, + { title: 'B', dataKey: 'b' }, + { title: 'C', dataKey: 'c' }, + { title: 'D', dataKey: 'd' }, + ]} data={[ + { a: 'a-4', b: '4', c: 'c-4', d: 'd-4', key: 4 }, + { + a: 'a-3', + b: '3', + c: 'c-3', + d: 'd-3', + key: 3, + children: [ + { + a: 'a-3-2', + b: '32', + c: 'c-3-2', + d: 'd-3-2', + key: 32, + }, + { + a: 'a-3-1', + b: '31', + c: 'c-3-1', + d: 'd-3-1', + key: 31, + }, + ], + }, { a: 'a-1', - b: 'b-1', + b: '1', c: 'c-1', d: 'd-1', key: 1, children: [ + { a: 'a-1-3', b: '13', c: 'c-1-3', d: 'd-1-3', key: 13 }, { a: 'a-1-1', - b: 'b-1-1', + b: '11', c: 'c-1-1', d: 'd-1-1', - key: '1-1', + key: 11, children: [ { a: 'a-1-1-1', - b: 'b-1-1-1', + b: '111', c: 'c-1-1-1', - d: - 'd-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1d-1-1-1', - key: '1-1-1', + d: 'd-1-1-1d-1-1-1d-1-1-1d-1-1-1', + key: 111, + }, + { + a: 'a-1-1-3', + b: '113', + c: 'c-1-1-3', + d: 'd-1-1-1d-1-1-1d-1-1-1d-1-1-3', + key: 113, + }, + { + a: 'a-1-1-2', + b: '112', + c: 'c-1-1-2', + d: 'd-1-1-1d-1-1-1d-1-1-1d-1-1-2', + key: 112, }, - { a: 'a-1-1-2', b: 'b-1-1-2', c: 'c-1-1-2', d: 'd-1-1-2', key: '1-1-2' }, ], }, - { a: 'a-1-2', b: 'b-1-2', c: 'c-1-2', d: 'd-1-2', key: '1-2' }, + { a: 'a-1-2', b: '12', c: 'c-1-2', d: 'd-1-2', key: 12 }, ], }, - { a: 'a-2', b: 'b-2', c: 'c-2', d: 'd-2', key: 2 }, - { a: 'a-3', b: 'b-3', c: 'c-3', d: 'd-3', key: 3 }, - { a: 'a-4', b: 'b-4', c: 'c-4', d: 'd-4', key: 4 }, - ]} - columns={[ - { title: 'A', dataKey: 'a' }, - { title: 'B', dataKey: 'b' }, - { title: 'C', dataKey: 'c' }, - { title: 'D', dataKey: 'd' }, + + { a: 'a-2', b: '2', c: 'c-2', d: 'd-2', key: 2 }, ]} /> diff --git a/packages/utils/tree-utils/src/index.ts b/packages/utils/tree-utils/src/index.ts index 9639f5f5b..b4cffb797 100644 --- a/packages/utils/tree-utils/src/index.ts +++ b/packages/utils/tree-utils/src/index.ts @@ -707,3 +707,54 @@ export const getTreeNodesWithChildren = (tree: T[]) return nodes } + +/** + * 对平铺的树结构按照树形结构进行排序 + * 因为 children 字段可能参与了其他逻辑处理，为不影响其他逻辑，增加一个 showChildren 字段，用于存放需要显示的子节点，并且按照 showChildren 转换成树结构 + * @param flattedNode + * @returns + */ +export const flattedTreeSort = & { showChildren?: T[] }>( + flattedNode: T[] +) => { + const len = flattedNode.length + + for (let i = 0; i < len; i++) { + const item = flattedNode[i] + const { depth, parent } = item + + if (depth !== 0) { + const len2 = flattedNode.length + + for (let j = 0; j < len2; j++) { + if (parent?.id === flattedNode[j].id) { + if (!flattedNode[j].showChildren) { + flattedNode[j].showChildren = [] + } + + !flattedNode[j].showChildren?.some((d) => d.id === item.id) && + flattedNode[j].showChildren?.push(item) + + break + } + } + } + } + + const parentNodes = flattedNode.filter((d) => d.depth === 0) + const flattedNodes: T[] = [] + + const flattenNodes = (nodes: T[]) => { + nodes.forEach((d) => { + flattedNodes.push(d) + + if (d.showChildren) { + flattenNodes(d.showChildren) + } + }) + } + + flattenNodes(parentNodes) + + return flattedNodes +} From 403a4b8afba4735eab702480ba4d687ff58eb8db Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Thu, 27 Jul 2023 20:09:51 +0800 Subject: [PATCH 2/4] =?UTF-8?q?chore(table):=20=E4=BB=A3=E7=A0=81=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/utils/tree-utils/src/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/utils/tree-utils/src/index.ts b/packages/utils/tree-utils/src/index.ts index b4cffb797..6dd2acb94 100644 --- a/packages/utils/tree-utils/src/index.ts +++ b/packages/utils/tree-utils/src/index.ts @@ -724,9 +724,7 @@ export const flattedTreeSort = & { showC const { depth, parent } = item if (depth !== 0) { - const len2 = flattedNode.length - - for (let j = 0; j < len2; j++) { + for (let j = 0; j < len; j++) { if (parent?.id === flattedNode[j].id) { if (!flattedNode[j].showChildren) { flattedNode[j].showChildren = [] From 936a947e264d76b384be4ea9382a9be938cdfd44 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Thu, 27 Jul 2023 20:40:54 +0800 Subject: [PATCH 3/4] =?UTF-8?q?chore(table):=20=E4=BB=A3=E7=A0=81=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/table/src/use-table.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 2985d5389..80130a8db 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -16,6 +16,7 @@ import { TableRowEventData, TableRowSelection, FlattedTableColumnItemData, + FlattedTableRowData, } from './types' import { PaginationProps } from '@hi-ui/pagination' import { useColWidth } from './hooks/use-col-width' @@ -527,7 +528,7 @@ export const useTable = ({ //* *************** 根据排序列处理数据 ************** *// const showData = useMemo(() => { - let _data = cloneTree(transitionData.concat()) + let _data: FlattedTableRowData[] = cloneTree(transitionData) if (activeSorterColumn) { const sorter = columns.filter((d) => d.dataKey === activeSorterColumn)[0]?.sorter @@ -539,7 +540,7 @@ export const useTable = ({ : [..._data].sort(sorter).reverse() // 平铺的树形结构排序 - if (_data.some((d: any) => d.depth !== 0)) { + if (_data.some((d) => d.depth !== 0)) { _data = flattedTreeSort(_data) } } From dbda0b1aa437011a5acf1298eb663bb8b5ab8866 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Thu, 27 Jul 2023 20:55:44 +0800 Subject: [PATCH 4/4] =?UTF-8?q?chore(table):=20=E4=BB=A3=E7=A0=81=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/table/src/use-table.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 80130a8db..704d27ab1 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -534,10 +534,7 @@ export const useTable = ({ const sorter = columns.filter((d) => d.dataKey === activeSorterColumn)[0]?.sorter if (sorter) { - _data = - activeSorterType === 'ascend' - ? [..._data].sort(sorter) - : [..._data].sort(sorter).reverse() + activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse() // 平铺的树形结构排序 if (_data.some((d) => d.depth !== 0)) {