如何在制表符中显示嵌套列表数据

Question

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

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) {
    }
});
}

响应 class 文件具有如下嵌套数据：主要 Class 组列表：

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

嵌套 Class :

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>();
    }
}

嵌套 Class FoodDetailViewModel :

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

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

    public int CombinedCount { get; set; }
}

我希望我的 table 显示如下数据：

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

有人可以帮忙吗？谢谢。

Answer 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"},
];

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

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

如何在制表符中显示嵌套列表数据

How to display nested list data in tabulator

javascript

asp.net-mvc

jquery

html-table

tabulator