如何在制表器中显示嵌套列表数据答案

【问题标题】：How to display nested list data in tabulator如何在制表器中显示嵌套列表数据
【发布时间】：2020-08-17 12:40:19
【问题描述】：

我的屏幕上有一个搜索和列表面板。对于列表页面，我使用的是制表符，因为我想显示嵌套数据。

js文件代码：

function onCheckClick() {
var url = "/SomeController/SomeAction/";
$.ajax({
    url: url,
    type: "Post",
    success: function (result) {
        var table = new Tabulator("#exampleTable", {
            dataTree: true,
            data: result.data.GroupList,
            dataTreeStartExpanded: true,
            dataTreeElementColumn: "GroupName",
            dataTreeChildField: "childRows",
            columns: [
                { title: "Group Name", field: "GroupName", width: 200, responsive: 0 },
                { title: "%Range", field: "Range", width: 150 },
                { title: "Count Nutrition", field: "FoodCount", width: 150 },
                { title: "Combined", field: "CombinedCount", hozAlign: "center", width: 150 },
            ],
        });
    },
    error: function (reponse) {
    }
});
}

响应类文件有如下嵌套数据：主类群列表：

public class GroupListViewModel
{
    public List<GroupDetailEntityViewModel> GroupList { get; set; }
    public GroupListViewModel()
    {
        GroupList = new List<GroupDetailEntityViewModel>();
    }
}

嵌套类：

public class GroupDetailEntityViewModel
{ 
    public int GroupID { get; set; }
    public string GroupName { get; set; }

    public List<FoodDetailViewModel> _children { get; set; }

    public GroupDetailEntityViewModel()
    {
        _children = new List<FoodDetailViewModel>();
    }
}

嵌套类 FoodDetailViewModel ：

public class FoodDetailViewModel 
{
    
    public int ID { get; set; }

    public string Range { get; set; }
    
    public int FoodCount { get; set; } 

    public int CombinedCount { get; set; }
}

我希望我的表格显示如下数据：

但这并没有发生。仅呈现组名称，隐藏嵌套数据。我提到了制表符链接，此后我的嵌套列表使用_children 命名约定=> Tabulator example

有人可以帮忙吗？谢谢。

【问题讨论】：

Tabulator 期望 _children 属性上有一个对象数组，您正在传入一个对象
我建议在这里使用制表符的groupBy 功能而不是nestedData ..
@OliFolkerd 我在控制台打印数据，它只将其视为一个数组。
@Sachin 我会尝试，但你能告诉我这在 Tabulator 中是如何工作的吗？
控制台会将它显示为一个数组，因为它可以像这样交互 List 对象。制表符要求数据是一个数组，而不是你所拥有的可迭代对象。如果对象上的 Array.isArray() 不返回 true 那么它将不起作用

标签： javascript jquery asp.net-mvc html-table tabulator

【解决方案1】：

您遇到的问题是因为您将列表传递给制表符而不是数组。

虽然List 对象在技术上是可迭代的，但它们与制表符所需的数组不同。

这显示了您的数据必须呈现给制表器的结构，才能使其发挥作用。你会注意到 childRows 属性有一个分配给它的数组：

var tableDataNested = [
    {name:"Oli Bob", location:"United Kingdom", gender:"male", col:"red", dob:"14/04/1984", childRows:[
        {name:"Mary May", location:"Germany", gender:"female", col:"blue", dob:"14/05/1982"},
        {name:"Christine Lobowski", location:"France", gender:"female", col:"green", dob:"22/05/1982"},
        {name:"Brendon Philips", location:"USA", gender:"male", col:"orange", dob:"01/08/1980", childRows:[
            {name:"Margret Marmajuke", location:"Canada", gender:"female", col:"yellow", dob:"31/01/1999"},
            {name:"Frank Harbours", location:"Russia", gender:"male", col:"red", dob:"12/05/1966"},
        ]},
    ]},
    {name:"Jamie Newhart", location:"India", gender:"male", col:"green", dob:"14/05/1985"},
    {name:"Gemma Jane", location:"China", gender:"female", col:"red", dob:"22/05/1982", childRows:[
        {name:"Emily Sykes", location:"South Korea", gender:"female", col:"maroon", dob:"11/11/1970"},
    ]},
    {name:"James Newman", location:"Japan", gender:"male", col:"red", dob:"22/03/1998"},
];

按原样存储数据并没有错，尤其是当您需要在应用程序的其余部分中使用其他函数来操作数据时。但为了让制表符正确理解它，您需要先将其映射到上述格式，然后再将其传递给制表符。

有关如何在制表器中使用嵌套数据的完整详细信息，请参阅Data Tree Documentation

【讨论】：