我的屏幕上有一个搜索和列表面板。对于列表页面,我使用制表器,因为我想显示嵌套的数据。
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
有谁能帮帮忙吗?谢谢。
1条答案
按热度按时间brqmpdu11#
你遇到的问题是因为你传递的是列表而不是数组。
虽然
List
对象在技术上是可迭代的,但它们与制表器所需的数组不同。这显示了你的数据必须呈现给制表器的结构,为了使它起作用。你会注意到
childRows
属性有一个数组分配给它:字符串
以您的方式存储数据并没有错,特别是如果您需要在应用程序的其他部分使用其他函数来操作它。但是为了让Tabulator正确理解它,您需要在将其传递给Tabulator之前将其Map到上面列出的格式。
有关如何在Tabulator中使用嵌套数据的完整详细信息,请参见Data Tree Documentation