在 TableView 中呈现带有 cellFactory 的复选框无法正常工作

Question

我想在用户单击 table 视图上的复选框时为一系列折线图创建以下功能。项目的 table 视图具有图表系列的 ObservableList。所以控制器中的以下代码。

控制器 class 从 fxml 文件中注入以下内容。

@FXML
public TableView<Series<Number, Number>> tableViewStatisticsOverview;

@FXML
public TableColumn<Series<Number, Number>, String> tableColumnStatisticName;

@FXML
public TableColumn<Series<Number, Number>, Series<Number, Number>> tableColumnShowSeries;

@FXML
public TableColumn<Series<Number, Number>, Series<Number, Number>> tableColumnAction;

//later on the code
tableViewStatisticsOverview.setItems(chart.getData()); // chart is a linexy chart

//setting up the tableColumnShowSeries to show a checkbox and show and hide the series


tableColumnShowSeries.setCellValueFactory(
            new Callback<TableColumn.CellDataFeatures<Series<Number, Number>, Series<Number, Number>>, ObservableValue<Series<Number, Number>>>() {

                @Override
                public ObservableValue<Series<Number, Number>> call(CellDataFeatures<Series<Number, Number>, Series<Number, Number>> param) {
                    return new ReadOnlyObjectWrapper<Series<Number, Number>>(param
                            .getValue());
                }
            });

tableColumnShowSeries.setCellFactory(
        new TableCollumnCellWithCheckBoxFactoryWrapper());

作为 table 的数据，我将整个系列设置在 table 的行上，以便能够根据复选框的值设置系列的节点是否可见

TableCollumnCellWithCheckBoxFactoryWrapper class

package com.nokia.avalanche.client.util.fxhelper;

import javafx.scene.chart.XYChart.Series;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.util.Callback;

public class TableCollumnCellWithCheckBoxFactoryWrapper implements
    Callback<TableColumn<Series<Number, Number>, Series<Number, Number>>, TableCell<Series<Number, Number>, Series<Number, Number>>> {


@Override
public TableCell<Series<Number, Number>, Series<Number, Number>> call(TableColumn<Series<Number, Number>, Series<Number, Number>> param) {
        return new CheckBoxCell();
    }

}

CheckBoxCell class

public class CheckBoxCell
    extends TableCell<Series<Number, Number>, Series<Number, Number>> {

Logger LOG = LogManager.getLogger(CheckBoxCell.class);

private HBox checkBoxContainer;
private CheckBox checkBoxShow;

public CheckBoxCell() {
    checkBoxContainer = new HBox();
    checkBoxShow = new CheckBox("");
    checkBoxContainer.setAlignment(Pos.CENTER);
    checkBoxShow.setSelected(true);
    checkBoxContainer.getChildren().add(checkBoxShow);

}



private void addListenerOnCheckBox(Series<Number, Number> series) {

      checkBoxShow.setOnAction(new EventHandler<ActionEvent>() {

          @Override
          public void handle(ActionEvent arg0) {
              LOG.debug("Show checkbox selected: "
                    + checkBoxShow.isSelected());              
              series.getNode().setVisible(checkBoxShow.isSelected());
              if (series.getNode().isVisible()) {
                  series.getNode().toFront();
                  for (Data<Number, Number> data : series.getData()) {
                      data.getNode().toFront();
                  }
              } else {
                  series.getNode().toBack();
                  for (Data<Number, Number> data : series.getData()) {
                      data.getNode().toBack();
                  }
              }          
          }
      });


    }

    @Override
    protected void updateItem(Series<Number, Number> series, boolean empty) {
        super.updateItem(series, empty);
        if (!empty && series != null) {

            addListenerOnCheckBox(series);

            LOG.debug("Series is not empty");
            LOG.debug("Updating item for series with name: " + series.getName());
            setGraphic(checkBoxContainer);
        } else {
            LOG.debug("Series is empty");
            setGraphic(null);
        }

    }

}

问题是，在图表上添加了一些系列后，它们显示在 table 上并尝试单击复选框，多一个复选框的行为与我正在单击的复选框相同根据我单击的第一个，它会将其状态从选中更改为未选中。调试表明，当代码从操作处理程序进入 handle 方法时，复选框是同一个对象，因此取消选中一个会使另一个取消选中。我错过了什么吗？还有其他方法可以使用复选框并捕获复选框状态的变化吗？

Answer 1

我能看到两件事：

您应该在复选框上设置一次侦听器，从构造函数。使用 getItem() 获取当前系列由单元格显示。
在 updateItem 中，您需要更新复选框以匹配是否显示该系列的状态。

所以我认为：

public class CheckBoxCell
    extends TableCell<Series<Number, Number>, Series<Number, Number>> {

Logger LOG = LogManager.getLogger(CheckBoxCell.class);

private HBox checkBoxContainer;
private CheckBox checkBoxShow;

public CheckBoxCell() {
    checkBoxContainer = new HBox();
    checkBoxShow = new CheckBox("");
    checkBoxContainer.setAlignment(Pos.CENTER);
    checkBoxShow.setSelected(true);
    checkBoxContainer.getChildren().add(checkBoxShow);
    addListenerOnCheckBox();
}



private void addListenerOnCheckBox() {

      checkBoxShow.setOnAction(new EventHandler<ActionEvent>() {

          @Override
          public void handle(ActionEvent arg0) {

              Series<Number, Number> series = getItem();

              if (series == null)  {
                  return ;
              }

              LOG.debug("Show checkbox selected: "
                    + checkBoxShow.isSelected());              
              series.getNode().setVisible(checkBoxShow.isSelected());
              if (series.getNode().isVisible()) {
                  series.getNode().toFront();
                  for (Data<Number, Number> data : series.getData()) {
                      data.getNode().toFront();
                  }
              } else {
                  series.getNode().toBack();
                  for (Data<Number, Number> data : series.getData()) {
                      data.getNode().toBack();
                  }
              }          
          }
      });


    }

    @Override
    protected void updateItem(Series<Number, Number> series, boolean empty) {
        super.updateItem(series, empty);
        if (!empty && series != null) {

            checkBoxShow.setSelected(series.getNode().isVisible());

            LOG.debug("Series is not empty");
            LOG.debug("Updating item for series with name: " + series.getName());
            setGraphic(checkBoxContainer);
        } else {
            LOG.debug("Series is empty");
            setGraphic(null);
        }

    }

}

未测试，所以可能还有其他我遗漏的东西...

在 TableView 中呈现带有 cellFactory 的复选框无法正常工作

Rendering a check box with a cellFactory in TableView doesn't work as it should

checkbox

tableview

custom-cell

javafx-8