Vaadin Grid Table：如何为某些列绘制边框？

Question

我正在使用 Vaadins Grid table 进行数据表示。因此，我想为 Employee-ID 列的右边界以及 name 或 name 和 surname 列的两侧画一条粗线。

结果应如下所示：

我该如何处理？

Answer 1

您需要：

将样式名称添加到您的网格组件：

Grid grid = new Grid();
grid.addStyleName("grid-column-seperators")

然后在您的 *.scss 文件中，您需要为 class .grid-column-separator 添加 css 样式，在您的网格中添加粗线正如所解释的 here

记得在部署您的应用程序之前编译 Vaadin 主题以查看预期效果。

Answer 2

从我们在您的 , update your CellStyleGenerator 中中断的地方继续处理您的其他专栏。为了简洁起见，我将只演示一个带有两个边框的列，但你会明白这个想法：

grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
    @Override
    public String getStyle(Grid.CellReference cellReference) {
        if ("c1".equals(cellReference.getPropertyId())) {
            return "green";
        } else if ("c2".equals(cellReference.getPropertyId())) {
            return "right-and-left-border";
        } else {
            return null;
        }
    }
});

...在您的 theme 文件中添加适当的样式：

.v-grid-cell.right-and-left-border {
  border-left: solid 2px black;
  border-right: solid 2px black;
}

... 你应该得到类似的东西：

Vaadin Grid Table：如何为某些列绘制边框？

Vaadin Grid Table: how to draw border for certain columns?

css

java

grid

vaadin