版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
最近因项目开发需要，需要开发一个小工具对项目设备进行管理，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 {@Overridepublic 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中进行实例化，具体提现在：
@FXMLprivate Button mBtnDelete;@FXMLprivate TableView mTable;@FXMLprivate TextField mTxtName;@FXMLprivate TextField mTxtSex;@FXMLprivate TableColumn<Student, Boolean> mColumnSelect;@FXMLprivate TableColumn<Student, String> mColumnName;@FXMLprivate TableColumn<Student, String> mColumnSex;
事件控制可以通过fxml配置：
上图将Delete Add 按钮绑定对应的事件：onDelete和onAdd,事件处理实现在Controller.java中对于的方法中。
@FXMLpublic void onDelete(ActionEvent event) {deleteStudents();}@FXMLpublic 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>>() {@Overridepublic 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>() {@Overridepublic 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
