1

我正在使用Fluent UI DetailsList。我的表如下所示： 在此处输入图像描述

我需要在每一列（文本或下拉列表）下方的过滤器，如下所示： 在此处输入图像描述

请让我知道这是否可能？或者也许是一种显示自定义标题的方法（使用 html）？

4

2 回答 2

10

这实际上比我想象的要容易......

如果您可以单击列标题以显示选项（而不是直接在标题下方显示下拉菜单），那么可以使用该ContextualMenu组件与DetailsList. 我通过调整官方文档中的可变行高示例来实现它：https ://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/variablerowheights 。

在 DetailsList 下添加一个 ContextualMenu：

<DetailsList
    items={items}
    columns={columns}
/>
{this.state.contextualMenuProps && <ContextualMenu {...this.state.contextualMenuProps} />}

在您的列定义中，设置hasDropdown操作，以便用户获得一个他们可以/应该单击标题的 UI 指示器，并调用一个 contextMenu 方法（注意我正在使用onColumnContextMenu以及onColumnClick所以无论他们是左键还是右键单击都没有关系标题：

{
    key: 'dept',
    name: 'Department',
    fieldName: 'dept',
    minWidth: 125,
    maxWidth: 200,
    onColumnContextMenu: (column, ev) => {
        this.onColumnContextMenu(column, ev);
    },
    onColumnClick: (ev, column) => {
        this.onColumnContextMenu(column, ev);
    },
    columnActionsMode: ColumnActionsMode.hasDropdown,
}

当onColumnContextMenu方法被调用时，我们需要构建将被ContextualMenu组件使用的上下文菜单属性。还要注意dismissal方法，它清除了状态，所以菜单被隐藏了。

private onContextualMenuDismissed = (): void => {
    this.setState({
        contextualMenuProps: undefined,
    });
}

private onColumnContextMenu = (column: IColumn, ev: React.MouseEvent<HTMLElement>): void => {
    if (column.columnActionsMode !== ColumnActionsMode.disabled) {
        this.setState({
            contextualMenuProps: this.getContextualMenuProps(ev, column),
        });
    }
};

最后，getContextualMenuProps您需要确定哪些选项应该是供用户单击的。在此示例中，我只是提供排序选项（您需要添加一个onClick处理程序以在用户单击项目时实际执行某些操作），但我将使用column来确定这些项目实际上应该是什么并绘制过滤器进入项目集合，以便用户可以选择一个进行过滤。

private getContextualMenuProps = (ev: React.MouseEvent<HTMLElement>, column: IColumn): IContextualMenuProps => {
    const items: IContextualMenuItem[] = [
        {
            key: 'aToZ',
            name: 'A to Z',
            iconProps: { iconName: 'SortUp' },
            canCheck: true,
            checked: column.isSorted && !column.isSortedDescending,
        },
        {
            key: 'zToA',
            name: 'Z to A',
            iconProps: { iconName: 'SortDown' },
            canCheck: true,
            checked: column.isSorted && column.isSortedDescending,
        }
    ];

    return {
        items: items,
        target: ev.currentTarget as HTMLElement,
        directionalHint: DirectionalHint.bottomLeftEdge,
        gapSpace: 10,
        isBeakVisible: true,
        onDismiss: this.onContextualMenuDismissed,
    }
}

注意对象target上的ContextualMenuProps，它告诉将ContextualMenu自己锁定在哪里（在这种情况下，您单击以实例化菜单的列标题。

于 2020-05-28T16:28:15.427 回答
0

没有上下文菜单的每列的详细列表过滤器 -

https://codesandbox.io/s/rajesh-patil74-jzuiy?file=/src/DetailsList.CustomColumns.Example.tsx

例如 - 在与每列关联的文本字段中提供过滤器将在颜色列上应用过滤器。

于 2021-09-07T10:33:22.587 回答