Рендеринг локальных данных JSON в таблицу табулятора - PullRequest
Новая
       8

Рендеринг локальных данных JSON в таблицу табулятора

0 голосов
/ 23 января 2019

Я пытаюсь внедрить локальные данные JSON в таблицу Tabulator .Я специально хочу отобразить элемент obj.File.Name JSON.

Я могу отобразить данные в обычную таблицу, но когда я включаю Tabulator, данные вообще не отображаются.Я думаю, что проблема заключается в Tabulator Section, который указан в JS Snippet, но я не уверен на 100%.Я заинтересован в использовании Tabulator из-за функций, которые он предлагает.

Если только я не прочитал его, документы Tabulator по загрузке данных кажутся менее ориентированными на локальные файлы и больше на внешние URL-адресаВот почему я пришел спросить об этом здесь.

Я включил JS Fiddle , который показывает HTML и 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]
      },
...
...

1 Ответ

0 голосов
/ 27 января 2019

Проблема, с которой вы столкнулись, заключается в том, что данные не в том формате, который ожидает Tabulator.

Табулятору требуется массив объектов данных строк, основанный на ваших определениях столбцов, которые он ищет: 

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

Загрузка локальных данных в таблицу описана в Документации

...