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

这个问题有点不明确，但我会尽力帮助你。
首先，要在树形图中显示图像，你必须选择：

Sprites - 您为要显示的所有图像提供css类。所有内容都可以在同一个图像文件中：http://demos.kendoui.com/content/web/treeview/coloricons-sprite.png
图片 - 您在单个文件中为每个图片提供网址：http://demos.kendoui.com/content/web/treeview/mail.png

假设您的网站中有两个不同名称的树视图，例如TreeView1和TreeView2。如果这个treeViews相似但只需要有不同的图标，更好的解决方案是精灵选项，最简单的方法是准备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个相同但名称不同的图标树视图，例如：

$("#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中的所有项目描述不同的图像网址，例如：

$("#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。我希望它有所帮助。

剑道树图标

1 个答案: