Question

我创建了一个示例kendo treeList：http://dojo.telerik.com/akAwe/4 在该示例中，如何使“协议名称”列的子单元格可单击？

感谢。

Answer 1

请尝试使用以下代码段。

<!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>

如果有任何疑虑，请告诉我。

如何使kendo treeList单元格成为超链接？

1 个答案: