我创建了一个示例剑道树列表:http://dojo.telerik.com/akAwe/4在 示例中,如何使“协议名称”列的子单元格可点击?
谢谢。
我创建了一个示例剑道树列表:http://dojo.telerik.com/akAwe/4在 示例中,如何使“协议名称”列的子单元格可点击?
谢谢。
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script type="text/x-kendo-template" id="template">
<a href='https://www.google.com/?test=#: ProtocolName #'>#: ProtocolName #</a>
</script>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ "id": 61, "parentId": 1, "ProtocolName": "P2", "SeriesDescription": "P2 " },
{ "ExamStart": "9/19/2015 8:00 AM", "id": 1, "ProtocolName": "P2", "SeriesDescription": "P2 ", "parentId": null },
{ "id": 62, "parentId": 2, "ProtocolName": "P1", "SeriesDescription": "P1 " },
{ "id": 63, "parentId": 2, "ProtocolName": "P2", "SeriesDescription": "P2 ", },
{ "ExamStart": "9/19/2015 8:13 AM", "id": 2, "ProtocolName": "P1, P2", "SeriesDescription": "P1 , P2 ", "parentId": null }
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
columnMenu: true,
dataBound: onDataBound,
columns: [{
field: 'ExamStart',
title: 'Date/Time'
}, {
field: 'ProtocolName',
title: 'Protocol names',
sortable: false,
template: $("#template").html()
}, {
field: 'SeriesDescription',
title: 'Series descriptions',
sortable: false
}]
});
});
function onDataBound(arg) {
$(".k-treelist-group").each(function (index) {
$(this).find('a').replaceWith($(this).find('a').text());
});
}
</script>
</div>
</body>
</html>
更新1:
<script type="text/x-kendo-template" id="template">
<a href='localhost:20327/\\#/dose/test'>#: ProtocolName #</a>
</script>
让我知道是否有任何问题。