JavaFx之TableView表格操作----增删改及行多选_javafx tableview 多选

     最近因项目开发需要，需要开发一个小工具对项目设备进行管理，JavaFx作为java桌面程序开发的一个利器，成为首选。

IDEA集成开发工具为我们提供开发JavaFx项目的环境，支持可视化编程，布局支持拖拽，这一点和android开发很类似。

JavaFX中提供了一些类让我们更方便的操作表格，最重要的类有TableView、TableColumn和TableCell。本文demo使用IDEA工具，展示TableView布局，实现对表格数据的增删改以及表格行多选功能。

        IDEA默认创建的工程其实就是MVC模式的典型代表。

  使用IDEA创建JavaFx项目默认会创建布局文件sample.fxml,Controller.java以及Main.java ，根据业务需要，model层我这边以Student.java作为示例。 

  demo使用的布局文件sample.fxml：

<?xml version="1.0" encoding="UTF-8"?>​<?import javafx.scene.control.Button?><?import javafx.scene.control.TableColumn?><?import javafx.scene.control.TableView?><?import javafx.scene.control.TextField?><?import javafx.scene.layout.AnchorPane?><?import javafx.scene.layout.HBox?><?import javafx.scene.layout.VBox?>​<AnchorPane id="table_content" prefHeight="500.0" prefWidth="400.0"    xmlns="http://javafx.com/javafx/8.0.172-ea" xmlns:fx="http://javafx.com/fxml/1"    fx:controller="sample.Controller">    <children>        <VBox layoutX="33.0" layoutY="14.0" prefHeight="50.0" prefWidth="400.0">            <children>                <HBox prefHeight="50.0" prefWidth="350.0">                    <children>                        <Button fx:id="mBtnDelete" onAction="#onDelete" prefHeight="46.0"                            text="Delete" />                    </children>                </HBox>            </children>        </VBox>        <TableView id="table_view" fx:id="mTable" layoutX="33.0" layoutY="64.0" prefHeight="326.0"            prefWidth="350.0">            <columns>                <TableColumn fx:id="mColumnSelect" prefWidth="60" resizable="false" text="SELECT" />                <TableColumn fx:id="mColumnName" prefWidth="120" resizable="false" text="NAME" />                <TableColumn fx:id="mColumnSex" prefWidth="130.0" resizable="false" text="SEX" />            </columns>        </TableView>        <HBox layoutX="33.0" layoutY="402.0" prefHeight="50.0" prefWidth="400.0">            <children>                <TextField fx:id="mTxtName" layoutX="33.0" layoutY="402.0" prefHeight="46.0"                    prefWidth="100.0" promptText="name" />                <TextField fx:id="mTxtSex" layoutX="33.0" layoutY="402.0" prefHeight="46.0"                    prefWidth="100.0" promptText="sex" />                <Button fx:id="mBtnAdd" layoutX="33.0" layoutY="402.0" onAction="#onAdd"                    prefHeight="46.0" text="Add" />            </children>        </HBox>​    </children></AnchorPane>

  通过Main.java引用sample.fxml完成窗口绘制显示。

public class Main extends Application {​    @Override    public void start(Stage primaryStage) throws Exception{        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));        primaryStage.setTitle("TableViewDemo");        primaryStage.setResizable(false);        primaryStage.setScene(new Scene(root, 400, 600));        primaryStage.show();    }​​    public static void main(String[] args) {        launch(args);    }}

视图的控制层是通过fxml文件配置进行配置：

在sample.fxml中通过属性fx:controller配置，布局文件中以"fx:id"配置的属性都可以以注解的形式在Controller.java中进行实例化，具体提现在：

    @FXML    private Button mBtnDelete;​    @FXML    private TableView mTable;​    @FXML    private TextField mTxtName;​    @FXML    private TextField mTxtSex;​    @FXML    private TableColumn<Student, Boolean> mColumnSelect;​    @FXML    private TableColumn<Student, String> mColumnName;​    @FXML    private TableColumn<Student, String> mColumnSex;

事件控制可以通过fxml配置：

