在剑道 UI 树视图项旁边添加图像不起作用

Add Images next to Kendo UI treeview items is not working

本文关键字:添加 图像 不起作用 视图 UI      更新时间:2023-09-26

我一直在尝试添加条件图像,以便仅在 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;
        }
    }
}
  1. 我有一个现有的有孩子:"Id"所以我把它注释掉了
  2. 我不明白传入的"节点",它甚至来自哪里?
  3. 如果我的代码类型中有或没有子级,这种类型的代码/逻辑是否可以用于添加可选图像?
  4. 好的,所以我"尝试"的几种类型的模板如下

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

然后是几种类型的脚本

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

并且还尝试过

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

需要添加模板定义

<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/

所选答案使用模板是正确的。 但是,您可以定义很多删除类,例如 .删除链接在你的 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;
}

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