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

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

响应类文件嵌套数据如下： 主要班级组名单：

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

命名约定 => 制表符示例

有人可以帮忙吗？ 谢谢。

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

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

有关如何在制表符中使用嵌套数据的完整详细信息可以在数据树文档

中找到