|
|
@@ -11,6 +11,7 @@ import {
|
|
|
SelectAllOn16Regular,
|
|
|
CommentAdd16Regular,
|
|
|
MoreHorizontal16Filled,
|
|
|
+ NumberCircle116Regular
|
|
|
} from "@fluentui/react-icons";
|
|
|
import {
|
|
|
DataGridBody,
|
|
|
@@ -20,7 +21,6 @@ import {
|
|
|
DataGridHeaderCell,
|
|
|
DataGridCell,
|
|
|
TableCellLayout,
|
|
|
- TableColumnDefinition,
|
|
|
createTableColumn,
|
|
|
Button,
|
|
|
Menu,
|
|
|
@@ -29,231 +29,322 @@ import {
|
|
|
MenuItem,
|
|
|
MenuPopover,
|
|
|
Tooltip,
|
|
|
+ MenuDivider,
|
|
|
} from "@fluentui/react-components";
|
|
|
|
|
|
-const items = [
|
|
|
- {
|
|
|
- 姓名: { label: "陈丹", icon: <DocumentRegular /> },
|
|
|
- 性别: { label: "女", status: "available" },
|
|
|
- 年龄: { label: "18岁", timestamp: 1 },
|
|
|
- 最后在线时间: { label: "2024/11/6 13:50" },
|
|
|
- },
|
|
|
- {
|
|
|
- 姓名: { label: "蔡青松", icon: <FolderRegular /> },
|
|
|
- 性别: { label: "男", status: "busy" },
|
|
|
- 年龄: { label: "30岁", timestamp: 2 },
|
|
|
- 最后在线时间: { label: "2024/11/6 13:50" },
|
|
|
- },
|
|
|
- {
|
|
|
- 姓名: { label: "杨东明", icon: <VideoRegular /> },
|
|
|
- 性别: { label: "男", status: "away" },
|
|
|
- 年龄: { label: "25岁", timestamp: 2 },
|
|
|
- 最后在线时间: { label: "2024/11/6 13:50" },
|
|
|
- },
|
|
|
- {
|
|
|
- 姓名: { label: "吴瑞强", icon: <DocumentPdfRegular /> },
|
|
|
- 性别: { label: "男", status: "offline" },
|
|
|
- 年龄: { label: "25岁", timestamp: 3 },
|
|
|
- 最后在线时间: { label: "2024/11/6 13:50" },
|
|
|
- },
|
|
|
-];
|
|
|
|
|
|
-const columns = [
|
|
|
- createTableColumn({
|
|
|
- columnId: "姓名",
|
|
|
- compare: (a, b) => {
|
|
|
- return a.姓名.label.localeCompare(b.姓名.label);
|
|
|
- },
|
|
|
- renderHeaderCell: () => {
|
|
|
- return (
|
|
|
- <TableCellLayout media={<TextField16Regular />}>
|
|
|
- 姓名
|
|
|
- <Menu>
|
|
|
- <MenuTrigger disableButtonEnhancement>
|
|
|
- <Button
|
|
|
- appearance="subtle"
|
|
|
- icon={<ChevronDown16Filled />}
|
|
|
- ></Button>
|
|
|
- </MenuTrigger>
|
|
|
+const List = () => {
|
|
|
+ const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
|
|
|
|
|
|
- <MenuPopover>
|
|
|
- <MenuList>
|
|
|
- <MenuItem>New </MenuItem>
|
|
|
- <MenuItem>New Window</MenuItem>
|
|
|
- <MenuItem disabled>Open File</MenuItem>
|
|
|
- <MenuItem>Open Folder</MenuItem>
|
|
|
- </MenuList>
|
|
|
- </MenuPopover>
|
|
|
- </Menu>
|
|
|
- </TableCellLayout>
|
|
|
- );
|
|
|
- },
|
|
|
- renderCell: (item) => {
|
|
|
- return ChangeBtnShowType(item);
|
|
|
- },
|
|
|
- }),
|
|
|
- createTableColumn({
|
|
|
- columnId: "性别",
|
|
|
- compare: (a, b) => {
|
|
|
- return a.性别.label.localeCompare(b.性别.label);
|
|
|
- },
|
|
|
- renderHeaderCell: () => {
|
|
|
- return (
|
|
|
- <TableCellLayout media={<SelectAllOn16Regular />}>
|
|
|
- 性别
|
|
|
- <Menu>
|
|
|
- <MenuTrigger disableButtonEnhancement>
|
|
|
- <Button
|
|
|
- appearance="subtle"
|
|
|
- icon={<ChevronDown16Filled />}
|
|
|
- ></Button>
|
|
|
- </MenuTrigger>
|
|
|
+ //数据类型常量
|
|
|
+ const DATA_TYPE = {
|
|
|
+ 文本: "文本",
|
|
|
+ 数字: "数字",
|
|
|
+ 日期: "日期",
|
|
|
+ 选项: "选项"
|
|
|
+ }
|
|
|
|
|
|
- <MenuPopover>
|
|
|
- <MenuList>
|
|
|
- <MenuItem>New </MenuItem>
|
|
|
- <MenuItem>New Window</MenuItem>
|
|
|
- <MenuItem disabled>Open File</MenuItem>
|
|
|
- <MenuItem>Open Folder</MenuItem>
|
|
|
- </MenuList>
|
|
|
- </MenuPopover>
|
|
|
- </Menu>
|
|
|
- </TableCellLayout>
|
|
|
- );
|
|
|
- },
|
|
|
- renderCell: (item) => {
|
|
|
- return item.性别.label;
|
|
|
- },
|
|
|
- }),
|
|
|
- createTableColumn({
|
|
|
- columnId: "年龄",
|
|
|
- compare: (a, b) => {
|
|
|
- return a.年龄.timestamp - b.年龄.timestamp;
|
|
|
- },
|
|
|
- renderHeaderCell: () => {
|
|
|
- return (
|
|
|
- <TableCellLayout media={<TextField16Regular />}>
|
|
|
- 年龄
|
|
|
- <Menu>
|
|
|
- <MenuTrigger disableButtonEnhancement>
|
|
|
- <Button
|
|
|
- appearance="subtle"
|
|
|
- icon={<ChevronDown16Filled />}
|
|
|
- ></Button>
|
|
|
- </MenuTrigger>
|
|
|
+ /**
|
|
|
+ * 列头下拉菜单
|
|
|
+ * @param {*} dataType 表现类型
|
|
|
+ */
|
|
|
+ const HeaderMenuList = (props) => {
|
|
|
+ return (
|
|
|
+ <Menu>
|
|
|
+ <MenuTrigger disableButtonEnhancement>
|
|
|
+ <Button
|
|
|
+ appearance="subtle"
|
|
|
+ icon={<ChevronDown16Filled />}
|
|
|
+ ></Button>
|
|
|
+ </MenuTrigger>
|
|
|
|
|
|
- <MenuPopover>
|
|
|
- <MenuList>
|
|
|
- <MenuItem>New </MenuItem>
|
|
|
- <MenuItem>New Window</MenuItem>
|
|
|
- <MenuItem disabled>Open File</MenuItem>
|
|
|
- <MenuItem>Open Folder</MenuItem>
|
|
|
- </MenuList>
|
|
|
- </MenuPopover>
|
|
|
- </Menu>
|
|
|
- </TableCellLayout>
|
|
|
- );
|
|
|
- },
|
|
|
+ <MenuPopover>
|
|
|
+ <MenuList>
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem onClick={() => {
|
|
|
+ ascendingData(props.columnId);
|
|
|
+ }}>从小到大 </MenuItem>}
|
|
|
|
|
|
- renderCell: (item) => {
|
|
|
- return item.年龄.label;
|
|
|
- },
|
|
|
- }),
|
|
|
- createTableColumn({
|
|
|
- columnId: "最后在线时间",
|
|
|
- compare: (a, b) => {
|
|
|
- return a.最后在线时间.label.localeCompare(b.最后在线时间.label);
|
|
|
- },
|
|
|
- renderHeaderCell: () => {
|
|
|
- return (
|
|
|
- <TableCellLayout media={<Calendar16Regular />}>
|
|
|
- 最后在线时间
|
|
|
- <Menu>
|
|
|
- <MenuTrigger disableButtonEnhancement>
|
|
|
- <Button
|
|
|
- appearance="subtle"
|
|
|
- icon={<ChevronDown16Filled />}
|
|
|
- ></Button>
|
|
|
- </MenuTrigger>
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem onClick={() => {
|
|
|
+ descendingData(props.columnId);
|
|
|
+ }}>从大到小</MenuItem>}
|
|
|
|
|
|
- <MenuPopover>
|
|
|
- <MenuList>
|
|
|
- <MenuItem>New </MenuItem>
|
|
|
- <MenuItem>New Window</MenuItem>
|
|
|
- <MenuItem disabled>Open File</MenuItem>
|
|
|
- <MenuItem>Open Folder</MenuItem>
|
|
|
- </MenuList>
|
|
|
- </MenuPopover>
|
|
|
- </Menu>
|
|
|
- </TableCellLayout>
|
|
|
- );
|
|
|
- },
|
|
|
- renderCell: (item) => {
|
|
|
- return (
|
|
|
- <TableCellLayout media={item.最后在线时间.icon}>
|
|
|
- {item.最后在线时间.label}
|
|
|
- </TableCellLayout>
|
|
|
- );
|
|
|
- },
|
|
|
- }),
|
|
|
-];
|
|
|
+ {(props.dataType == DATA_TYPE.文本 || props.dataType == DATA_TYPE.选项) && <MenuItem onClick={() => {
|
|
|
+ ascendingData(props.columnId);
|
|
|
+ }}>A到Z </MenuItem>}
|
|
|
|
|
|
-/**
|
|
|
- * 鼠标移动到姓名列上时，显示两个按钮
|
|
|
- * @param item 包含姓名标签的对象
|
|
|
- * @returns 返回 JSX 元素
|
|
|
- */
|
|
|
-const ChangeBtnShowType = (item) => {
|
|
|
- const [showButton, setShowButton] = useState(false);
|
|
|
- const handleMouseEnter = () => {
|
|
|
- setShowButton(true);
|
|
|
- };
|
|
|
+ {(props.dataType == DATA_TYPE.文本 || props.dataType == DATA_TYPE.选项) && <MenuItem onClick={() => {
|
|
|
+ descendingData(props.columnId);
|
|
|
+ }}>Z到A </MenuItem>}
|
|
|
|
|
|
- const handleMouseLeave = () => {
|
|
|
- setShowButton(false);
|
|
|
- };
|
|
|
+ {(props.dataType == DATA_TYPE.日期) && <MenuItem onClick={() => {
|
|
|
+ ascendingData(props.columnId);
|
|
|
+ }}>从旧到新 </MenuItem>}
|
|
|
|
|
|
- return (
|
|
|
- <div
|
|
|
- style={{
|
|
|
- width: "100%",
|
|
|
- display: "flex",
|
|
|
- justifyContent: "space-between",
|
|
|
- alignItems: "center",
|
|
|
- }}
|
|
|
- onMouseEnter={handleMouseEnter}
|
|
|
- onMouseLeave={handleMouseLeave}
|
|
|
- >
|
|
|
- {item.姓名.label}
|
|
|
- {showButton && (
|
|
|
- <div>
|
|
|
- <Tooltip content="更多操作" positioning="below">
|
|
|
- <Button
|
|
|
- appearance="subtle"
|
|
|
- icon={<MoreHorizontal16Filled />}
|
|
|
- onClick={() => {
|
|
|
- alert("更多操作");
|
|
|
- }}
|
|
|
- ></Button>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip content="添加注释" positioning="below">
|
|
|
- <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
|
|
|
- </Tooltip>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- );
|
|
|
-};
|
|
|
+ {(props.dataType == DATA_TYPE.日期) && <MenuItem onClick={() => {
|
|
|
+ descendingData(props.columnId);
|
|
|
+ }}>从新到旧 </MenuItem>}
|
|
|
+ <MenuDivider />
|
|
|
+ <MenuItem>筛选方式</MenuItem>
|
|
|
+ <MenuDivider />
|
|
|
+ <MenuItem>按“{props.columnId}”分组</MenuItem>
|
|
|
+ <MenuDivider />
|
|
|
+ <MenuItem><HeaderMenuColumnSet dataType={props.dataType} /></MenuItem>
|
|
|
+ <MenuDivider />
|
|
|
+ <MenuItem><HeaderMenuAmount dataType={props.dataType} /></MenuItem>
|
|
|
+ </MenuList>
|
|
|
+ </MenuPopover>
|
|
|
+ </Menu>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ const [dataSortType, setDataSortType] = useState(({
|
|
|
+ sortColumn: "序号",
|
|
|
+ sortDirection: "ascending",
|
|
|
+ }));
|
|
|
+ const ascendingData = (columnId) => {
|
|
|
+ setDataSortType(({
|
|
|
+ sortColumn: columnId,
|
|
|
+ sortDirection: "ascending",
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ const descendingData = (columnId) => {
|
|
|
+ setDataSortType(({
|
|
|
+ sortColumn: columnId,
|
|
|
+ sortDirection: "descending",
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 列设置的二级菜单
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+ const HeaderMenuColumnSet = (props) => {
|
|
|
+ return (
|
|
|
+ <Menu>
|
|
|
+ <MenuTrigger disableButtonEnhancement>
|
|
|
+ <MenuItem>列设置</MenuItem>
|
|
|
+ </MenuTrigger>
|
|
|
+
|
|
|
+ <MenuPopover>
|
|
|
+ <MenuList>
|
|
|
+ <MenuItem>编辑</MenuItem>
|
|
|
+ <MenuItem>隐藏此列</MenuItem>
|
|
|
+ <MenuItem>设置此列的格式</MenuItem>
|
|
|
+ <MenuItem>向左移动</MenuItem>
|
|
|
+ <MenuItem>向右移动</MenuItem>
|
|
|
+ <MenuItem>显示/隐藏列</MenuItem>
|
|
|
+ <MenuItem>加宽列</MenuItem>
|
|
|
+ <MenuItem>窄列</MenuItem>
|
|
|
+ <MenuItem>固定到筛选器窗口</MenuItem>
|
|
|
+ <MenuItem>添加列</MenuItem>
|
|
|
+ </MenuList>
|
|
|
+ </MenuPopover>
|
|
|
+ </Menu>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 列头“合计”二级菜单
|
|
|
+ */
|
|
|
+ const HeaderMenuAmount = (props) => {
|
|
|
+ return (
|
|
|
+ <Menu>
|
|
|
+ <MenuTrigger disableButtonEnhancement>
|
|
|
+ <MenuItem>合计</MenuItem>
|
|
|
+ </MenuTrigger>
|
|
|
+
|
|
|
+ <MenuPopover>
|
|
|
+ <MenuList>
|
|
|
+ <MenuItem>无</MenuItem>
|
|
|
+ <MenuItem>计数</MenuItem>
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem>平均值</MenuItem>}
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem>最大值</MenuItem>}
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem>最小值</MenuItem>}
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem>求和</MenuItem>}
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem>标准偏差</MenuItem>}
|
|
|
+ {props.dataType == DATA_TYPE.数字 && <MenuItem>方差</MenuItem>}
|
|
|
+ </MenuList>
|
|
|
+ </MenuPopover>
|
|
|
+ </Menu>
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
-const List = () => {
|
|
|
- const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标移动到姓名列上时，显示两个按钮
|
|
|
+ * @param item 包含姓名标签的对象
|
|
|
+ * @returns 返回 JSX 元素
|
|
|
+ */
|
|
|
+ const ChangeBtnShowType = (props) => {
|
|
|
+ const [showButton, setShowButton] = useState(false);
|
|
|
+ const handleMouseEnter = () => {
|
|
|
+ setShowButton(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleMouseLeave = () => {
|
|
|
+ setShowButton(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ width: "100%",
|
|
|
+ display: "flex",
|
|
|
+ justifyContent: "space-between",
|
|
|
+ alignItems: "center",
|
|
|
+ }}
|
|
|
+ onMouseEnter={handleMouseEnter}
|
|
|
+ onMouseLeave={handleMouseLeave}
|
|
|
+ >
|
|
|
+ {props.cellData}
|
|
|
+ {showButton && (
|
|
|
+ <div>
|
|
|
+ <Tooltip content="更多操作" positioning="below">
|
|
|
+ <Button
|
|
|
+ appearance="subtle"
|
|
|
+ icon={<MoreHorizontal16Filled />}
|
|
|
+ onClick={() => {
|
|
|
+ alert("更多操作");
|
|
|
+ }}
|
|
|
+ ></Button>
|
|
|
+ </Tooltip>
|
|
|
+ <Tooltip content="添加注释" positioning="below">
|
|
|
+ <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
|
|
|
return (
|
|
|
<DataGrid
|
|
|
- items={items}
|
|
|
- columns={columns}
|
|
|
- selectionMode="single"
|
|
|
- // sortable
|
|
|
+ items={[
|
|
|
+ {
|
|
|
+ 序号: { label: 1 },
|
|
|
+ 姓名: { label: "陈丹", icon: <DocumentRegular /> },
|
|
|
+ 性别: { label: "女", status: "available" },
|
|
|
+ 年龄: { label: "18岁", timestamp: 1 },
|
|
|
+ 最后在线时间: { label: "2024/11/6 13:50" },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 序号: { label: 2 },
|
|
|
+ 姓名: { label: "蔡青松", icon: <FolderRegular /> },
|
|
|
+ 性别: { label: "男", status: "busy" },
|
|
|
+ 年龄: { label: "30岁", timestamp: 2 },
|
|
|
+ 最后在线时间: { label: "2024/11/6 13:51" },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 序号: { label: 3 },
|
|
|
+ 姓名: { label: "杨东明", icon: <VideoRegular /> },
|
|
|
+ 性别: { label: "男", status: "away" },
|
|
|
+ 年龄: { label: "25岁", timestamp: 2 },
|
|
|
+ 最后在线时间: { label: "2024/11/6 13:52" },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 序号: { label: 4 },
|
|
|
+ 姓名: { label: "吴瑞强", icon: <DocumentPdfRegular /> },
|
|
|
+ 性别: { label: "男", status: "offline" },
|
|
|
+ 年龄: { label: "25岁", timestamp: 3 },
|
|
|
+ 最后在线时间: { label: "2024/11/6 13:53" },
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ columns={[
|
|
|
+ createTableColumn({
|
|
|
+ columnId: "序号",
|
|
|
+ fixed: true,
|
|
|
+ compare: (a, b) => {
|
|
|
+ return a.序号.label - b.序号.label;
|
|
|
+ },
|
|
|
+ renderHeaderCell: () => {
|
|
|
+ return (
|
|
|
+ <TableCellLayout media={<NumberCircle116Regular />}>
|
|
|
+ 序号
|
|
|
+ <HeaderMenuList dataType={DATA_TYPE.数字} title="序号" columnId="序号" />
|
|
|
+ </TableCellLayout>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ renderCell: (item) => {
|
|
|
+ return item.序号.label;
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ createTableColumn({
|
|
|
+ columnId: "姓名",
|
|
|
+ compare: (a, b) => {
|
|
|
+ return a.姓名.label.localeCompare(b.姓名.label);
|
|
|
+ },
|
|
|
+ renderHeaderCell: () => {
|
|
|
+ return (
|
|
|
+ <TableCellLayout media={<TextField16Regular />}>
|
|
|
+ 姓名
|
|
|
+ <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" columnId="姓名" />
|
|
|
+ </TableCellLayout>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ renderCell: (item) => {
|
|
|
+ return <ChangeBtnShowType cellData={item.姓名.label} />
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ createTableColumn({
|
|
|
+ columnId: "性别",
|
|
|
+ compare: (a, b) => {
|
|
|
+ return a.性别.label.localeCompare(b.性别.label);
|
|
|
+ },
|
|
|
+ renderHeaderCell: () => {
|
|
|
+ return (
|
|
|
+ <TableCellLayout media={<SelectAllOn16Regular />}>
|
|
|
+ 性别
|
|
|
+ <HeaderMenuList dataType={DATA_TYPE.选项} title="性别" columnId="性别" />
|
|
|
+ </TableCellLayout>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ renderCell: (item) => {
|
|
|
+ return item.性别.label;
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ createTableColumn({
|
|
|
+ columnId: "年龄",
|
|
|
+ compare: (a, b) => {
|
|
|
+ return a.年龄.timestamp - b.年龄.timestamp;
|
|
|
+ },
|
|
|
+ renderHeaderCell: () => {
|
|
|
+ return (
|
|
|
+ <TableCellLayout media={<TextField16Regular />}>
|
|
|
+ 年龄
|
|
|
+ <HeaderMenuList dataType={DATA_TYPE.文本} title="年龄" columnId="年龄" />
|
|
|
+ </TableCellLayout>
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ renderCell: (item) => {
|
|
|
+ return item.年龄.label;
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ createTableColumn({
|
|
|
+ columnId: "最后在线时间",
|
|
|
+ compare: (a, b) => {
|
|
|
+ return new Date(a.最后在线时间.label) - new Date(b.最后在线时间.label);
|
|
|
+ },
|
|
|
+ renderHeaderCell: () => {
|
|
|
+ return (
|
|
|
+ <TableCellLayout media={<Calendar16Regular />}>
|
|
|
+ 最后在线时间
|
|
|
+ <HeaderMenuList dataType={DATA_TYPE.日期} title="最后在线时间" columnId="最后在线时间" />
|
|
|
+ </TableCellLayout>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ renderCell: (item) => {
|
|
|
+ return (
|
|
|
+ <TableCellLayout media={item.最后在线时间.icon}>
|
|
|
+ {item.最后在线时间.label}
|
|
|
+ </TableCellLayout>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ ]}
|
|
|
+ selectionMode="multiselect"
|
|
|
+ sortable
|
|
|
+ sortState={dataSortType}
|
|
|
subtleSelection
|
|
|
resizableColumns
|
|
|
defaultSelectedItems={defaultSelectedItems}
|
唐渝林