将本地JSON数据呈现到制表器表中

Question

我正在尝试在Tabulator表中实现本地JSON数据。 我特别想显示obj.File.Name JSON元素。

我可以将数据呈现到常规表中，但是当合并Tabulator时，数据根本无法呈现。 我认为问题出在JS Snippet Tabulator Section中列出的Tabulator Section ，但我不确定100％。 我对使用Tabulator感兴趣，因为它提供了许多功能。

除非我读错了它，否则Tabulator 上关于加载数据的文档似乎不太关注本地文件，而更多地关注外部URL，这就是为什么我来这里询问它的原因。

我包括了一个显示HTML和JS的JS小提琴 。

JS代码段：

import $ from 'jquery';

import JSONfile from '../../../public/JSONfile.json';
import { basename } from 'path';

var Tabulator = require('tabulator-tables');

var categories = '';
var tableRes = '';

export default class {
    constructor() {
        this.loadData();
        this.loadTableData();
    }

loadTableData() {
    let tableRes = JSONfile.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {

      return {
        // "FileName": obj.FileLeafRef,
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name
        }
      });

///// Tabulator Section /////

      let tableData = tableRes;

      let table = new Tabulator("#km-table-id", {
        data:tableData,
        columns:[
          {title:"", field:" "},
          {title:"All Templates", field:"Name"},
          {title:"My Favorites", field:"faves"}
        ],
        pagination:"local",
        paginationSize:100,
        placeholder:"No data available"
      });

      table.setData(tableData);

  } // ------------------ loadTableData


} // ------------- export default class

JSON代码段：

{
  "d": {
    "results": [
      {
        "__metadata": {
          ...
        },
        "File": {
          "__metadata": {
            ...
          },
          "Name": "Guide to Product IDs.docx"
        },
        "FileLeafRef": "Guide to Product IDs.docx",
        "ResourceType": {
          ...
          },
          "results": [
            {
              ...
            }
          ]
        },
        "EncodedAbsUrl": [redacted]
      },
...
...

Answer 1

您遇到的问题是因为数据的格式不符合Tabulator的预期。

制表符需要一个行数据对象数组，根据您的列定义，它正在寻找：

[
    {Name:"steve", faves:"this, that, the other"},
    {Name:"bob", faves:"this, that, the other"},
]

文档中介绍了如何将本地数据加载到表中