上图将Delete Add 按钮绑定对应的事件：onDelete和onAdd,事件处理实现在Controller.java中对于的方法中。

    @FXML    public void onDelete(ActionEvent event) {        deleteStudents();    }​    @FXML    public void onAdd(ActionEvent event) {        if (mTxtName.getText() != null && mTxtSex.getText() != null) {            data.add(new Student(                    mTxtName.getText(),                    mTxtSex.getText()));            mTxtName.clear();            mTxtSex.clear();        }    }​    private boolean deleteStudents() {        int size = data.size();        if (size <= 0) {            return false;        }        for (int i = size - 1; i >= 0; i--) {            Student s = data.get(i);            if (s.getSelected()) {                data.remove(s);            }        }        return true;    }

运行Main.java就可以出现桌面窗口。

 

到此为止，JavaFx工程代码结构以及运行流程介绍差不多，进入今天的正题。

通过布局文件我们已经把表格TableView创建好，表格数据的绑定代码：

        mColumnSelect.setCellValueFactory(new PropertyValueFactory<Student, Boolean>("selected"));        mColumnName.setCellValueFactory(new PropertyValueFactory<>("name"));        mColumnSex.setCellValueFactory(new PropertyValueFactory<>("sex"));        mTable.setItems(data);        mTable.setEditable(true);

1.表格数据编辑

代码实现：

        Callback<TableColumn<Student, String>,                TableCell<Student, String>> cellFactory                = (TableColumn<Student, String> p) -> new EditingCell();        mColumnName.setCellFactory(cellFactory);        mColumnSex.setCellFactory(cellFactory);        mColumnName.setOnEditCommit(                (TableColumn.CellEditEvent<Student, String> t) -> {                    ((Student) t.getTableView().getItems().get(                            t.getTablePosition().getRow())                    ).setName(t.getNewValue());                });​        mColumnSex.setOnEditCommit(                (TableColumn.CellEditEvent<Student, String> t) -> {                    ((Student) t.getTableView().getItems().get(                            t.getTablePosition().getRow())                    ).setSex(t.getNewValue());                });

这里需要指出EditingCell是自己定义的TableCell。

2.表格多行选定

利用CheckBoxTableCell，代码如下：

        mColumnSelect.setCellFactory(                CellFactory.tableCheckBoxColumn(new Callback<Integer, ObservableValue<Boolean>>() {                    @Override                    public ObservableValue<Boolean> call(Integer index) {                        final Student g = (Student) mTable.getItems().get(index);                        ObservableValue<Boolean> ret =                                new SimpleBooleanProperty(g, "selected", g.getSelected());                        ret.addListener(new ChangeListener<Boolean>() {                            @Override                            public void changed(                                    ObservableValue<? extends Boolean> observable,                                    Boolean oldValue, Boolean newValue) {                                g.setSelected(newValue);                            }                        });                        return ret;                    }                }));

需要指出的是CellFactory是自己定义的一个类，方便调用CheckBoxTableCell。

3.表格数据的增加

利用两个TextFiled接收数据的录入，数据录入点击Add按钮完成数据添加：

    public void onAdd(ActionEvent event) {        if (mTxtName.getText() != null && mTxtSex.getText() != null) {            data.add(new Student(                    mTxtName.getText(),                    mTxtSex.getText()));            mTxtName.clear();            mTxtSex.clear();        }    }

4.表格数据的删除

利用表格行多选勾选的行，点击Delete按钮对表格数据进行按行批量删除。

    private boolean deleteStudents() {        int size = data.size();        if (size <= 0) {            return false;        }        for (int i = size - 1; i >= 0; i--) {            Student s = data.get(i);            if (s.getSelected()) {                data.remove(s);            }        }        return true;    }

 

测试m使用的bean，Student.java

public class Student {    /**     * 是否选中     */    private boolean selected;    /**     * 姓名     */    private String name;    /**     * 性别     */    private String sex;​    public boolean getSelected() {        return selected;    }​    public void setSelected(boolean selected) {        this.selected = selected;    }​    public String getName() {        return name;    }​    public void setName(String name) {        this.name = name;    }​    public String getSex() {        return sex;    }​    public void setSex(String sex) {        this.sex = sex;    }​    public Student(String name, String sex) {        this.name = name;        this.sex = sex;    }}

最后运行效果如图：

 

demo代码地址：

https://github.com/TomcatXiong/JavaFxTableViewDemo

​