Конфликт между selectableRange и rowSelection: установка флажка отменяет выбор других строк. ⇐ Jquery

[Anonymous]

Я использую Tabulator (v6.3) и столкнулся с конфликтом между модулем selectableRange и форматировщиком rowSelection (флажком).
Цель: я хочу использовать выбор диапазона в стиле Excel (

Код: Выделить всё

selectableRange: 1

) для операций с ячейками, но также используйте столбец флажка (

Код: Выделить всё

formatter: "rowSelection"

) для выбора нескольких строк.
Проблема: я пытаюсь реализовать столбец флажка с помощью специального средства форматирования, чтобы предотвратить конфликт кликов selectableRange. Я добавил e.stopPropagation() к событиям щелчка/нажатия мыши для флажка, чтобы логика выбора диапазона не очищала другие строки.
Текущее поведение:

• Интерфейс (визуальный): флажки работают правильно. Я могу установить несколько флажков, и они останутся визуально отмеченными.
• Данные (внутреннее состояние): Однако, когда я вызываю table.getSelectedData(), он возвращает только последнюю строку, по которой я щелкнул, игнорируя остальные.

Похоже, что даже несмотря на то, что я остановил распространение событий, программный вызов row.toggleSelect() по-прежнему запускает внутреннюю логику одиночного выбора Tabulator, реализуемую selectableRange: 1. Это создает рассинхронизацию, при которой пользовательский интерфейс отображает несколько вариантов выбора, но внутренние данные содержат только один.
Мои ограничения:
Я не могу изменить существующие вызовы getSelectedData() в моей устаревшей кодовой базе. Собственный API выбора должен работать.
Мне нужен selectableRange для копирования ячеек и rowSelection для сосуществования действий с несколькими строками.
Вопрос: существует ли вариант конфигурации или обходной путь для изоляции столбца rowSelection от логики selectableRange? Мне нужны флажки для аддитивного переключения выбора строк, не очищая существующий выбор, сохраняя при этом selectableRange активным для других столбцов.

Код: Выделить всё

// 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.

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... eselects-o