制表符将“冻结”行清空答案

【问题标题】：Tabulator blanks out "frozen" rows制表符将“冻结”行清空
【发布时间】：2020-06-10 01:29:57
【问题描述】：

我有一个问题，其中Tabulator 正在使用row.freeze() 方法将“冻结”的行清空。 Tabulator 表中仍然存在“冻结”行，但它们的内容不可见。更令人费解的是，我可以毫无困难地利用row.unfreeze() 方法将行恢复到其在表格中的原始位置。

我试图在 jsFiddle 中重新创建该行为，但 row.freeze() 方法在那里完美运行（参考 https://jsfiddle.net/fkj46sq0/）。这让我相信我的 Tabulator 设置有问题，但我还没有发现。

下面这对图片说明了我看到的前后行为。

-- 在"冻结行之前：

-- 在“冻结”行之后：

可以看出，该行被“冻结”并移动到Tabulator 表的顶部。此行中没有可见内容。但是，我创建了一个包含“解冻”（取消标记）方法的行上下文菜单，调用此方法将恢复该行。

这是我的Tabulator 设置代码：

var table = new Tabulator(divId, {
    height: "100%",
    data: [],
    layout: "fitDataFill",
    responsiveLayout: "collapse",
    reactiveData: true, //enable reactive data
    selectable: 1,
    movableRows: true, //enable user movable rows
    cellEdited: function (cell) {
        var row = cell.getRow();
        row.update({ Changed: true });  // Update the data with a new value
    },
    rowContextMenu: myActionContextMenu,
    columns: [
        { title: "ID", field: "Id", visible: false, responsive: 0, hozAlign: "center" },
        { title: "Date", field: "DateComp", width: 100, responsive: 0, hozAlign: "center", sorter: "date", editor: dateEditor, validator: [{ type: noFutureDate }] },
        { title: "Mileage", field: "Mileage", responsive: 0, hozAlign: "center", editor: "input" },
        { title: "Per Diem", field: "Perdiem", responsive: 0, hozAlign: "center", editor: true, formatter: "tickCross" },
        { title: "Added", field: "Added", visible: false, responsive: 0, hozAlign: "center" },
        { title: "Changed", field: "Changed", visible: false, responsive: 0, hozAlign: "center" },
        { title: "MarkedForExclusion", field: "MarkedForExclusion", visible: false, responsive: 0, hozAlign: "center" }
    ]
});
table.setData(getDataSync("MileageAndPerDiem", emplId))

我已经盯着这个（断断续续）看了好几天了。任何帮助将不胜感激。

【问题讨论】：

标签： tabulator

【解决方案1】：

已解决

问题源于在包含Tabulator 表的<div> 元素上使用Bootstrap text-center 类/方法。

之前：

<div id="myTable" class="col-lg-12 text-center" style="font-size:12px;"></div>

之后：

<div id="myTable" class="col-lg-12" style="font-size:12px;"></div>

删除 Bootstrap text-center 类/方法解决了该问题。

【讨论】：