Vaadin 7.1项目样式生成器

我在格式化Vaadin树中的顶级节点时遇到问题。我理解使用ItemStyleGenerator为特定节点设置ccs样式。我使用以下代码执行此操作：

        this.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
            @Override
            public String getStyle(Tree source, Object itemId) {
                if (source.isRoot(itemId)) {
                    return "toplevel";
                } else {
                    return null;
                }
             }
         });

CSS如下所示：

        .v-tree-node-toplevel {
            border: 1px solid #d8d9d9;
            background: #fff;
            @include border-radius(6px);
        }

结果是，根节点及其所有子节点具有相同的背景颜色，并且边框位于顶层周围，并且其所有子节点和节点图标都丢失

我的目标是只格式化根节点

当我将顶层样式设置为子节点时，它的格式与预期一致

有人能帮忙吗？谢谢

---

Bernhard将CSS更改为：

    .v-tree-node-caption-toplevel {
        border: 1px solid #d8d9d9;
        background: #fff;
        @include border-radius(6px);
    }

如果只想在文本后面设置样式，而不想在树的整个宽度后面设置样式，请使用以下方法：

    .v-tree-node-caption-toplevel span {
        CSS stuff...
    }

（标题的文本部分包含在v-tree-node-caption元素的范围内。）

---

这里有一个（不是很详细）的解释发生了什么：

Vaadin树中的扩展节点（带子节点）实际上由大约3个不同的div组成。首先是container div，它是v-tree-node。然后是v-tree-node-caption，它是一个内部div，包含节点的名称和图标，这可能是您想要的样式。最后是v-tree-node-children，它包含下面的所有子节点。ItemStyleGenerator不仅将样式应用于v-tree-node，还将样式应用于v-tree-node-caption和v-tree-node-children

这是将顶级样式应用于项目时HTML的基本外观：

<div class="v-tree-node v-tree-node-toplevel">
    <div class="v-tree-node-caption v-tree-node-caption-toplevel">
        node1, the best node!
    </div> //end of caption
    <div class="v-tree-node-children v-tree-node-children-toplevel">
        ...
        Other divs (child nodes)
        ...
    </div> //end of children
</div> // end of node

---

如果替代v形树节点上的背景样式，将丢失图像（箭头）。您可以改为使用背景色样式仅覆盖透明部分，但正如我前面指出的，v-tree-node元素同时包含标题和子元素，因此您的背景色在任何子节点后面都是可见的（并且稍微向左，即使设置子节点背景色的样式）.

Hi-ktbiz，非常感谢mutch的帮助和解释，这些东西是如何工作的。你从哪里获得这些知识？Vaadins文档很好，但我在那里找不到这些细节。不客气。我与同样的问题斗争了一段时间，终于注意到ItemStyleGenerator正在将样式应用于其他cla如果我不得不猜测的话，我会说Vaadin文档（关于小部件的客户端结构）是稀疏的，因为它经常更改，他们希望能够在不破坏人员项目的情况下更改它的显示方式（这实际上是瓦丁的1/2点）当然这只是CSS。。。

    .v-tree-node {
        url("../reindeer/tree/img/arrows.png") no-repeat scroll 6px -10px transparent;
    }