![](/img/trans.png)
[英]How to get a different grid as child from a different row of another grid using Kendo detailInit function
[英]How to create kendo grid detailInit
我正在尝试使用detailInit函数创建剑道网格,但是我不知道如何实现它。
如何在我的grid detailsInit函数中显示address [object,Object]数据,允许用户切换以显示详细信息,并且下面是所需输出的示例:
电流输出:
Name | Phone | Address
------------------------------------------------
John Smith | (519) 420-2391 | [object Object]
------------------------------------------------
James Seth | (123) 212-3332 | [object Object]
想要的输出:
Name | Phone |
--------------------------------
John Smith | (519) 420-2391 |
--------------------------------
^ Location | no |
-----------------------------
london | 123 |
aus | 456 |
var peoples = [], address = []; peoples = [{ id: 1, name: "John Smith", phone: "(519) 420-2391", address: [{ Location: "london", no: "123" }, { Location: "aus", no: "456" }] }, { id: 2, name: "James Seth", phone: "(123) 212-3332", address: [{ Location: "Paris", no: "789" }, { Location: "ita", no: "888" }] }]; $("#grid").kendoGrid({ dataSource: { data: peoples, }, columns: [{ field: "name", title: "Name" }, { field: "phone", title: "Phone number" }, { field: "address", title: "Address" }], });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> </div> </body> </html>
只需在detailInit
事件中使用当前行的address
属性作为数据创建另一个网格detailInit
:
detailInit: function(e) {
$('<div></div>')
.appendTo($(e.detailRow))
.kendoGrid({
dataSource: {
data: e.data.address
},
columns: [{
field: "Location"
}, {
field: "no"
}]
});
}
官方演示如何做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.