如何在 kendo-UI 调度程序中的资源中添加超链接答案

【问题标题】：How to add hyperlink in resources in kendo-UI scheduler如何在 kendo-UI 调度程序中的资源中添加超链接
【发布时间】：2016-04-21 09:54:52
【问题描述】：

我设置了一个调度程序（时间线视图），它可以生成一个看起来像所附图像的界面。

[![scheduler_screenshot][1]][1]

调度程序代码的资源部分如下所示：

, resources: [
        {
                field: "loca_ky"
                    , name: "Locations"
                    , dataSource: [
                        {text:"CHAR above entrance doors", value:1},
                        {text:"BELLIARD Passerelle", value:2},
                        {text:"BERL Schuman", value:3}
                    ]
                    , title: "Location"
                }
]

我希望用户能够找到有关位置的更多信息（例如“入口门上方的 CHAR”等），因此希望在文本周围提供一个超链接，或者添加一个带有超链接的图标。

我该怎么做？

对答案的回应

嗨，杰伊什

回复。方法1.脚本失败后添加新函数，因为我已经在使用调度程序的“数据绑定”节点作为函数。见以下代码：

, dataBound: function(e) {
    // hide the times row from the date/time header:
    var view = this.view();
    view.datesHeader.find("tr:last").prev().hide();
    view.timesHeader.find("tr:last").prev().hide();

    // Switch the colour of the reservation depending on stat_ky
    $('div.k-event').removeClass('special-event'); // Remove the widget default colour.
    $('div.k-event').addClass('eventRequested'); // Add back the eventRequested colour, which we use for every stage up to BOOKED.
    e.sender._data.forEach(function(eventDetails) {
        if (eventDetails['stat_ky'] == 5) {
           // Switch the colour to eventAccepted for BOOKED requests (stat_ky=5).
           $('div.k-event[data-uid="'+eventDetails['uid']+'"]').addClass('eventAccepted');
        }
    });
}

我应该把你的代码放在这个函数中吗？

对答案的回应，2

嗨，杰伊什

是的，这确实很好用！

最后一个障碍。在您的示例中，这里是资源的数据源：

dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
        { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
    ],

你可以像这样使用 element.html() 获得“文本”：

element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");

如何引用资源的“价值”？

【问题讨论】：

是的，请将给定函数的代码放入您现有的数据绑定方法/函数中。
请看原帖的最新回复

标签： kendo-ui kendo-scheduler

【解决方案1】：

您可以通过以下两种不同的方法来实现。

方法一：手动将资源文本转成超链接

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.timezones.min.js"></script>
</head>
<body>
    <div id="example" class="k-content">
        <div id="scheduler"></div>
    </div>
    <script>
        $(function () {
            $("#scheduler").kendoScheduler({
                date: new Date("2013/6/13"),
                startTime: new Date("2013/6/13 07:00 AM"),
                height: 600,
                views: [
                    "day",
                    { type: "week", selected: true },
                    "month",
                    "agenda",
                    "timeline"
                ],
                timezone: "Etc/UTC",
                dataBound: scheduler_dataBound,
                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/meetings",
                            dataType: "jsonp"
                        },
                        update: {
                            url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
                            dataType: "jsonp"
                        },
                        create: {
                            url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
                            dataType: "jsonp"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "meetingID",
                            fields: {
                                meetingID: { from: "MeetingID", type: "number" },
                                title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                                start: { type: "date", from: "Start" },
                                end: { type: "date", from: "End" },
                                startTimezone: { from: "StartTimezone" },
                                endTimezone: { from: "EndTimezone" },
                                description: { from: "Description" },
                                recurrenceId: { from: "RecurrenceID" },
                                recurrenceRule: { from: "RecurrenceRule" },
                                recurrenceException: { from: "RecurrenceException" },
                                roomId: { from: "RoomID", nullable: true },
                                attendees: { from: "Attendees", nullable: true },
                                isAllDay: { type: "boolean", from: "IsAllDay" }
                            }
                        }
                    }
                },
                group: {
                    resources: ["Rooms", "Attendees"],
                    orientation: "vertical"
                },
                resources: [
                    {
                        field: "roomId",
                        name: "Rooms",
                        dataSource: [
                            { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
                            { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
                        ],
                        title: "Room"
                    }
                ]
            });
        });
        // Below function is converting text into hyperlink
        function scheduler_dataBound(e) {
            $("#scheduler").find(".k-slot-cell").each(function () {
                var element = $(this);
                if (element != null) {
                    if (element.context.textContent.length > 2) {
                        element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");
                    }
                }
            });
        }


    </script>


</body>
</html>

方法二：使用模板

Demo

如果有任何问题，请告诉我。

【讨论】：

请看原帖回复
请看原帖的最新回复