剑道树图标

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.c​​om/content/web/treeview/coloricons-sprite.png
• 图片-您在单个文件中为每个图片提供url：http : //demos.kendoui.c​​om/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; }

现在，您可以拥有两个相同但名称不同的图标的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 。希望对您有所帮助。