Problème de tri des cases à cocher dans MUI Datatable

Question

Je souhaite que les données cochées apparaissent en haut du tableau de données MUI. chéquier Sur cette image, vous pouvez voir que toutes les cases cochées ne sont pas triées.

Je souhaite donc que toutes les lignes cochées soient ensemble et apparaissent en haut du tableau de données.

Veuillez m'aider à résoudre ce problème.

Answer 1

Le code ci-dessous montre la solution avec une fonction appelée SortCheckedAtTop. Pour que la solution fonctionne correctement, la liste des lignes doit être représentée sous la forme d'un tableau d'objets (rows）。选中行的列表需要使用行ID的数组（selected）进行维护。rows和selected les deux doivent être maintenus à l'aide d'une méthode de gestion d'état (par exemple Redux, React.useState, React.useReducer, etc.).

Vous pouvez utiliser Intl.Collator de JavaScript pour gérer le tri général. Par exemple :

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;
}

La

fonction SortCheckedAtTop est basée sur la fonction de tri trouvée ici. Cette fonction suppose que rows est une liste d'objets préalablement triés. Ces objets pourraient ressembler à ceci :

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

    ...

];

selected是表示已选中行的id数组。如果使用React.useStatePour gérer ce tableau, vous pourriez avoir une déclaration similaire à :

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

Solution

/**
 * 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;
}