如何从 html 表中加载嵌套数据

Question

我来找你是因为我在我的 Laravel 项目中使用了 Tabulator 库，并且我在操作嵌套数据时遇到了一些困难。要加载 HTML Tabulator Table ，我必须通过 HTML Table 和 JS 端的对象数组来完成。在 JS 方面，我知道该怎么做，但我无法通过 HTML 表加载。在documentation 中，它说：

您可以使用 columns 选项以通常的方式定义列，也可以将它们设置为表格头部的元素。

表格tbody中的任何数据行都会自动转换成制表数据显示在结果表格中。

您可以直接在 HTML 中通过使用 table 和 th 元素上的 tabulator- 属性设置选项参数，然后将这些设置为 table 上的配置选项。

不幸的是，通过 HTML 元素传递的属性似乎非常有限。因为在 JS 端我们必须使用如下对象来添加数据（包括嵌套数据）：

[
    {id:1, name:"Billy Bob", age:"12", "_children":[
        {id:2, name:"Mary May", age:"1"}, //child rows nested under billy bob
        {id:3, name:"Christine Lobowski", age:"42"},
        {id:4, name:"Brendon Philips", age:"125", "_children":[
            {id:5, name:"Margret Marmajuke", age:"16"}, //child rows nested under brendon philps
            {id:6, name:"Frank Peoney", age:"12"},
        ]},
    ]},
    {id:7, name:"Jenny Jane", age:"1"},
    {id:8, name:"Martha Tiddly", age:"42", "_children":[
        {id:9, name:"Frasier Franks", age:"125"}, //child row nested under martha tiddly
    ]},
    {id:10, name:"Bobby Green", age:"11"},
]

但在 HTML Tabulator Table 方面，我完全不知道。文档中没有提到任何内容。但是我尝试了类似的方法但没有成功：

<table id="mytable">
    <thead>
        <tr>
            <th tabulator-field="data0">Data 0</th>
            <th tabulator-field="data1">Data 1</th>
            <th tabulator-field="data2">Data 2</th>
            <th tabulator-field="_children"></th>
        </tr>
    </thead>
    <tbody>
        @foreach ($orderlines as $orderline)
        <!-- @foreach -> syntaxe blade blade syntax that is unique to Laravel -->
        <tr>
            <td>{{ $object->getData0() }}</td>
            <td>{{ $object->getData1() }}</td>
            <td>{{ $object->getData2() }}</td>
            <td>[
                {data0:1, data1:"Billy Bob", data2:"12", "_children":[
                {data0:2, data1:"Mary May", data2:"1"}, //child rows nested under billy bob
                {data0:3, data1:"Christine Lobowski", data2:"42"},
                {data0:4, data1:"Brendon Philips", data2:"125", "_children":[
                {data0:5, data1:"Margret Marmajuke", data2:"16"}, //child rows nested under brendon philps
                {data0:6, data1:"Frank Peoney", data2:"12"},
                ]},
                ]},
                ]</td> <!-- example of json object -->
        </tr>
        @endforeach
    </tbody>
</table>
<script>
    new Tabulator("#mytable", {
        dataTree:true
    });
</script>

如果有人有想法我会感兴趣:)

Answer 1

如果我正确理解您的情况，我现在的建议是尝试将数据输出为 JSON，然后让 Tabulator 处理整个 HTML 表格生成。

我不能 100% 确定这种方法是否适合您，但在类似这样的伪代码中

<div id="container"></div>
<script>
    const data = `{{ $orderlines }}`
    const table = new Tabulator("#example-table", {
        data: data,
        dataTree:true,
        dataTreeStartExpanded:true,
        columns:[
            {title:"Name",     field:"name",     width:200},
            {title:"Location", field:"location", width:150},
            // Descriptions of your data columns here
        ],
    });
    console.log(table);
</script>