制表符：从 JSON 文件加载数据

Question

我希望 Tabulator 自动从 JSON 文件加载数据。
我用一个按钮让它工作。
我已经阅读了这里的问答

我也在这里阅读了文档。
http://tabulator.info/docs/4.4/data#array-initial
（顺便说一句，我期待 ajaxURL 文档显示一个 URL 以文件名结尾而不是“/now”...类似于 $("#div1").load("demo_test.txt"); ）

我不是专业开发人员，所以请对我温柔一点。

这是 JSON 文件的内容（名为“test_Array.txt”，与 HTML 在同一目录中）。

[
{"name": "Oli Bob", "age": "12", "col": "red", "dob": "14/05/1982"},
{"name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"},
{"name": "Christine Lobowski", "age": "42", "col": "green", "dob": "22/05/1982"},
{"name": "Brendon Philips", "age": "125", "col": "orange", "dob": "01/08/1980"},
{"name": "Margret Marmajuke", "age": "16", "col": "yellow", "dob": "31/01/1999"}
]

它通过了验证 https://jsonlint.com/

这里是HTML

<!DOCTYPE html>

<html lang="en">
<head>
    <link href="https://unpkg.com/tabulator-tables@5.1.3/dist/css/tabulator_site.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1.3/dist/js/tabulator.min.js"></script>
    <meta charset="utf-8" />
    <title>tabulator3</title>
</head>
<body>

<div id="example-table"></div>

    <script>
        //create Tabulator on DOM element with id "example-table"
        var table = new Tabulator("#example-table", {
        height:205, 
        // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        //layout:"fitDataFill",//fit columns to fit data and width of table (optional)
        //data:tableData, //set initial table data
            columns:[ //Define Table Columns
                {title:"Name", field:"name", width:150},
                {title:"Age", field:"age", align:"left", formatter:"progress"},
                {title:"Favourite Color", field:"col"},
                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
            ]
        });
      
    //load sample data into the table
    table.setData("test_Array.txt")
    </script> 

</body>
</html>

我做错了什么？
谢谢。

Answer 1

首先，我会说您已经向 v4.4 文档发布了 link，但使用的是 Tabulator 5.1 版。阅读正确的文档以开始阅读是绝对值得的:)

接着您遇到的问题是因为从 5.0 版开始 Tabulator 现在有一个异步启动过程，这意味着您不能在实例化 table 后直接调用 setData，您必须等待 tableBuilt 事件：

table.on("tableBuilt", function(){
    table.setData("./test_Array.txt");
});

更重要的是，如果您只是直接从文件中加载数据，那么在构建 table 之后无需设置数据，您可以使用 ajaxURL 设置选项加载正在构建时将数据导入 table：

var table = new Tabulator("#example-table", {
    ajaxURL:"./test_Array.txt",
    ... other table options
});

另外，如果文本文件仅包含 JSON 数据，那么约定是以 .json 而不是 .txt

结束文件

Answer 2

对于任何其他 novices/amateurs ....按照 Oli 的建议，我有一个可行的解决方案如下：

创建一个名为 text_Array.json 的 JSON 文件，其中包含以下内容：

[
{"name": "Oli Bob", "age": "12", "col": "red", "dob": "14/05/1982"},
{"name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"},
{"name": "Christine Lobowski", "age": "42", "col": "green", "dob": "22/05/1982"},
{"name": "Brendon Philips", "age": "125", "col": "orange", "dob": "01/08/1980"},
{"name": "Margret Marmajuke", "age": "16", "col": "yellow", "dob": "31/01/1999"}
]

创建一个名为 tabulator3.html 的 html 文件，其中包含以下内容。将 JSON 文件放在与 HTML 文件相同的文件夹中，它将起作用：

<!DOCTYPE html>

<html lang="en">
<head>
    <link href="https://unpkg.com/tabulator-tables@5.1.3/dist/css/tabulator_site.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1.3/dist/js/tabulator.min.js"></script>

<!-- the line below is necessary for the Date sorter to work - it is buried in the v5.1 documentation here
http://tabulator.info/docs/5.1/sort#func-builtin -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script>
    <meta charset="utf-8" />
    <title>tabulator3</title>
</head>
<body>

<div id="example-table"></div>

    <script>
        //create Tabulator on DOM element with id "example-table"
        var table = new Tabulator("#example-table", {
        ajaxURL:"test_Array.json",        //load sample data into the table
        height:205, 

            columns:[ //Define Table Columns
                {title:"Name", field:"name", width:150},
                {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
                {title:"Favourite Color", field:"col"},
                {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
            ]
        });
      
   </script> 

</body>
</html>

谢谢，奥利！

制表符：从 JSON 文件加载数据

Tabulator: load data from a JSON file

javascript

tabulator