0

我正在使用一个名为 Tabulator 的 JS 库来读取未知表数据/文件，所以从那时起我就使用此代码毫无问题地读取任何未知数据。

var table = new Tabulator("#table", {
 data:tableData,
  columns:Object.keys(tableData[0]).map(obj => {
    return {
      title: obj,
      field: obj,
      sorter: "string",
      align: "center",
    };
  }),
});

它在大多数情况下都很好用，但后来我尝试输入一个日期格式的表格（例如2018-12-12），但输出是纪元时间格式，在它假设呈现它呈现的日期格式的字段中，1544572800000我需要它成为人类可读的格式

例如，如果列标题为（出生日期），是否可以向代码添加条件以更改列格式？

4

2 回答 2

0

看起来你有一个问题服务器端提供你的数据，为了一致性起见，我建议在那里修复它，但如果这是不可能的，那么你有两个选择。

突变体

如果要更改表中的数据以便可以以不同的格式导出，可以在列上设置数据修改器以将此数据映射到更可用的数据。

在此示例中，假设它是您正在使用的日期字段，我们将创建一个自定义 mutator，然后在该列的列定义中分配 mutator：

//define custom mutator
var dateMutator = function(value, data, type, params, component){
    //value - original value of the cell
    //data - the data for the row
    //type - the type of mutation occurring  (data|edit)
    //params - the mutatorParams object from the column definition
    //component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column

    //convert date to JS date object
    var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
    d.setUTCSeconds(value);

    //format date to YYYY-MM-DD
    var month = '' + (d.getMonth() + 1);
    var day = '' + d.getDate();
    var year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

//column definition
{title:"Date", field:"date", mutatorData:dateMutator}

有关 mutator 的更多信息可以在Mutator 文档中找到

格式化程序

如果您想保持基础数据不变，但只是以不同的方式向用户显示，那么您需要使用formatter。

其代码与 mutator 非常相似，我们将再次定义一个自定义函数，然后将其绑定到列定义中的列

//define custom formatter
var dateFormatter = function(cell, formatterParams, onRendered)
    //cell - the cell component
    //formatterParams - parameters set for the column
    //onRendered - function to call when the formatter has been rendered

    //convert date to JS date object
    var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
    d.setUTCSeconds(cell.getValue());

    //format date to YYYY-MM-DD
    var month = '' + (d.getMonth() + 1);
    var day = '' + d.getDate();
    var year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

//column definition
{title:"Date", field:"date", formatter:dateFormatter}

有关格式化程序的更多信息，请参阅格式化程序文档

于 2018-12-03T21:35:07.270 回答
0

从@Oli Folkerd 中获取示例并稍微简化一下。

//define custom mutator
var dateMutator = function(value, data, type, params, component){
   return (new Date(value)).toISOString().split('T')[0];
//returns current value as YYYY-MM-DD
}

//column definition
{title:"Date", field:"date", mutatorData:dateMutator}
于 2020-03-20T15:47:49.580 回答