在 Kendo UI 树视图项目旁边添加图像不起作用答案

【问题标题】：Add Images next to Kendo UI treeview items is not working在 Kendo UI 树视图项目旁边添加图像不起作用
【发布时间】：2016-03-14 17:52:34
【问题描述】：

我一直在尝试添加条件图像，以便仅在 kendoUI 树视图节点中的父节点为空时删除。

所以我想要一个删除图标显示它是否不包含任何子项的逻辑。

我正在阅读有关模板的信息，并尝试了其中的一些模板，但最终丢失了所有数据的显示，要么显示“未定义”，要么显示损坏的图像（我可以修复损坏的图像，但它只显示损坏的图像肯定行不通。

我的代码是这样的

var serviceRoot = "/Report"; 
                            homogeneous = new kendo.data.HierarchicalDataSource({
                                transport: {
                                    read: {
                                        url: serviceRoot + "/GetReportGroupAssignments", //"/LoadReportTree", // "/Employees",
                                        dataType: "json" //"jsonp"
                                    }
                                },
                                schema: {
                                    model: {
                                        id: "Id" //"ReportGroupName"
                                        ,
                                        hasChildren: "Id"
                                    }
                                }
                            });

                            var treeview = $("#treeview").kendoTreeView({
                                //expanded: true,
                                template: kendo.template($("#treeview-template").html()),
                                dragAndDrop: true,
                                dataSource: homogeneous,
                                dataTextField: "ReportGroupName" // "Id"  //"name" //"id" // "FullName"
                                //,
                                //change: function(e) {
                                //    console.log("Change", this.select());
                                //}
                            }).data("kendoTreeView");

好的更新：

我发现了一些我非常感兴趣的代码，想知道它是否可以“工作”

schema: {
    model: {
        children: "folder",
        hasChildren: function (node) {
            var hasChildren =  (node.folder && node.folder.length > 0);
            if (hasChildren === true) {
                node.spriteCssClass = "folder";
            } else {
                node.spriteCssClass = "html";
            }
            return hasChildren;
        }
    }
}

我有一个现有的 hasChildren: "Id" 所以我把它注释掉了
我不明白传入的“节点”，它甚至来自哪里？
如果我的代码类型中有或没有孩子，这种类型的代码/逻辑是否可以用于添加可选图像？

好的，下面是我“尝试”的几种模板

 template: kendo.template($("#treeview-template").html()),

然后是几种类型的脚本

<script id="treeview-template" type="text/kendo-ui-template">
                        <a class='show-link' href='\#'><image src="/imageUrl"></a>
                    </script>

也试过了

  <script id="treeview-template" type="text/kendo-ui-template">
                        #: item.text #
                        # if (!item.items) { #
                        <a class='delete-link' href='\#'></a>
                        # } #
                    </script>

【问题讨论】：

你定义了treeview-template吗？
我尝试了几种方法。让我更新我的问题，因为在评论中显示代码等是有限的，而且很难看
@PanagiotisPnevma - 好的更新问题。非常感谢
你能显示和数据源，你能在dojo中创建一个演示吗？
好吧，我正在尝试制作一个新的小提琴，我没有显示 hasChildren jsfiddle.net/josephackerman/gkqc66ot/1

标签： javascript kendo-ui treeview kendo-treeview

【解决方案1】：

需要添加模板定义

<script id="treeview-template" type="text/kendo-ui-template">
    #: item.ReportGroupName #
    # if (!item.ReportGroupNameResID) { #
        <a class='delete-link' href='\#'>X</a>
    # } #
</script>

还将删除操作绑定到链接 (X)

$(document).on("click", ".delete-link", function(e) {
    e.preventDefault();
    var treeview = $("#treeview").data("kendoTreeView");
    treeview.remove($(this).closest(".k-item"));
});

在此处查看修改后的演示 http://jsfiddle.net/gkqc66ot/2/

【讨论】：

我试图这样做图标显示了，但它不删除，为什么？
糟糕，修复了（没有类 delete-link 显然有 javascript 来删除要从树视图中删除的代码

【解决方案2】：

使用模板选择的答案是正确的。但是，您可以定义很多删除类，例如.delete-link 在你的 CSS 中

像这样：

 .delete-link {
    width: 12px;
    height: 12px;
    background: transparent url("../content/web/treeview/close.png") no-repeat 50% 50%;
    overflow: hidden;
    display: inline-block;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    margin: 2px 0 0 3px;
    -webkit-border-radius: 5px;
    -mox-border-radius: 5px;
    border-radius: 5px;
}

但是选择的答案肯定会起作用。

【讨论】：