Kendo ui Kendo UI网格层次结构如何通过单击行字段之一获取子项（详细信息）ID
当我单击其中一行而不是使用expand row时，我试图获取所有子项（详细信息）ID 我想单击其中一个细节行并获取所有细节ID 我尝试从click事件调用detailInit，但出现错误。一种获取数组中所有子元素的方法？我正在尝试让ID呼叫其他服务。下面是一个代码示例Kendo ui Kendo UI网格层次结构如何通过单击行字段之一获取子项（详细信息）ID,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,当我单击其中一行而不是使用expand row时，我试图获取所有子项（详细信息）ID 我想单击其中一个细节行并获取所有细节ID 我尝试从click事件调用detailInit，但出现错误。一种获取数组中所有子元素的方法？我正在尝试让ID呼叫其他服务。下面是一个代码示例 <body> <div id="example"> <div id="grid"></div> <script>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title",
title: "Detail"
}
]
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>
</body>
$（文档）.ready（函数（）{
var元素=$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
页面大小：6，
对,，
服务器排序：true
},
身高：600，
可排序：是的，
pageable:对，
detailInit:detailInit，
数据绑定：函数（）{
this.expandRow（this.tbody.find（“tr.k-master-row”）.first（））；
},
栏目：[
{
字段：“名字”，
标题：“名字”，
宽度：“110px”
},
{
字段：“姓氏”，
标题：“姓氏”，
宽度：“110px”
},
{
字段：“国家”，
宽度：“110px”
},
{
字段：“城市”，
宽度：“110px”
},
{
字段：“标题”，
标题：“细节”
}
]
});
});
函数detailInit（e）{
$（“”）.appendTo（e.detailCell）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
对,，
对,，
是的，
页面大小：10，
筛选器：{字段：“EmployeeID”，运算符：“eq”，值：e.data.EmployeeID}
},
可滚动：false，
可排序：是的，
pageable:对，
栏目：[
{字段：“OrderID”，宽度：“70px”}，
{字段：“船舶国家”，标题：“船舶国家”，宽度：“110px”}，
{字段：“发货地址”，标题：“发货地址”}，
{字段：“船名”，标题：“船名”，宽度：“300px”}
]
});
}
当我单击某个详细信息行时，我希望获得该行中的所有详细信息ID。请帮助我如何做到这一点。我想要订单ID。我已经尝试了几种方法，但我无法实现我想要的。正如@JonathanBuchanan所说，如果您不打算显示详细的网格，那么就没有使用它的点。只需要在选择行时加载数据 为此，您必须将一个函数绑定到定义数据源的
changevar element = $("#grid").kendoGrid({
...
selectable: true,
change : function(e) {
// Get the item from the model corresponding to the selected row.
var item = this.dataItem(this.select());
// Load orders for an Employee
loadOrdersByEmployeeId(item.EmployeeID);
},
...
});
loadOrdersByEmployeeIdfunction loadOrdersByEmployeeId(employeeID) {
// Define a DataSource that reads Orders for an Employee given its ID
var ds = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: employeeID }
});
// Fetch data and
ds.fetch(function (data) {
// Extract OrderID and save it in an array
var orders = [];
$.each(data.items, function (idx, elem) {
orders[idx] = elem.OrderID;
});
// Display Orders
alert("orders:" + JSON.stringify(orders));
});
}
您可以在此处看到此操作：所以您根本不想显示该数据？您只想检索通常会出现在细节行嵌套网格中的订单ID？如果是这种情况，您甚至不需要在网格中设置详细信息行。您只需执行一个Ajax调用即可获得所需的过滤数据。谢谢各位，我通过传递ID使用Ajax调用解决了这个问题。