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

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

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

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",{ title: "Combined",field: "CombinedCount",hozAlign: "center",],});
    },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

有人可以帮忙吗？谢谢。

解决方法

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

尽管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",col:"green",dob:"22/05/1982"},{name:"Brendon Philips",location:"USA",col:"orange",dob:"01/08/1980",childRows:[
            {name:"Margret Marmajuke",location:"Canada",col:"yellow",dob:"31/01/1999"},{name:"Frank Harbours",location:"Russia",dob:"12/05/1966"},]},{name:"Jamie Newhart",location:"India",dob:"14/05/1985"},{name:"Gemma Jane",location:"China",dob:"22/05/1982",childRows:[
        {name:"Emily Sykes",location:"South Korea",col:"maroon",dob:"11/11/1970"},{name:"James Newman",location:"Japan",dob:"22/03/1998"},];

按原样存储数据没有错，特别是如果您需要其他功能来在应用程序的其余部分中对其进行操作时。但是，为了使制表器正确理解它，您需要先将其映射为上述格式，然后再将其传递给制表器。

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

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

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

解决方法

相关推荐