0

I have a problem formatting toplevel-nodes in a Vaadin-Tree. I understand using the ItemStyleGenerator to set ccs-Style for particular nodes. I did this with following code:

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

The CSS is as follows:

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

And the result is, that the root-node and all its child nodes have the same background-color and the border is around the toplevel- and all its child-nodes and the node icon is missing

My goal is to format just the root-node.

When i set the toplevel-style to a child node it is formatted as expected.

Can somebody help? Thanks.

Bernhard

4

1 回答 1

2

将您的 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 组成。首先你有容器 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-tree-node 的背景图像。每个 v-tree-node（canHaveChildren() == true）都有一个背景样式（透明，带有箭头图像）。 

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

If you override the background style on a v-tree-node, you will lose the image (the arrow). What you could do instead is to use the background-color style to only override the transparent part, but as I pointed out earlier, the v-tree-node element contains both the caption and children elements, so your background color will be visible behind any child nodes (and slightly to the left, even if you style the background-color of the child node).

于 2013-08-01T16:46:48.067 回答