Tabulator v3.5.3
Настольное приложение Electron (OSX и ПК)
При более чем 300 элементах Tabulator демонстрирует странное поведение;самое серьезное, что предметы исчезают.Другие симптомы включают размер «большого пальца» и положение прокрутки, которое становится ошибочным и непоследовательным (например, положение большого пальца не отражает положение прокрутки в общем списке).
Мне интересно, установил ли virtualDomBuffer
слишком высокий или слишком низкий,Поведение происходит, когда оно установлено на 300. Только 13-15 элементов будут отображаться на экране одновременно.Я устанавливаю высоту экземпляра Tabulator следующим образом: height: "84vh"
.Это правильное значение CSS, которое может обрабатывать Tabulator?
Я пытался установить virtualDomBuffer
в 1000, но, возможно, это неправильный способ справиться с этим?
(я знаю, что естьболее новая версия Tabulator, но мне нужна поддержка и существующее приложение, и я не хочу вносить большие изменения, если мне не нужно.
- - - -
Инициализация экземпляра табулятора
eventList = $("#event-list");
eventList.tabulator({
height: "84vh",
virtualDomBuffer: 300,
layout: "fitColumns",
resizableColumns: false,
selectable: 1,
responsiveLayout: "hide",
placeholder: "No Events",
columns: [
{
title: "Events",
field: "startDate",
formatter: eventListRowFormatter,
variableHeight: true,
headerSort: false
},
{ formatter: deleteIcon, width: 5, align: "center", cellClick: deleteFromEventList }
],
rowClick: function (e, row) {
// prevent deselecting clicked row
var selectedRows = eventList.tabulator("getSelectedRows");
if (selectedRows.length == 0) {
eventList.tabulator("selectRow", row);
} else if (isEventDirty == false) {
lastEventSelected = row;
setActiveEvent(row.row.data)
} else {
eventList.tabulator("deselectRow");
eventList.tabulator("selectRow", lastEventSelected);
}
},
rowDeselected: function (row) {
if (isEventDirty == true) {
lastEventSelected = row;
}
},
ajaxLoader: false
});
Форматирование столбцов
function eventListRowFormatter(cell) {
var data = cell.cell.row.data
if (data.eventTitle == "") {
return " - " + "<br>" + "<small>" + data.startDate + "</small>"
} else {
return data.eventTitle + "<br>" + "<small>" + data.startDate + "</small>"
}
}