时间戳

首页 > 解决方案 > React-virtualized Multiple Column Sort，加载后排序

react-virtualized - React-virtualized Multiple Column Sort，加载后排序

问题描述

我已经为多排序列实现了 VirtualizedTable。我发现您无法在渲染后对其他列进行排序。

以下是我在课堂上的排序功能

    sort = ({ event, sortBy, sortDirection }) => {
    const nosort = ['input', 'textarea', 'select', 'option', 'span'].indexOf(event.target.tagName.toLowerCase()) !== -1
    if (!nosort && this.props.disableSort !== true) {
        this.setState((prevState, props) => ({ sortBy, sortDirection: sortBy === prevState.sortBy ? sortDirection : 'ASC' }))
    }
}

根据文档，这是我的 sortState

    sortState = () => createTableMultiSort(this.sort, defaultSort);

以下是我作为道具注入组件的内容 

const defaultSort = () => {
return {
    defaultSortBy: ['firstColumn', 'secondColumn'],
    defaultSortDirection: {
        firstColumn: 'ASC',
        secondColumn: 'ASC',
    }
}

}

这是我的 headerRenderer

    headerRenderer = (tableWidth) => ({ columnData, dataKey, disableSort, label, sortBy, sortDirection }) => {

    const showSortIndicator = this.sortState().sortBy.includes(dataKey);

    return (
        <React.Fragment key={dataKey}>
            <div className="ReactVirtualized__Table__headerTruncatedText" title={label}>
                {label}
            </div>
            {showSortIndicator && <SortIndicator key="SortIndicator" sortDirection={this.sortState().sortDirection[dataKey]} />}
            <Draggable
                axis="x"
                defaultClassName="DragHandle"
                defaultClassNameDragging="DragHandleActive"
                onDrag={(event, { deltaX }) => { this.resizeRow({ dataKey, deltaX, tableWidth }) } }
                position={{ x: 0 }}
                zIndex={999}
            >
                <span className="DragHandleIcon" title="Drag icon to expand/collapse the column">⋮&lt;/span>
            </Draggable>
        </React.Fragment>
    )

我已经通读了代码 createMultiSort 并调试了我自己的代码，看看为什么它不起作用。基本上，showSortIndicator 不正确，因为 sortBy 不包含列键。

我试图在 defaultSort 中输入列的名称作为数据类型。但这似乎不起作用。

渲染后如何对其他列启用排序？如果指定了默认排序，这些列将如何排序？

TIA帕特里克

标签： react-virtualized

解决方案

经过一段时间的调试和查看源代码后解决了。似乎您不能将 defaultSortBy 单独指定为元素的道具。您需要在创建元素时指定。因此，根据文档 -

const sortState = createMultiSort(sort, {
     defaultSortBy: ['firstName', 'lastName'],
     defaultSortDirection: {
         firstName: 'ASC',
         lastName: 'ASC',
 },
 });

推荐阅读