从包含 JSON 的 PHP 页面填充 Tabulator 表

Question

我是编程和制表新手。我有一个显示我的 JSON 结果的 PHP 页面。我只是想在不同页面上的制表符表格中查看此结果。

JSON 结果的格式是这样的，它位于一个名为 proxystatus.php 的页面上。

{ "0": {
    "hostid": "10610",
    "proxy_hostid": "10609",
    "host": "PIDMPRX-DEV",
    "status": "0",
    "disable_until": "0",
    "error": "",
    "available": "1",
    "errors_from": "0",
    "lastaccess": "0",
    "ipmi_authtype": "-1",
    "ipmi_privilege": "2",
    "ipmi_username": "",
    "ipmi_password": "",
    "ipmi_disable_until": "0",
    "ipmi_available": "0",
    "snmp_disable_until": "0",
    "snmp_available": "1",
    "maintenanceid": "0",
    "maintenance_status": "0",
    "maintenance_type": "0",
    "maintenance_from": "0",
    "ipmi_errors_from": "0",
    "snmp_errors_from": "0",
    "ipmi_error": "",
    "snmp_error": "",
    "jmx_disable_until": "0",
    "jmx_available": "0",
    "jmx_errors_from": "0",
    "jmx_error": "",
    "name": "0955-PIDM-PRX",
    "flags": "0",
    "templateid": "0",
    "description": "0955\ \ Company Name",
    "tls_connect": "1",
    "tls_accept": "1",
    "tls_issuer": "",
    "tls_subject": "",
    "tls_psk_identity": "",
    "tls_psk": "",
    "proxy_address": "",
    "auto_compress": "1"
}}

我的制表符表格代码如下，它在一个名为dash.php

的页面上

var table = new Tabulator("#proxyStatus", {
    height:"100%",
    layout:"fitColumns",
    placeholder:"Gathering Proxy Status...", 
        data:'<?=$proxyStatus?>',
        columns:[
            {title:"Status", field:"status", sorter:"string", width:200},
            {title:"Available", field:"available", sorter:"number", formatter:"progress"},
            {title:"Last Access", field:"lastaccess", sorter:"string"},
            {title:"Name", field:"name", formatter:"star", align:"center", width:100},
            {title:"Maintenance Status", field:"maintenance_status", sorter:"string", sortable:false},
            {title:"Maintenance Type", field:"maintenance_type", sorter:"date", align:"center"},
            {title:"Maintenance ID", field:"maintenanceid", align:"center", formatter:"tickCross", sorter:"boolean"},
        ],
    });

Answer 1

您应该在列数组中添加所有列，或者只是在构造函数中使用 autoColumns:true，如提到的here 我做了这个Jsfiddle 以便您理解

const table = new Tabulator("#example-table", {
  height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata1, //assign data to table
  layout: "fitData", //fit columns to width of table (optional)
  autoColumns: true,

});