Question

我想在表格中看到复选框，而不是“true”或“false”文本。 TableFieldFactory类仅为可编辑单元格生成字段。我发现只有formatProperty，我可以返回正确的unicode字符，如☑，但它看起来不太好。是否有可能在不创建计算属性的情况下生成自己的HTML元素？

Answer 1

生成的列方法用组件替换默认的“toString”：

table.addGeneratedColumn("propertyWithBoolean", new Table.ColumnGenerator() {

    @Override
    public Object generateCell(Table source, Object itemId,
            Object columnId) {
        Boolean checked = (Boolean) source.getItem(itemId).getItemProperty(columnId).getValue();
        CheckBox checkBox = new CheckBox();
        checkBox.setValue(checked);
        // don't allow user to change value
        checkBox.setEnabled(false);
        return checkBox;
    }
});

Answer 2

一种解决方案是将样式生成器添加到表中，并通过css解决此问题：

  setCellStyleGenerator(new CellStyleGenerator() {
            @Override
            public String getStyle(Table source, Object itemId, Object propertyId) {
                     if("myBooleanColumn".equals(propertyId){
                        return "true".equals(itemId) ? "checked-checkbox":"unchecked-checkbox";
                     }
                     return null;
            }
        });

然后定义你的风格：

.v-table-cell-content-unchecked-checkbox .v-table-cell-wrapper,
.v-table-cell-content-checked-checkbox .v-table-cell-wrapper{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


.v-table-cell-content-checked-checkbox .v-table-cell-wrapper{      
  background-image: url(".../checked-checkbox.png");
}
.v-table-cell-content-unchecked-checkbox .v-table-cell-wrapper{      
  background-image: url(".../unchecked-checkbox.png");
}

如果您希望复选框可编辑，您还可以在列中设置真实的Vaadin复选框。请参阅Book of Vaadin。

Answer 3

作为mstahv回答的补充，刷新checkBox字段的方法是使用table.refreshRowCache（）;

table.addGeneratedColumn("propertyWithBoolean", new Table.ColumnGenerator() {

@Override
public Object generateCell(Table source, Object itemId,
        Object columnId) {
    Boolean checked = (Boolean) source.getItem(itemId).getItemProperty(columnId).getValue();
    CheckBox checkBox = new CheckBox();
    checkBox.setValue(checked);
    // don't allow user to change value
    checkBox.setEnabled(false);
    return checkBox;
}
});
void changeColumnValue(String field, String dato)
{
    item.getItemProperty(field).setValue(dato.equals("true"));
    table.refreshRowCache(); // To refresh the checkbox value in the table
}

Vaadin表：如何使用editable = false将Boolean显示为复选框

3 个答案: