Tabulator未知 HTML <table>(具有 TH 标头,因此所有列都有名称)创建的。

因此,没有办法触发任何mutatoror callback... except htmlImported:function()

,javascript,tabulator"/>

首页 > 解决方案 > 制表符/以编程方式正确的表格数据(从 HTML 加载)

Tabulator未知 HTML <table>(具有 TH 标头,因此所有列都有名称)创建的。

因此,没有办法触发任何mutatoror callback... except htmlImported:function()

问题描述

Tabulator未知 HTML <table>(具有 TH 标头,因此所有列都有名称)创建的。

因此,没有办法触发任何mutatoror callback... except htmlImported:function()

因为HTML <table>包含格式错误的 DATE 值,所以我需要访问所有fields内容rows以发现并更正这些值。

整个代码是:

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
</head><body>
<table id="tablexxx">
 <tr>
  <th>Name</th><th>Favorite Color</th><th>date</th></tr>
 <tr><td>Bob</td><td>Yellow</td><td>1/1/2001</td>
 </tr>
 <tr><td>Michelle</td><td>Purple</td><td>2/1/2000</td>
 </tr>
</table>
<div id="tablexxx"></div>

<script>
var tablexxx = new Tabulator("#tablexxx", {});

var rows = tablexxx.getRows();
rows.forEach(function(row)
{ var rowData = row.getData();
  rowData.forEach(function(cell) // <<< HOW TO DO IT RIGHT???
  {
    // get row field NAME
    var field = cell.name;       // <<< HOW TO DO IT RIGHT???
    if(field.indexOf("date") >= 0)
    {
       // get colum field VALUE
       var date = cell.value;   // <<< HOW TO DO IT RIGHT???

       // make new value using proper format
       var ndate = date[0] + date[1] + date[2]; // TODO

       // update row with {"date":"01/02/2000"}
       row.update("{" + field + ":" + ndate + "}"); 
    }
  });
});
</script></body></html>

有人可以告诉我如何处理上述滞后"DO IT RIGHT"的指定<script>部分吗?


如何在 React 中将字符串呈现为 HTML

我正在使用 axios 在 ReactJS 中调用 API。调用成功,但输出如下所示:

Bitcoin has inspired other alternative currencies such as 
<a href="https://www.coingecko.com/en/coins/litecoin">Litecoin</a>, 
<a href="https://www.coingecko.com/en/coins/peercoin">Peercoin</a>

如何将其呈现为HTML而不是字符串?这是我的代码

import React from 'react';
import axios from 'axios';

class API extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            data: []
        }
    }

    componentDidMount() {

        axios.get('https://api.coingecko.com/api/v3/coins/bitcoin?localization=false')
            .then(res => {
                const data = res.data;
                console.log(res.data);
                this.setState({ data, loading: false })
            })
    }

    render() {
        return (
           <div>
            {this.state.loading ? <p>Loading..</p> : 
              <p>{this.state.data.description.en}</p>
            }
          </div>
        );
    }
}

export default API;

标签: javascripttabulator

解决方案


我希望我明白你想要完成什么......

如果 < 10,则用 0 填充日期和月份。

首先获取包含数据字段的列,然后遍历该列中的每个单元格,拆分日期并更新单元格。我实际上不知道为什么表中有一个空行(这就是if (value)目的)。它是由制表符插入的东西。

function pad(num, size) {
    var s = num + "";
    while (s.length < size) s = "0" + s;
    return s;
}

var tablexxx = new Tabulator("#tablexxx", {});
var dateColumn = tablexxx.getColumn("date");
for (var cell of dateColumn.getCells()) {
  var value = cell.getValue();
  if (value) {
    value = value.split("/")
    cell.setValue(pad(value[0], 2) + "/" + pad(value[1], 2) + "/" + value[2]);
  }
}
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>

<table id="tablexxx">
 <tr>
  <th>Name</th><th>Favorite Color</th><th>date</th></tr>
 <tr><td>Bob</td><td>Yellow</td><td>1/1/2001</td>
 </tr>
 <tr><td>Michelle</td><td>Purple</td><td>2/1/2000</td>
 </tr>
</table>


推荐阅读