treeview - How can I get an owner draw tree?

Question

How can I get an owner draw tree? One where I draw each node in the tree?

What I need is to have a line of text that has up to 3 hyperlinks in it. Each hyperlink needs to fire an event where I can then pop up a menu or window that is based on the node clicked and which of the 3 links was clicked.

I would also like to have a bitmap at the end that's a (x) type close button. This can be just the text [X] if a bitmap is impossible.

How can this be done? Or should I ask, can it be done?

Answer 1

用于templates定义树的每个节点的外观，您可以定义任何可能的HTML和JavaScript。

示例：定义一个节点，我们在其中显示每个节点text和三个 HTML 锚点 ( a)。然后，我们将一个click事件绑定到每个链接，如下所示：

模板定义

<script id="treeview-template" type="text/kendo-ui-template">
    <div class="ob-item">
        <div>#: item.text #</div>
        This is <a class='link1' href='\#'>Link 1</a>
        and this is <a class='link2' href='\#'>Link 2</a>
        and finally <a class='link3' href='\#'>Link 3</a>
    </div>
</script>

定义TreeView：

var treeview = $("#treeview").kendoTreeView({
    template: kendo.template($("#treeview-template").html()),
    dataSource: [
        ...
    ]
});

绑定事件：

$(document).on("click", ".link1", function (e) {
    treeview = $("#treeview").data("kendoTreeView");
    var node = $(this).closest(".k-item");
    var item = treeview.dataItem(node);
    alert("Clicked on link1 of node with id: " + item.id + " and text: " + item.text);
});
$(document).on("click", ".link2", function (e) {
    treeview = $("#treeview").data("kendoTreeView");
    var node = $(this).closest(".k-item");
    var item = treeview.dataItem(node);
    alert("Clicked on link2 of node with id: " + item.id + " and text: " + item.text);
});
$(document).on("click", ".link3", function (e) {
    treeview = $("#treeview").data("kendoTreeView");
    var node = $(this).closest(".k-item");
    var item = treeview.dataItem(node);
    alert("Clicked on link3 of node with id: " + item.id + " and text: " + item.text);
});

在http://jsfiddle.net/OnaBai/hv4FV/1中显示的 JSFiddle

Answer 2

它可以通过模板完成。检查这个例子：http ://demos.kendoui.c​​om/web/treeview/templates.html