The code below shows the solution with a function namedSortCheckedAtTop. For the solution to work properly, the list of rows needs to be represented as an array of objects (rows). The list of selected rows needs to be maintained using an array of row IDs (selected). Bothrowsandselectedshould be maintained using some state management methods (such as Redux, React.useState, React.useReducer, etc.).

You can use JavaScript'sIntl.Collatorto handle general sorting. For example:

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

FunctionSortCheckedAtTopBased on the sorting function foundhere. This function assumesrowsis a previously sorted list of objects. These objects might look like this:

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

selectedis theidarray representing the selected row. If you were usingReact.useStateto manage this array, you might have a statement similar to:

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