时间戳

首页 > 解决方案 > 将本地 JSON 数据呈现到 Tabulator 表中

javascript - 将本地 JSON 数据呈现到 Tabulator 表中

问题描述

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

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

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

我已经包含了一个显示 HTML 和 JS的JS Fiddle 。

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]
      },
...
...

标签： javascriptjqueryjsontabulator

解决方案

您遇到的问题是因为数据不是 Tabulator 所期望的格式。

Tabulator 需要一组行数据对象，根据您正在寻找的列定义：

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

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

推荐阅读