如何解决用本地 json 文件填充 Tabulator 表
我想将一个 json 文件加载到我的 Tabulator 表中。
program.json 与 html 文件位于同一目录中。
我的 html 代码正在呈现表格，但我无法加载本地存储的 .json 文件。
这里有很多文档 http://tabulator.info/docs/4.9/data 和 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,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660","db": "CAF","info": "Kopfschmerzen"
},{
"name": "Toothache","freq": "3000,650,625,600,28,35,110,100,60,680","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",{
title: "Database",field: "db",editor: "select",width: 90,headerFilter: true,},{
title: "Programm Info",field: "info",],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>解决方法
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>
当我将 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,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660","db": "CAF","info": "Kopfschmerzen"
},{
"name": "Toothache","freq": "3000,650,625,600,28,35,110,100,60,680","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",{
title: "Database",field: "db",editor: "select",width: 90,headerFilter: true,},{
title: "Programm Info",field: "info",],});
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。