JavaFx實作TableView資料全選/取消全選功能

最近做了一個桌面應用，使用到TableView顯示查詢到的裝置資訊，裝置比較多，一個個勾選不友善，使用人員建議增加全選功能,本文通過使用CheckBox控件完成功能開發。

主要修改如下：

1.fxml

<CheckBox fx:id="mSelectAll" layoutX="33.0" layoutY="75.0" onAction="#selectAll"
            text="全選" />
        <TableView id="table_view" fx:id="mTable" layoutX="33.0" layoutY="100.0" prefHeight="450.0"
            prefWidth="1100.0">
            <columns>
                <TableColumn fx:id="mColumnSelect" prefWidth="58" resizable="false" sortable="false"
                    text="SELECT" visible="true" style="-fx-alignment:CENTER"></TableColumn>
                ...
            </columns>
          ...
</TableView>
           

2.Controller

@FXML
    private TableView<DeviceInfo> mTable;

    @FXML
    private TableColumn<DeviceInfo, CheckBox> mColumnSelect;

    @FXML
    private CheckBox mSelectAll;


     /**
     * 對checkbox勾選去勾選處理
     */
    public void selectAll() {
        ObservableList<DeviceInfo> items = mTable.getItems();
        if (mSelectAll.isSelected()) {
            for (DeviceInfo deviceInfo : items) {
                deviceInfo.getCb().setSelected(true);
            }
        } else {
            for (DeviceInfo deviceInfo : items) {
                deviceInfo.getCb().setSelected(false);
            }
        }
    }

    @FXML
    private void initialize() {
        ...
        Callback<TableColumn<DeviceInfo, CheckBox>, TableCell<DeviceInfo, CheckBox>>
                selectCellFactory =
                new Callback<TableColumn<DeviceInfo, CheckBox>, TableCell<DeviceInfo, CheckBox>>() {
                    @Override
                    public TableCell call(TableColumn p) {
                        TableCell cell = new TableCell<DeviceInfo, CheckBox>() {
                            @Override
                            public void updateItem(CheckBox item, boolean empty) {
                                super.updateItem(item, empty);
                                setGraphic(item);
                                if (item != null) {
                                    //初始化複選框-監聽-所有checkbox複選框都勾選則全選框勾選，所有checkbox複選框不勾選則全選框不勾選
                                    item.selectedProperty()
                                            .addListener(new ChangeListener<Boolean>() {
                                                @Override
                                                public void changed(
                                                        ObservableValue<? extends Boolean> observable,
                                                        Boolean oldValue, Boolean newValue) {
                                                    boolean booSelectAll = true;
                                                    for (DeviceInfo deviceInfo : mTable
                                                            .getItems()) {
                                                        if (!deviceInfo.getCb().isSelected()) {
                                                            booSelectAll = false;
                                                            break;
                                                        }
                                                    }
                                                    mSelectAll.setSelected(booSelectAll);
                                                }
                                            });
                                }
                            }
                        };
                        return cell;
                    }
                };
        mColumnSelect.setCellFactory(selectCellFactory);
        // 初始化所有checkbox複選框
        mColumnSelect.setCellValueFactory(cellData -> cellData.getValue().getCb().getCheckBox());
        ...
    }
           

Controller檔案中通過FXML注解控件及進行選擇列的初始化。

其中對CheckBox進行封裝

public class Checkbox {
    private CheckBox checkbox = new CheckBox();

    public ObservableValue<CheckBox> getCheckBox() {
        return new ObservableValue<CheckBox>() {
            @Override
            public void addListener(ChangeListener<? super CheckBox> listener) {

            }

            @Override
            public void removeListener(ChangeListener<? super CheckBox> listener) {

            }

            @Override
            public CheckBox getValue() {
                return checkbox;
            }

            @Override
            public void addListener(InvalidationListener listener) {

            }

            @Override
            public void removeListener(InvalidationListener listener) {

            }
        };
    }

    public Boolean isSelected() {
        return checkbox.isSelected();
    }

    public void setSelected(boolean selected) {
        checkbox.setSelected(selected);
    }
}
           

測試使用的Bean

public class DeviceInfo {
    /**
     * 是否選中
     */
    private Checkbox cb = new Checkbox();

	...
	
    public Checkbox getCb() {
        return cb;
    }

    public void setSelected(Checkbox cb) {
        this.cb = cb;
    }
    
}
           

備注：以上代碼，與全選功能無關的功能代碼已經略去。

運作效果：

checkbox實作全選，取消全選效果視訊

微信掃描關注更精彩