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

Question

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

所以我想显示一个删除图标，逻辑是否不包含children。

我正在阅读有关模板的信息，并尝试了其中的一些模板，但我最终失去了所有数据的显示，要么显示 "undefined" 要么图像损坏（我可以修复那个损坏的图像，但是只显示损坏的图像肯定不行。

我的代码是这样的

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");

确定更新：

我发现了一些我非常感兴趣的代码，想知道它是否可以 "work"

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" 所以我把它注释掉了
我不明白传入的 "node"，它是从哪里来的？
如果我的代码类型中有或没有 children，这种类型的代码/逻辑是否可以用于添加可选图像？

好的，下面是我"tried"的几种模板

 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>

Answer 1

需要添加模板定义

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

并将删除操作绑定到 link (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/

Answer 2

所选答案正确，有模板。但是你可以定义很多删除 class 例如.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;
}

但选择的答案肯定会奏效。

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

Add Images next to Kendo UI treeview items is not working

javascript

treeview

kendo-ui

kendo-treeview