javascript - 如何在制表器中显示嵌套列表数据

问题描述

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

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我的嵌套列表使用了命名约定 =>制表符示例

有人可以帮忙吗？谢谢。

标签： javascriptjqueryasp.net-mvchtml-tabletabulator

解决方案

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

虽然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 中使用嵌套数据的完整详细信息，请参阅数据树文档

javascript - 如何在制表器中显示嵌套列表数据

问题描述

解决方案

推荐阅读