MUI Datatable中复选框的排序问题

Question

我希望已经勾选的数据出现在MUI数据表的顶部。支票簿在这张图片中，您可以看到所有已勾选的框没有排序。所以我希望所有已勾选的行都放在一起，并且出现在数据表的顶部。请在这个问题上帮助我。

P粉155832941 · Answer

下面的代码展示了一个名为SortCheckedAtTop的函数的解决方案。为了使解决方案正常工作，行的列表需要表示为对象数组（rows）。选中行的列表需要使用行ID的数组（selected）进行维护。rows和selected都应该使用一些状态管理方法进行维护（例如Redux、React.useState、React.useReducer等）。

可以使用JavaScript的Intl.Collator来处理一般的排序。例如：

let collator = new Intl.Collator( 'en', { numeric: false, sensitivity: 'base' } );

function getSortedRows = ( rows ) => {
    rows.sort( ( a, b ) => {
        return collator.compare( a.value, b.value );
    } );
    return rows;
}

函数SortCheckedAtTop基于在这里找到的排序函数。该函数假设rows是一个先前排序过的对象列表。这些对象可能如下所示：

const rows = [
    {
        id: 0,
        value: 'something'
    },
    {
        id: 1,
        value: 'something else'
    },

    ...

];

selected是表示已选中行的id数组。如果使用React.useState来管理此数组，您可能会有一个类似于以下语句的声明：

// 'zero'是已选中行的ID。
const [ selected, setSelected ] = React.useState( [ 0 ] );

解决方案

/**
 * Sort function.
 */
function SortCheckedAtTop( rows ) {
    let ids = rows.map( ( row ) => row.id );

    // 使用扩展运算符避免覆盖`rows`的原始排序顺序。
    // 您可能希望保留`rows`的原始排序顺序以便在此函数中使用它。
    let resorted = [ ...rows ].sort(
        ( a, b ) => {

            // 首先显示已选中的行。
            let ai = selected.indexOf( a.id ); // 行a的索引。

            // 如果a.id不在已选中列表中，ai将为-1。
            // 如果为-1，则通过将其放在已选中行列表的末尾来更新ai。
            // 末尾位置通过（selected.length）计算得出。
            // 但是我们需要保持未选中行的原始顺序。
            // 因此，我们添加了来自原始行数组的位置索引：
            // （ids.indexOf( a.id )）。
            // 如果已选中列表有4个ID，'a'未选中，
            // 并且a.id在原始行列表中的位置为3
            // （从零开始的数组索引=2），ai将为4 + 2 = 6。
            // 这保持了与原始行列表相同的顺序。
            ai = ai === -1 ? selected.length + ids.indexOf( a.id ) : ai;

            // 如有需要，更新bi。
            let bi = selected.indexOf(b); // 行b的索引。
            bi = bi === -1 ? selected.length + ids.indexOf( b.id ) : bi;

            // 返回排序结果。
            // 负值：升序，
            // 正值：降序，
            // 零：未确定（您可以添加更多代码来按另一排序键进行排序）
            return ai - bi;
        }
    );

    return resorted;
}

MUI Datatable中复选框的排序问题

全部回复(1)我来回复

解决方案