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

wfsdck30  于 2023-11-17  发布在  jQuery
关注(0)|答案(1)|浏览(124)

我的屏幕上有一个搜索和列表面板。对于列表页面,我使用制表器,因为我想显示嵌套的数据。
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
有谁能帮帮忙吗?谢谢。

brqmpdu1

brqmpdu11#

你遇到的问题是因为你传递的是列表而不是数组。
虽然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正确理解它,您需要在将其传递给Tabulator之前将其Map到上面列出的格式。
有关如何在Tabulator中使用嵌套数据的完整详细信息,请参见Data Tree Documentation

相关问题