如何从 html table 加载嵌套数据

Question

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

You can define the columns in the usual way with the columns option, or you can set them as th elements in the thead of a table.

Any rows of data in the tbody of the table will automatically be converted to tabulator data in displayed in the resulting table.

You can set options parameters directly in the HTML by using tabulator- attributes on the table and th elements, these will then be set as configuration options on the 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 table世代.

我不是 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>

如何从 html table 加载嵌套数据

How to load nested data from html table

javascript

html

tabulator