时间戳

首页 > 解决方案 > Tabulator 保留 Tabulator 加载后所做的更改

javascript - Tabulator 保留 Tabulator 加载后所做的更改

问题描述

我正在使用“tabulator-tables”“版本：4.0.4”。

在将制表器与数据一起加载到屏幕上之后，在前端调用翻译函数来翻译制表器表的一些可见数据。一切都按预期工作。

问题是当调整浏览器屏幕或打开窗口检查元素时，制表器会保留在制表器加载后所做的更改（如翻译功能）并显示我们从后端收到的原始数据。

需要帮助：如何保存不会影响浏览器大小或打开检查元素的更改。

请参阅屏幕截图以供参考：

代码：

async function columnTab(searchData = "", lmt) {
    searchData = searchData ? searchData : await fetchReqUrl("search", `?limit=${lmt}`, "fetch", "POST", "viewform");    
    searchData = (JSON.parse(searchData));     //data fetched from back end
    let DataCollHead = searchData.columns
    let slNo = [{ title: "Sl No.", formatter: "rownum", align: "center", width: 80 }]
    DataCollHead = slNo.concat(DataCollHead)
    let DataCollList = searchData.tableData
    table = new Tabulator("#searchContainer", {
        // movableRows:true,
        columns: DataCollHead,
        layout: "fitColumns",
        pagination: "local",
        paginationSize: 20,
        clipboard: true,
        clipboardPasteAction: "replace",
        clipboard:true,
        clipboardPasteAction:"replace",
        responsiveLayout: "collapse" , 

    })
    var tableData = DataCollList;
    table.setData(tableData);

    let resultRow = dgei('searchContainer')  //function to translate the data
    resultObj()
    formatResult(resultRow);
}

标签： javascripttabulator

解决方案

您遇到的问题是因为您试图从表外部操作表中的数据。

因为 Tabulator 使用虚拟 DOM，所以当重绘表格时，您无法安全地从外部编辑其内容而不会被覆盖。

如果要在数据进入表时更改数据，则需要使用Mustator功能。

如果您想更改数据向用户显示的方式，您需要使用Formatter功能

推荐阅读