web/dataTable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): revert selection UI mechanism to use precise CSS selectors

Browse Source
This commit is contained in:
AI Engineer 2026-05-25 08:25:42 +08:00
parent 8ba9480bb0
commit 1d7b429b14
1 changed files with 13 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/selection.js
View File

@ -31,31 +31,24 @@ export const createSelectionManager = (container, state) => {
const body = container.querySelector('.dt-body'); const body = container.querySelector('.dt-body');
if (!body) return; if (!body) return;
// Fast path: Use children instead of querySelectorAll const rowNodes = body.querySelectorAll('.dt-body-row');
const nodes = body.children; rowNodes.forEach(rowNode => {
for (let r = 0; r < nodes.length; r++) {
const rowNode = nodes[r];
if (!rowNode.classList.contains('dt-body-row')) continue;
const absoluteRow = (rowNode._ref?.rIdx ?? -1) + state._listStartIndex; const absoluteRow = (rowNode._ref?.rIdx ?? -1) + state._listStartIndex;
const cells = rowNode.querySelectorAll('.dt-cell');
if (!hasSelection || absoluteRow < boundMinRow || absoluteRow > boundMaxRow) { if (!hasSelection || absoluteRow < boundMinRow || absoluteRow > boundMaxRow) {
// Clear all cells in row without checking individually if possible cells.forEach(cell => cell.classList.remove('dt-cell-selected'));
const cellNodes = rowNode.children; return;
for (let i = 0; i < cellNodes.length; i++) {
cellNodes[i].classList.remove('dt-cell-selected');
}
continue;
} }
const cellNodes = rowNode.children; cells.forEach((cell, cIdx) => {
for (let i = 0; i < cellNodes.length; i++) { if (isCellSelected(absoluteRow, cIdx)) {
const isSelected = isCellSelected(absoluteRow, i); cell.classList.add('dt-cell-selected');
const cell = cellNodes[i]; } else {
if (isSelected) cell.classList.add('dt-cell-selected'); cell.classList.remove('dt-cell-selected');
else cell.classList.remove('dt-cell-selected'); }
} });
} });
}; };
const updateStatus = () => { const updateStatus = () => {