Mengisih masalah kotak semak dalam Jadual Data MUI

Question

Saya mahu data yang disemak muncul di bahagian atas jadual data MUI. buku cek Dalam gambar ini anda dapat melihat bahawa semua kotak yang ditandakan tidak diisih.

Jadi saya mahu semua baris yang ditandakan bersama-sama dan muncul di bahagian atas jadual data.

Tolong bantu saya dengan isu ini.

Answer 1

Kod di bawah menunjukkan penyelesaian dengan fungsi yang dipanggil SortCheckedAtTop. Untuk penyelesaian berfungsi dengan betul, senarai baris perlu diwakili sebagai tatasusunan objek (rows）。选中行的列表需要使用行ID的数组（selected）进行维护。rows和selected kedua-duanya harus dikekalkan menggunakan beberapa kaedah pengurusan keadaan (cth. Redux, React.useState, React.useReducer, dll.).

Anda boleh menggunakan Intl.Collator JavaScript untuk mengendalikan pengisihan umum. Contohnya:

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

Fungsi

SortCheckedAtTop adalah berdasarkan fungsi pengisihan yang ditemui di sini. Fungsi ini menganggap bahawa rows ialah senarai objek yang telah diisih sebelum ini. Objek ini mungkin kelihatan seperti ini:

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

    ...

];

selected是表示已选中行的id数组。如果使用React.useStateUntuk mengurus tatasusunan ini, anda mungkin mempunyai pernyataan yang serupa dengan:

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

Penyelesaian

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