如何在JavaFX TableView中通过ComboBox/ChoiceBoxTableCell实现多选

嘿，这个问题我之前也碰到过！ComboBoxTableCell本身确实是为单选场景设计的，要实现多选功能，我们得自己定制一个TableCell组件才行。下面给你两种实用的实现方案：

方案1：纯JavaFX原生实现（无第三方依赖） #

核心思路是自定义TableCell，双击时弹出包含多选选项的Popup，把选中的结果绑定到数据模型的集合字段，同时在单元格里显示已选中的所有值。

步骤1：调整数据模型 #

首先需要把你的DITComparatorFileColumnConfigDO中对应列的字段从String改成List<String>，用来存储多选结果：

public class DITComparatorFileColumnConfigDO {
    // 其他原有字段...
    private List<String> selectedOptions; // 替换原来的String类型字段

    // 记得添加Getter和Setter方法
    public List<String> getSelectedOptions() {
        return selectedOptions;
    }

    public void setSelectedOptions(List<String> selectedOptions) {
        this.selectedOptions = selectedOptions;
    }
}

步骤2：实现自定义多选TableCell #

import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableCell;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.Pane;
import javafx.stage.Popup;

import java.util.ArrayList;
import java.util.List;

public class MultiSelectTableCell<S, T extends List<String>> extends TableCell<S, T> {
    private final Popup popup = new Popup();
    private final ListView<String> optionListView = new ListView<>();
    private final ObservableList<String> availableOptions; // 所有可选的选项

    public MultiSelectTableCell(ObservableList<String> availableOptions) {
        this.availableOptions = availableOptions;
        initPopup();
        setupCellEvents();
    }

    private void initPopup() {
        // 设置ListView为多选模式
        optionListView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
        optionListView.setItems(availableOptions);
        optionListView.setPrefHeight(200); // 控制下拉框高度

        // 点击Popup外部自动关闭
        popup.setAutoHide(true);
        popup.getContent().add(optionListView);
    }

    private void setupCellEvents() {
        // 双击单元格弹出多选框
        this.setOnMouseClicked(event -> {
            if (event.getClickCount() == 2 && !isEmpty()) {
                // 初始化当前选中状态
                T currentValue = getItem();
                if (currentValue != null) {
                    optionListView.getSelectionModel().clearSelection();
                    currentValue.forEach(opt -> optionListView.getSelectionModel().select(opt));
                }
                // 在单元格下方显示Popup
                popup.show(this, 
                        this.getLocalToScreen(this.getBoundsInLocal()).getMinX(),
                        this.getLocalToScreen(this.getBoundsInLocal()).getMaxY());
            }
        });

        // 监听选中变化，更新数据模型
        optionListView.getSelectionModel().getSelectedItems().addListener((ListChangeListener<String>) c -> {
            if (!popup.isShowing()) return;
            List<String> selected = new ArrayList<>(optionListView.getSelectionModel().getSelectedItems());
            commitEdit((T) selected);
        });
    }

    @Override
    protected void updateItem(T item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null || item.isEmpty()) {
            setText(null);
        } else {
            // 把选中的选项用逗号拼接显示在单元格里
            setText(String.join(", ", item));
        }
    }
}

步骤3：替换原有TableCell配置 #

// 假设你的可选选项列表是这个
ObservableList<String> options = FXCollections.observableArrayList("选项A", "选项B", "选项C", "选项D");

// 创建列并设置自定义TableCell
TableColumn<DITComparatorFileColumnConfigDO, List<String>> multiSelectColumn = new TableColumn<>("多选配置");
multiSelectColumn.setCellValueFactory(new PropertyValueFactory<>("selectedOptions"));
// 替换原来的ComboBoxTableCell为自定义的多选TableCell
multiSelectColumn.setCellFactory(col -> new MultiSelectTableCell<>(options));

// 把列加入columnList
columnList.add(multiSelectColumn);

方案2：用第三方库简化实现（ControlsFX） #

如果你不想自己写太多代码，可以用ControlsFX库的CheckComboBox，它本身支持多选，直接嵌入TableCell即可。

步骤1：引入依赖（Maven为例） #

<!-- https://mvnrepository.com/artifact/org.controlsfx/controlsfx -->
<dependency>
    <groupId>org.controlsfx</groupId>
    <artifactId>controlsfx</artifactId>
    <version>11.1.2</version>
</dependency>

步骤2：实现CheckComboBoxTableCell #

import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.scene.control.TableCell;
import org.controlsfx.control.CheckComboBox;

import java.util.List;

public class CheckComboBoxTableCell<S, T extends List<String>> extends TableCell<S, T> {
    private final CheckComboBox<String> checkComboBox;
    private final ObservableList<String> availableOptions;

    public CheckComboBoxTableCell(ObservableList<String> availableOptions) {
        this.availableOptions = availableOptions;
        this.checkComboBox = new CheckComboBox<>(availableOptions);
        setupBindings();
    }

    private void setupBindings() {
        // 绑定选中项到数据模型
        checkComboBox.getCheckModel().getCheckedItems().addListener((ListChangeListener<String>) c -> {
            if (getItem() != null) {
                getItem().clear();
                getItem().addAll(checkComboBox.getCheckModel().getCheckedItems());
            }
        });
    }

    @Override
    protected void updateItem(T item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null) {
            setGraphic(null);
            setText(null);
        } else {
            // 更新CheckComboBox的选中状态
            checkComboBox.getCheckModel().clearChecks();
            item.forEach(opt -> checkComboBox.getCheckModel().check(opt));
            setGraphic(checkComboBox);
            // 同时显示选中项的文本
            setText(String.join(", ", item));
        }
    }
}

步骤3：使用方式 #

和方案1一样，替换TableCell即可：

multiSelectColumn.setCellFactory(col -> new CheckComboBoxTableCell<>(options));

注意事项 #

1. 数据模型的字段必须改为List<String>类型，才能存储多个选中值
2. 如果需要持久化数据，要注意集合类型的序列化问题
3. 可以根据需求调整Popup/CheckComboBox的样式、大小，或者修改单元格显示选中值的格式

内容的提问来源于stack exchange，提问作者Husain Bata