Question

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

所以我希望显示一个删除图标，其逻辑是否包含任何子项。

我正在阅读有关模板的内容，我尝试了其中的一些模板，最终我失去了所有数据的显示，并说出了＃34; undefined＆＃34;或破碎的图像（我可以修复那个破碎的图像，但它只显示一个破碎的图像肯定不会起作用。

我的代码看起来像这样

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

好的更新：

我找到了一些我非常感兴趣的代码，想知道它是否可以＆＃34;工作＆＃34;

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;
        }
    }
}

我有一个已存在的孩子：＆＃34; Id＆＃34;所以我评论说
我不理解＆＃34;节点＆＃34;传入，甚至来自哪里？
如果我的代码类型中有孩子或没有孩子，这种类型的代码/逻辑是否可以用于添加可选图像？

好的，我试过几种类型的模板＆＃34;在下面

 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>

并将删除操作绑定到链接（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

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

像这样：

 .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树视图项旁边添加图像不起作用

2 个答案: