用本地 json 文件填充制表符 table

Question

我想将 json 文件加载到我的 Tabulator table。
programs.json 与 html 文件位于同一目录中。
我的 html 代码正在呈现 table 但我无法加载本地存储的 .json 文件。
这里有很多文档http://tabulator.info/docs/4.9/data and http://tabulator.info/docs/3.5#set-data

programs.json内容如下：

           [{
            "name": "Stomachache",
            "freq": "10000,5000,880,3000,95",
            "db": "XTR",
            "info": "Bauchschmerzen"
        }, {
            "name": "Headache",
            "freq": "380,2720,2489,2170,1800,1600,1550,880,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660",
            "db": "CAF",
            "info": "Kopfschmerzen"
        }, {
            "name": "Toothache",
            "freq": "3000,95,1550,880,787,776,727,650,625,600,28,35,28,110,100,60,428,680",
            "db": "XTR",
            "info": "Zahnschmerzen"
        }]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon"  type="image/png" href="favicon.png">
    <meta charset="utf-8">    
    <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>  
  </head>
  <body>  

   <div id="programs"></div>
    <script type="text/javascript">
    
        var table = new Tabulator("#programs", {
            ajaxURL:"./programs.json", // http://tabulator.info/docs/4.9/data
            //ajaxContentType:"json",
            height: 326,
            layout: "fitColumns",
            pagination: "local",
            paginationSize: 10,
            tooltips: true,
            index: "name",          
            columns: [{
                    title: "Name",
                    field: "name",
                    sorter: "string",                    
                    headerFilter: "input"
                },
                {
                    title: "Frequencies",
                    field: "freq",
                    sorter: "string",                    
                    headerFilter: "input"
                },                  
                {
                    title: "Database",
                    field: "db",
                    sorter: "string",                       
                    editor: "select",
                    width: 90,
                    headerFilter: true,             
                },               
                {
                    title: "Programm Info",
                    field: "info",
                    sorter: "string",
                    headerFilter: "input"
                },
            ],
            ajaxResponse:function(url, params, response){
              //url - the URL of the request
              //params - the parameters passed with the request
              //response - the JSON object returned in the body of the response.

              return response.data; //pass the data array into Tabulator
           },
        });
    </script>   
</body>
</html>

Answer 1

fetch() 不支持本地文件访问。但是浏览器会通过标签，所以如果你让你的 programs.json 成为正确的 JS ...

programs.json :
let setData = [ { .... } ];

programs.html :
<html>
    <head>
...
        <script type="text/javascript" src="programs.json"></script>
    </head>
    <body>
...
        <script>
            new Tabulator("#programs",{
                data:setData,
...
            });
        </script>
    </body>
</html>

Answer 2

当我将 html 和 json 文件上传到网络服务器时，出现以下错误 ->“错误：'setData' 未定义”。与按下“运行代码片段”按钮时出现的错误相同
有趣的是，如果你在 PC 上本地打开这个 html，它工作正常。为什么运行在网络服务器上不起作用有什么建议吗？

programs.json:

let setData = [
           {
            "name": "Stomachache",
            "freq": "10000,5000,880,3000,95",
            "db": "XTR",
            "info": "Bauchschmerzen"
        }, {
            "name": "Headache",
            "freq": "380,2720,2489,2170,1800,1600,1550,880,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660",
            "db": "CAF",
            "info": "Kopfschmerzen"
        }, {
            "name": "Toothache",
            "freq": "3000,95,1550,880,787,776,727,650,625,600,28,35,28,110,100,60,428,680",
            "db": "XTR",
            "info": "Zahnschmerzen"
        }];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">    
    <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>  
  
    <script type="text/javascript" src="programs.json"></script>
  </head>
  <body> 
<div id="programs"></div>
    <script>
        var table = new Tabulator("#programs", {
            data:setData,
            height: 326,
            layout: "fitColumns",
            pagination: "local",
            paginationSize: 10,
            tooltips: true,
            index: "name",          
            columns: [{
                    title: "Name",
                    field: "name",
                    sorter: "string",                    
                    headerFilter: "input"
                },
                {
                    title: "Frequencies",
                    field: "freq",
                    sorter: "string",                    
                    headerFilter: "input"
                },                  
                {
                    title: "Database",
                    field: "db",
                    sorter: "string",                       
                    editor: "select",
                    width: 90,
                    headerFilter: true,             
                },               
                {
                    title: "Programm Info",
                    field: "info",
                    sorter: "string",
                    headerFilter: "input"
                },
            ],
        });
    </script>   
</body>
</html>

用本地 json 文件填充制表符 table

Fill Tabulator table with local json file

html

javascript

json

tabulator