如何在Vaadin 8 Grid编辑器中为两个联动ComboBox添加监听器

嘿，我完全懂你要做的事——在可编辑Grid里搞两个联动的ComboBox，选完汽车品牌后，车型选项自动跟着更新对吧？结合你给出的代码片段，我给你整理一套完整的落地方案：

1. 先理清楚数据结构和数据源 #

首先得把品牌和车型的对应关系捋顺，要么用简单的字符串映射，要么用更规范的对象模型，这里我给你两种思路的参考：

方案A：用自定义对象（更推荐，扩展性强） #

// 汽车品牌模型
public class CarMake {
    private String name;

    public CarMake(String name) {
        this.name = name;
    }

    public String getName() { return name; }

    @Override
    public String toString() { return name; } // 让ComboBox直接显示品牌名称
}

// 汽车车型模型
public class CarModel {
    private String name;
    private CarMake make;

    public CarModel(String name, CarMake make) {
        this.name = name;
        this.make = make;
    }

    public String getName() { return name; }
    public CarMake getMake() { return make; }

    @Override
    public String toString() { return name; }
}

然后准备数据源，用Map关联品牌和对应的车型：

private final Map<CarMake, List<CarModel>> makeToModels = new HashMap<>();

// 初始化数据源（实际项目里可以从数据库/接口加载，这里用硬编码示例）
private void initDataSource() {
    CarMake toyota = new CarMake("Toyota");
    CarMake honda = new CarMake("Honda");

    makeToModels.put(toyota, Arrays.asList(
        new CarModel("Camry", toyota),
        new CarModel("Corolla", toyota)
    ));

    makeToModels.put(honda, Arrays.asList(
        new CarModel("Civic", honda),
        new CarModel("Accord", honda)
    ));
}

方案B：直接用String（快速实现） #

如果你的业务不需要复杂的对象属性，直接用字符串映射更简单：

private final Map<String, List<String>> makeToModels = new HashMap<>();

private void initDataSource() {
    makeToModels.put("Toyota", Arrays.asList("Camry", "Corolla"));
    makeToModels.put("Honda", Arrays.asList("Civic", "Accord"));
}

2. 初始化ComboBox并添加联动逻辑 #

不管用哪种数据方案，核心都是监听第一个ComboBox的选择变化，动态更新第二个的选项：

// 这里用方案A的对象类型，方案B直接换成<String>即可
ComboBox<CarMake> makeComboBox = new ComboBox<>();
ComboBox<CarModel> modelComboBox = new ComboBox<>();

// 给品牌ComboBox加载初始选项
makeComboBox.getItems().addAll(makeToModels.keySet());

// 核心联动逻辑：监听品牌选择变更
makeComboBox.valueProperty().addListener((observable, oldMake, newMake) -> {
    // 先清空车型选项并重置选中值
    modelComboBox.getItems().clear();
    modelComboBox.setValue(null);

    // 如果选中了有效品牌，加载对应车型
    if (newMake != null) {
        modelComboBox.getItems().addAll(makeToModels.get(newMake));
    }
});

3. 绑定到Grid的可编辑单元格 #

现在把这两个ComboBox绑定到Grid的编辑器里，配合Binder完成字段关联：

Grid<CarRental> grid = new Grid<>();
Binder<CarRental> binder = new Binder<>(CarRental.class);

// 品牌列的编辑器绑定
grid.addColumn(CarRental::getMake)
    .setHeader("Car Make")
    .setEditorBinding(
        binder.forField(makeComboBox)
            .bind(CarRental::getMake, CarRental::setMake)
    );

// 车型列的编辑器绑定
grid.addColumn(CarRental::getModel)
    .setHeader("Car Model")
    .setEditorBinding(
        binder.forField(modelComboBox)
            .bind(CarRental::getModel, CarRental::setModel)
    );

额外优化：编辑现有行时同步状态 #

当你编辑Grid里已有的行时，记得要同步两个ComboBox的选中状态，不然打开编辑器时车型可能不会自动匹配：

grid.editItemProperty().addListener((obs, oldItem, newItem) -> {
    if (newItem != null) {
        // 先设置品牌，触发联动加载对应车型
        makeComboBox.setValue(newItem.getMake());
        // 再设置对应的车型选项
        modelComboBox.setValue(newItem.getModel());
    }
});

内容的提问来源于stack exchange，提问作者Stephane Grenier