Sortierproblem der Kontrollkästchen in der MUI-Datentabelle

Question

Ich möchte, dass die überprüften Daten oben in der MUI-Datentabelle angezeigt werden. Scheckbuch Auf diesem Bild sehen Sie, dass alle angekreuzten Kästchen nicht sortiert sind.

Ich möchte also, dass alle überprüften Zeilen zusammen sind und oben in der Datentabelle angezeigt werden.

Bitte helfen Sie mir bei diesem Problem.

Answer 1

下面的代码展示了一个名为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;
}