Tabulator getRows()函数无法获取行数据问题求助

我在使用Tabulator v5.4时遇到一个问题：页面上能正常显示3行数据，但调用getRows()时返回空数组。

实例化Tabulator的代码如下：

function TabulatorInvitees(divId, companyName, userEmail) {
    try {
        var table = new Tabulator(divId, {
            columns: [
                {
                    title: "<div style='width:20%; float:left; text-align:left; color:blue; font-size:14px;'>Vendor Invitees</div>",
                    columns: [
                        { title: "Id", field: "Id", visible: false },
                        { title: "Added", field: "Added", visible: false },
                        { title: "Changed", field: "Changed", visible: false },
                        { title: "MarkedForExclusion", field: "MarkedForExclusion", visible: false },
                        { title: "Email Address", field: "Email", widthGrow: 1, responsive: 0, hozAlign: "center", editor: "input", visible: true },
                        { title: "First Name", field: "FirstName", widthGrow: 0.5, responsive: 1, hozAlign: "center", editor: "input", visible: true },
                        { title: "Last Name", field: "LastName", widthGrow: 0.5, responsive: 1, hozAlign: "center", editor: "input", visible: true }
                    ]
                },
                {
                    title: tabulatorAddUser(companyName),
                    field: "ManageRows",
                    widthGrow: 0.25,
                    responsive: 2,
                    hozAlign: "center",
                    formatter: "tickCross",
                    headerClick: function (e, row) {
                        row.getTable().addRow({ Id: 0, Added: true }, false);
                    },
                    cellClick: function (e, cell) {
                        tabulatorFreezeUnfreezeDelete(cell.getRow());
                    }
                },
            ],
            data: [],
            height: "100%",
            layout: "fitColumns",  // required when using 'widthGrow'
            placeholder: tabulatorPlaceholder(companyName), //display message to user on empty table
            reactiveData: true, //enable reactive data
            responsiveLayout: "collapse",
            rowContextMenu: tabulatorContextMenu(),
        });
        table.on("rowTapHold", function (e, row) {
            // from Tabulator documentation: "The rowTapHold event is triggered when a user taps on a row on a touch display and holds their finger down for over 1 second."
            //e - the tap event object
            //row - row component
            tabulatorContextMenu();
        });
        table.on("tableBuilt", function () {
            if (companyName.length > 0) {
                table.setData(getDataSync({ caseSelector: "VendorMgmt_EmployeeList", companyCode: companyName, userEmail: userEmail }));
            }
            else {
                table.setData([]);
            }
        });
    }
    catch (error) {
        console.log(error);
    }
}

setData()会调用数据库函数返回3行数据，页面能正常渲染这些行。但点击单选按钮触发以下jQuery函数时：

$(".vendorStatus").click(function (e) {
    const status = e.target.value;
    const tbls = Tabulator.findTable("#divVendorEmployees");
    const tbl = tbls[0];
    const tblRows = tbl.getRows();

    console.log("tbls.length", tbls.length);
    console.log("tblRows", tblRows);
});

控制台显示已找到1个表格实例，但tblRows是空数组。

可能的原因及解决办法 #

1. 数据加载时机问题
   虽然tableBuilt事件触发时调用了setData，但Tabulator的setData内部是异步处理逻辑，即使你用了同步的getDataSync，也可能存在数据未完成绑定就调用getRows()的情况。可以改用dataLoaded事件确认数据加载完成：

// 替换tableBuilt为dataLoaded事件
table.on("dataLoaded", function(data) {
    // 数据加载完成后的逻辑，比如标记数据就绪状态
});

或者在获取行数据前，先通过getData()确认原始数据是否存在：

$(".vendorStatus").click(function (e) {
    const status = e.target.value;
    const tbls = Tabulator.findTable("#divVendorEmployees");
    const tbl = tbls[0];
    // 先获取原始数据确认是否加载完成
    const rawData = tbl.getData();
    console.log("rawData", rawData);
    // 再获取行组件
    const tblRows = tbl.getRows();
    console.log("tblRows", tblRows);
});

2. 表格实例引用问题
   TabulatorInvitees函数中创建的table是局部变量，可能存在实例引用丢失的情况。可以将表格实例存储到DOM元素的data属性中，确保获取的是正确实例：

// 修改TabulatorInvitees函数，存储实例到DOM
function TabulatorInvitees(divId, companyName, userEmail) {
    try {
        var table = new Tabulator(divId, {
            // 原有配置项不变
        });
        // 将实例绑定到DOM元素
        $(divId).data("tabulatorInstance", table);
        // 后续事件绑定逻辑不变
    } catch (error) {
        console.log(error);
    }
}

// 点击事件中从DOM获取实例
$(".vendorStatus").click(function (e) {
    const status = e.target.value;
    const tbl = $("#divVendorEmployees").data("tabulatorInstance");
    if(tbl){
        const tblRows = tbl.getRows();
        console.log("tblRows", tblRows);
    }
});

3. 响应式布局或行过滤影响
   如果表格启用了响应式折叠或有行过滤逻辑，getRows()默认只返回可见行。需要获取所有行（包括隐藏行）的话，传入参数true：

const tblRows = tbl.getRows(true); // 获取所有行，包括隐藏行

内容的提问来源于stack exchange，提问作者rpowell6