为树项设置CSS类，保留已应用于其他树项的CSS

Question

我有一棵树，包含完成申请的步骤和子步骤。选择树项目后，将在其旁边打开一个表单页面。填写表单并单击下一个表单，并成功验证表单填写后，下一个树将被选中，前一个树将标记为勾号，指定此子步骤已完成。我希望我清除了我的问题。请建议我实现同样的目标。任何帮助将不胜感激。

Answer 1

可以使用

https://vaadin.com/api/7.2.2/com/vaadin/ui/Tree.ItemStyleGenerator.html：

例如：这标记了当前具有样式done的所有步骤：

    final steps = ['Step 1', 'Step 2', 'Step 3'].asImmutable()
    def currentStep = 0

    final tree = new Tree()
    tree.setItemStyleGenerator({ Tree source, Object itemId ->
        steps.findIndexOf{it==itemId}<currentStep ? 'done' : ''
    } as Tree.ItemStyleGenerator)
    steps.each{ tree.addItem(it) }
    tree.setSelectable(true)
    tree.value = steps.first()

    final nextButton = new Button('Next', {
        currentStep = (currentStep+1)%steps.size()
        tree.value = steps[currentStep]
    } as Button.ClickListener)

    final layout = new HorizontalLayout(tree, nextButton)

的CSS：

.v-tree-node-done {
  background-color: green;
}