赞
踩
最近做了一个桌面应用,使用到TableView显示查询到的设备信息,设备比较多,一个个勾选不方便,使用人员建议增加全选功能,本文通过使用CheckBox控件完成功能开发。
主要修改如下:
- <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实现全选,取消全选效果视频
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。