kendo-treeview - Kendo Tree 图标

Question

如何在同一页面上使用不同图标显示两棵树:

.k-treeview .k-minus {
   background: url('../images/k-minus.png') center center;
}

.k-treeview .k-plus {
   background: url('../images/k-plus.png') center center;
}

任何帮助都会很棒。

Answer 1

这个问题有点不确定，但我会尽力帮助你。

首先，要在 treeView 中显示图像，你必须选择:

• Sprites - 您为要显示的所有图像提供 CSS 类。所有都可以在同一个图像文件中，如下所示:http://demos.kendoui.com/content/web/treeview/coloricons-sprite.png
• 图像 - 您为单个文件中的每个图像提供 url:http://demos.kendoui.com/content/web/treeview/mail.png
  
  

假设您的站点中有两个 treeView，它们的名称不同，例如 TreeView1 和 TreeView2。如果这个 treeViews 相似但只需要有不同的图标，更好的解决方案是 sprites 选项，最简单的方法是准备 2 个不同的图像并提供 css 来显示它，例如:

#TreeView1 .k-sprite {
    background-image: url("../../content/web/treeview/coloricons-sprite.png");
}

#TreeView2 .k-sprite {
    background-image: url("../../content/web/treeview/different-sprite.png");
}

.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }

现在你可以有 2 个相同但名称不同的 treeViews，例如:

$("#TreeView1").kendoTreeView({
    dataSource: [{
        text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
            {
                text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                    { text: "about.html", spriteCssClass: "html" },
                    { text: "index.html", spriteCssClass: "html" },
                    { text: "logo.png", spriteCssClass: "image" }
                ]
            },
        ]
    }]
});

当然，如果您更喜欢图像选项，您只需在每个 treeView dataSourve 中为所有项目描述不同的图像 url，就像这样:

$("#TreeView1").kendoTreeView({
    dataSource: [
        {
            text: "Inbox", imageUrl: "../../content/web/treeview/mail.png",
            items: [
                { text: "Read Mail", imageUrl: "../../content/web/treeview/readmail.png" }
            ]
        },
        {
            text: "Drafts", imageUrl: "../../content/web/treeview/edit.png"
        },
    ]
});

$("#TreeView2").kendoTreeView({
    dataSource: [
        {
            text: "Inbox", imageUrl: "../../content/web/treeview/pdf.png",
            items: [
                { text: "Read Mail", imageUrl: "../../content/web/treeview/jpg.png" }
            ]
        },
        {
            text: "Drafts", imageUrl: "../../content/web/treeview/html.png"
        },
    ]
});

我基于这个 kendoUI 演示:http://demos.telerik.com/kendo-ui/treeview/images .希望对您有所帮助。