Konflikt zwischen selectableRange und rowSelection: Durch Klicken auf das Kontrollkästchen wird die Auswahl anderer Zeil ⇐ JavaScript

[Anonymous]

Ich verwende Tabulator (v6.3) und stehe vor einem Konflikt zwischen dem Modul selectableRange und dem Formatierer rowSelection (Kontrollkästchen).
Das Ziel: Ich möchte eine Excel-ähnliche Bereichsauswahl verwenden (

Code: Select all

selectableRange: 1

) für Zelloperationen, verwenden Sie aber auch eine Kontrollkästchenspalte (

Code: Select all

formatter: "rowSelection"

) zum Auswählen mehrerer Zeilen.
Das Problem: Ich versuche, eine Kontrollkästchenspalte mithilfe eines benutzerdefinierten Formatierers zu implementieren, um den Klickkonflikt „selectableRange“ zu verhindern. Ich habe e.stopPropagation() zu den Kontrollkästchen-Klick-/Mousedown-Ereignissen hinzugefügt, um zu verhindern, dass die Bereichsauswahllogik andere Zeilen löscht.
Aktuelles Verhalten:

• UI (visuell): Die Kontrollkästchen scheinen ordnungsgemäß zu funktionieren. Ich kann mehrere Kontrollkästchen aktivieren, und sie bleiben visuell aktiviert.
• Daten (interner Status): Wenn ich jedoch table.getSelectedData() aufrufe, wird nur die letzte Zeile zurückgegeben, auf die ich geklickt habe, und die anderen werden ignoriert.

Obwohl ich die Ereignisweitergabe gestoppt habe, scheint der programmgesteuerte Aufruf von row.toggleSelect() immer noch die interne Einzelauswahllogik von Tabulator auszulösen, die durch selectableRange erzwungen wird: 1. Dadurch entsteht eine Desynchronisierung, bei der die Benutzeroberfläche mehrere Auswahlmöglichkeiten anzeigt, die internen Daten jedoch nur eine enthalten.
Meine Einschränkungen:
Ich kann die vorhandenen getSelectedData()-Aufrufe in meiner alten Codebasis nicht ändern. Die native Auswahl-API muss funktionieren.
Ich benötige selectableRange für das Kopieren von Zellen und rowSelection für die Koexistenz mehrzeiliger Aktionen.
Frage: Gibt es eine Konfigurationsoption oder einen Workaround, um die rowSelection-Spalte von der selectableRange-Logik zu isolieren? Ich benötige die Kontrollkästchen, um die Zeilenauswahl additiv umzuschalten, ohne die vorhandene Auswahl zu löschen, während selectableRange für andere Spalten aktiv bleibt.

Code: Select all

// Data: Minimal set to reproduce the issue
var tableData = [
{id:1, name:"Oli Bob", age:12},
{id:2, name:"Mary May", age:1},
{id:3, name:"Christine Lobowski", age:42},
];

// Custom Formatter to stop event propagation
var customRowSelection = function(cell, formatterParams, onRendered){
var checkbox = document.createElement("input");
checkbox.type = 'checkbox';

// Attempting to sync with row selection
checkbox.checked = cell.getRow().isSelected();

// Trying to stop the range selection trigger
var stopEvent = function(e){ e.stopPropagation(); }

checkbox.addEventListener("pointerdown", stopEvent);
checkbox.addEventListener("mousedown", stopEvent);

checkbox.addEventListener("click", function(e){
e.stopPropagation();
cell.getRow().toggleSelect();
});

return checkbox;
};

// Tabulator Configuration
var table = new Tabulator("#example-table", {
data: tableData,
height: "200px",

// 1. Enabling Range Selection (The core of the conflict)
selectableRange: 1,
selectableRangeColumns: true,
selectableRangeRows: true,

// 2. Disabling Default Row Selection logic
selectable: false,

columns:[
{
// Custom checkbox column
formatter: customRowSelection,
width: 50,
hozAlign: "center",
headerSort: false
},
{title:"Name", field:"name", width:200},
{title:"Age", field:"age"},
],
});

// Issue: Even with stopPropagation, clicking the checkbox seems to trigger
// the internal range selection logic, clearing other selected rows.

Code: Select all