我正在尝试使用角度剑道UI网格创建一个表,该表显示一个json文件中的摘要表,单击摘要表中的一行应展开以显示来自其他json文件的详细值。它们都有一个公共的ID字段。我实现了类似于(https://docs.telerik.com/kendo-ui/knowledge-base/grid-master-row-click-expand-collapse-detail)的方法,但是问题是我选择的详细表中的任何行都显示了所有行,而不仅仅是与所选ID对应的行。
我已经创建了与上述URL类似的脚本,但是可用的帮助大多是jQuery / Ajax,但是此页面是更大应用程序的一部分,我仅限于使用angularJS和kendoUI。
(<any>$("#alerts-table-cpu")).kendoGrid({
dataSource: {
transport: {
read: {
url: './assets/count_summary.json',
type: "get",
dataType: "json"
}
},
pageSize: 30
},
selectable: "multiple",
allowCopy: true,
height: 700,
columnMenu: true,
scrollable: {
virtual: true
},
pageable: {
pageSizes: [30, 50, 100, 500, 1000, "all"]
},
autowidth: true,
resizable: true,
reorderable: true,
filterable: {
mode: "row",
operators: {
string: {
contains: "Contains",
eq: "Equal to",
neq: "Not equal to",
startswith: "Starts with",
doesnotcontain: "Doesn't contain"
}
}
},
groupable: true,
sortable: true,
detailInit: detailInit,
dataBound: function(e) {
var grid = e.sender;
grid.tbody.find("tr.k-master-row").click(function(e) {
var target = $(e.target);
if ((target.hasClass("k-i-expand")) || (target.hasClass("k-i-collapse"))) {
return;
}
var row = target.closest("tr.k-master-row");
var icon = row.find(".k-i-expand");
if (icon.length) {
grid.expandRow(row);
} else {
grid.collapseRow(row);
}
})
},
columns: [
{ field: "rcrd_date", title: "Date", width: 60 },
{ field: "occurences", title: "spikes", width: 60 }
],
});
function detailInit(e) {
(<any>$("<div/>").appendTo(e.detailCell)).kendoGrid({
dataSource: {
transport: {
read: {
url: './assets/detailed.json',
type: "get",
dataType: "json"
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: [
{field: "id", operator: "eq", value: e.id}
]
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "timestamp", title: "Timestamp", width: 150 },
{ field: "value", title: "spike", width: 80 }
]
});
}
当我在摘要表中单击一个日期时,它将在该日期扩展所有时间戳,但会显示所有日期的所有时间戳。