Question

如何获得所有者绘制树？我在树中绘制每个节点的地方？

我需要的是拥有一行最多包含3个超链接的文本。每个超链接都需要触发一个事件，然后我可以弹出一个菜单或窗口，该菜单或窗口基于点击的节点以及点击的3个链接中的哪一个。

我还希望最后有一个位图，它是一个（x）类型的关闭按钮。如果位图不可能，这可以只是文本[X]。

如何做到这一点？或者我应该问，可以这样做吗？

Answer 1

可以通过模板完成。请查看此示例：http://demos.kendoui.com/web/treeview/templates.html

Answer 2

使用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);
});

JSFiddle在http://jsfiddle.net/OnaBai/hv4FV/1

中显示它

如何获得所有者绘制树？

2 个答案: