下面的程式碼展示了一個名為SortCheckedAtTop的函數的解決方案。為了使解決方案正常運作,行的列表需要表示為物件陣列(rows)。選取行的清單需要使用行ID的陣列(selected)進行維護。 rows和selected都應該使用一些狀態管理方法來維護(例如Redux、React.useState、React.useReducer等)。
rows
selected
可以使用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來管理此數組,您可能會有一個類似以下語句的宣告:
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; }
下面的程式碼展示了一個名為SortCheckedAtTop的函數的解決方案。為了使解決方案正常運作,行的列表需要表示為物件陣列(
rows
)。選取行的清單需要使用行ID的陣列(selected
)進行維護。rows
和selected
都應該使用一些狀態管理方法來維護(例如Redux、React.useState、React.useReducer等)。可以使用JavaScript的Intl.Collator來處理一般的排序。例如:
函數SortCheckedAtTop是基於在這裡找到的排序函數。此函數假設rows是一個先前排序過的物件列表。這些物件可能如下所示:
selected
是表示已選取行的id
陣列。如果使用React.useState
來管理此數組,您可能會有一個類似以下語句的宣告:解決方案