Vaadin 7/8中如何将Grid的保存取消按钮移至最后编辑列下方或左对齐

方案1：CSS样式修改（成本最低，满足左对齐需求） #

默认Grid编辑器的按钮容器为右对齐，可通过覆盖默认CSS样式快速实现左对齐：

• 首先给目标Grid添加自定义样式名：

  // Vaadin 8 代码
  grid.addStyleName("left-align-editor-buttons");
  
  // Vaadin 7 代码
  grid.addStyleName("left-align-editor-buttons");
  

• 在你的主题CSS文件中添加如下样式：

  /* 编辑器按钮容器改左对齐 */
  .left-align-editor-buttons .v-grid-editor-footer {
    text-align: left !important;
    padding-left: 4px; /* 可调整和列内容的对齐偏移量 */
  }
  /* 可选：调整按钮间距 */
  .left-align-editor-buttons .v-grid-editor-footer .v-button {
    margin-right: 8px;
    margin-left: 0;
  }
  

如果样式不生效，可通过浏览器开发者工具检查编辑器按钮容器的实际类名，Vaadin 7的类名前缀可能为.v-grid-editor，微调选择器即可。

方案2：自定义编辑器按钮（完全控制位置） #

如果需要将按钮移动到指定列下方、或者行内固定位置，可隐藏默认按钮，自行添加自定义操作按钮：

1. 隐藏默认编辑器的保存/取消按钮：

   // Vaadin 8 代码
   grid.getEditor().setSaveCaption(null);
   grid.getEditor().setCancelCaption(null);
   
   // Vaadin 7 代码
   grid.setEditorSaveCaption(null);
   grid.setEditorCancelCaption(null);
   

2. 新增自定义操作列放置按钮，绑定编辑器逻辑：

   // Vaadin 8 示例，行数据类型替换为你自己的实体类
   Grid.Column<Order, Void> editActionCol = grid.addComponentColumn(order -> {
       Button saveBtn = new Button("保存", click -> grid.getEditor().save());
       Button cancelBtn = new Button("取消", click -> grid.getEditor().cancel());
       HorizontalLayout btnGroup = new HorizontalLayout(saveBtn, cancelBtn);
       btnGroup.setSpacing(true);
       // 仅当前行处于编辑状态时显示按钮
       btnGroup.setVisible(
           grid.getEditor().isOpen() 
           && grid.getEditor().getEditedItem().get().equals(order)
       );
       return btnGroup;
   });
   // 将操作列放在最后
   editActionCol.setCaption("操作");
   
   // 编辑器状态变更时刷新行显示
   grid.getEditor().addOpenListener(e -> grid.getDataProvider().refreshAll());
   grid.getEditor().addCloseListener(e -> grid.getDataProvider().refreshAll());
   

Vaadin 7可通过GeneratedColumn实现自定义组件列，逻辑一致。

内容的提问来源于stack exchange，提问作者Tony B