制表符：字段索引（多维数组）

Question

I want to create tables by Tabulator.

my data is:

[{
    "trade_symbol": "aaa",
    "volume": 159842,
    "real": 0.051560379918588875,
    "date_time": "2020-07-06T09:34:51",
    "value": 0.12543630017452,
    "result": [{
            "title": ["R1"],
            "alias_title": ["R"],
            "value": 0.12543630017452,
            "value_type": 2
        }, {
            "title": ["RV"],
            "alias_title": ["B"],
            "value": true,
            "value_type": 4
        }
    ]
}, {
    "trade_symbol": "bbb",
    "volume": 144216,
    "real": 0.04997030626961907,
    "date_time": "2020-07-06T09:34:44",
    "value": 0.271246764452114,
    "result": [{
            "title": ["R1"],
            "alias_title": ["R"],
            "value": 0.271246764452114,
            "value_type": 2
        }, {
            "title": ["RV"],
            "alias_title": ["B"],
            "value": true,
            "value_type": 4
        }
    ]
}, {
    "trade_symbol": "ccc",
    "volume": 1566952,
    "real": 0.04988399071925754,
    "date_time": "2020-07-04T12:29:33",
    "value": 0.057654850019478,
    "result": [{
            "title": ["R1"],
            "alias_title": ["R"],
            "value": 0.057654850019478,
            "value_type": 2
        }, {
            "title": ["RV"],
            "alias_title": ["B"],
            "value": true,
            "value_type": 4
        }
    ]
}]

The "result" field may more than 1(this is a result of search for example we may have 1 or 5 result) Now I want to use "tabulator" ( http://tabulator.info/docs/4.7 )

The number of "result" array element in all arrays is the same, but the number of it is not known.

A column must be added to our table for each resualt. Its value is in the value of Resualt item element. So we don't know the number of columns in this table.

But in Tabulator we must have only Flat data.

because "result" 's count is not fix,I can not use Flat Array. (any result must be show in new Column) and I can not use this code:

table.addColumn({title:alldata[0].result.alias_title, field:alldata[0].result.value});

and Tabulator do not support index of array in field.

How can I create table with this data?

Answer 1

Here is an example from examples :

http://tabulator.info/examples/4.7#nested-tables

var nestedData = [
    {id:1, make:"Ford", model:"focus", reg:"P232 NJP", color:"white", serviceHistory:[
       {date:"01/02/2016", engineer:"Steve Boberson", actions:"Changed oli filter"},
       {date:"07/02/2017", engineer:"Martin Stevenson", actions:"Break light broken"},
    ]},
    {id:1, make:"BMW", model:"m3", reg:"W342 SEF", color:"red", serviceHistory:[
       {date:"22/05/2017", engineer:"Jimmy Brown", actions:"Aligned wheels"},
       {date:"11/02/2018", engineer:"Lotty Ferberson", actions:"Changed Oil"},
       {date:"04/04/2018", engineer:"Franco Martinez", actions:"Fixed Tracking"},
    ]},
]

//define table
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    resizableColumns:false,
    data:nestedData,
    columns:[
        {title:"Make", field:"make"},
        {title:"Model", field:"model"},
        {title:"Registration", field:"reg"},
        {title:"Color", field:"color"},
    ],
    rowFormatter:function(row){
        //create and style holder elements
       var holderEl = document.createElement("div");
       var tableEl = document.createElement("div");

       holderEl.style.boxSizing = "border-box";
       holderEl.style.padding = "10px 30px 10px 10px";
       holderEl.style.borderTop = "1px solid #333";
       holderEl.style.borderBotom = "1px solid #333";
       holderEl.style.background = "#ddd";

       tableEl.style.border = "1px solid #333";

       holderEl.appendChild(tableEl);

       row.getElement().appendChild(holderEl);

       var subTable = new Tabulator(tableEl, {
           layout:"fitColumns",
           data:row.getData().serviceHistory,
           columns:[
           {title:"Date", field:"date", sorter:"date"},
           {title:"Engineer", field:"engineer"},
           {title:"Action", field:"actions"},
           ]
       })
    },
});

Answer 2

The number of "Result" array element in all arrays is the same, but the number of it is not known. A column must be added to our table for each result. Its value is in the value of Result item element. So we don't know the number of columns in this table. It is Not "nested-tables " in Rows. We need multi column.

enter image description here