制表器：通过 Ajax 加载 Google 表格数据答案

【问题标题】：tabulator: Loading Google Sheets data via Ajax制表器：通过 Ajax 加载 Google 表格数据
【发布时间】：2019-03-13 21:09:58
【问题描述】：

我试了几天，不知道如何将 Google 表格文档加载到 Tabulator 中。

我做了什么：

从 Google 表格文档中获取 JSON 数据
- https://spreadsheets.google.com/feeds/list/1Ze31_SUFd0ZyqeG1mt1qrEU61onnYhmI9mR1BC1pM7Y/od6/public/values?alt=json
在此页面上添加了 Tabulator 库
- https://www.avpec1910.nl/pages/98/Alle-baanrecords/
但仍然出现以下错误：
- Ajax 加载错误 - 连接错误：0
- Ajax 加载错误：响应 {type:"opaque", url:"", redirected: false, status: 0, ok: false, ...}
我怎样才能将字段 'entry' > 'gsx$naam' -- 'Joan van den Akker - KAV Holland' 放入列中（键 'gsx$naam' 有一个对象 '{"$t" :"Joan van den Akker - KAV Holland"}' 作为值，但我只需要名称...）

我的制表符代码：

    var table = new Tabulator("#baanrecords", {
        ajaxConfig:{
            mode: 'no-cors',
            method:'GET',
            credentials: 'same-origin',
            headers: {
                'Content-type': 'application/json; charset=UTF-8',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
        },
        ajaxURL: 'https://spreadsheets.google.com/feeds/list/1Ze31_SUFd0ZyqeG1mt1qrEU61onnYhmI9mR1BC1pM7Y/od6/public/values?alt=json',
        height:'400px',
        layout:'fitColumns',
        autoColumns:true,
        placeholder:'De records worden geladen, een moment...',
        index: 'onderdeelnaam',
        columns:[
            {title:"Onderdeel", field:"gsx$onderdeelnaam", sorter:"string", width:200},
            {title:"Prestatie", field:"gsx$prestatie", sorter:"number", formatter:"progress"},
            {title:"Eenheid", field:"gsx$prestatieeenheid", sorter:"string"},
            {title:"Naam", field:"gsx$naam", sorter:"string", align:"left", width:100},
            {title:"Categorie", field:"gsx$categorie", sorter:"string", sortable:true},
            {title:"Datum", field:"gsx$datum", sorter:"date", align:"left"},
            {title:"Plaats", field:"gsx$plaats", align:"right", sorter:"string"},
        ],
        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.entry; //return the tableData property of a response json object
        },
    });
    table.setData("https://spreadsheets.google.com/feeds/list/1Ze31_SUFd0ZyqeG1mt1qrEU61onnYhmI9mR1BC1pM7Y/od6/public/values?alt=json");

不幸的是，我无法弄清楚我做错了什么。提前感谢您的帮助。

【问题讨论】：

我也遇到了同样的错误。你找到解决办法了吗？我没有看到下面的答案被接受，所以不确定你是否使用过它并且它有效？

标签： ajax google-sheets tabulator

【解决方案1】：

    bldgChange: function () {
      console.log(this.selected)
      this.tabulator.parameter = this.selected
      fetch('<API-URL>?Building=' + this.selected)
        .then(response => response.json())
        .then(json => this.tabulator.setData(json.recordset))
    },

我放弃了 ajaxURL，因为太多人遇到问题并且没有真正的解决方案。这是我为我需要的东西创建的方法。也许您可以根据需要对其进行改造。

【讨论】：