1

Tabulator v3.5.3
Electron デスクトップ アプリ (OSX & PC)

300 以上の項目があるため、Tabulator は奇妙な動作を示しています。最も深刻なのは、アイテムが消えていることです。その他の症状としては、スクロールの「つまみ」のサイズと位置が不安定になり、一貫性がなくなります (例: つまみの位置がリスト全体のスクロール位置を反映していない)。

設定がvirtualDomBuffer高すぎたり低すぎたりして困っています。300 に設定すると、この動作が発生します。一度に画面に表示されるアイテムは 13 ～ 15 個だけです。Tabulator インスタンスの高さを次のように設定していますheight: "84vh"。それは、Tabulator が処理できる有効な CSS 値ですか?

1000 に設定しようとしましvirtualDomBufferたが、これは間違った処理方法でしょうか?

(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>"
    }
}
4

1 に答える 1

0

バージョン 3.5 にはレンダリングの不具合がありました。4.1 リリースにアップデートすることをお勧めします。

于 2018-11-22T21:47:50.780 に答える