JavaFX表格是JavaFX中一个常用的UI组件,用于展示数据并提供交互。在JavaFX中,表格是通过TableView和TableColumn来实现的。TableView是一个可以显示多行数据的控件,而TableColumn则是表格中的列。

TableView控件

TableView是JavaFX中用于展示数据的控件,它可以显示多行数据,并且支持排序、过滤等功能。

创建TableView

要创建一个TableView,首先需要引入javafx.scene.control包,然后创建一个TableView对象:

TableView<Person> tableView = new TableView<>();

上面的代码创建了一个TableView对象,它可以显示类型为Person的对象。

添加数据

要在TableView中显示数据,需要创建一个ObservableList,并将数据添加到ObservableList中,然后将ObservableList设置为TableView的数据源:

ObservableList<Person> data = FXCollections.observableArrayList(
        new Person("张三", 20),
        new Person("李四", 25),
        new Person("王五", 30)
);
tableView.setItems(data);

上面的代码创建了一个ObservableList,其中包含了三个Person对象,并将ObservableList设置为TableView的数据源。

添加列

要在TableView中显示数据,还需要定义表格的列。可以使用TableColumn类来定义列,然后将列添加到TableView中:

TableColumn<Person, String> nameColumn = new TableColumn<>("姓名");
nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));

TableColumn<Person, Integer> ageColumn = new TableColumn<>("年龄");
ageColumn.setCellValueFactory(new PropertyValueFactory<>("age"));

tableView.getColumns().addAll(nameColumn, ageColumn);

上面的代码创建了两个列,一个是姓名列,一个是年龄列,并将列添加到TableView中。

设置表格样式

可以使用CSS来设置TableView的样式。可以为TableView设置一个CSS类,然后在CSS文件中定义样式:

tableView.getStyleClass().add("my-table");

上面的代码为TableView设置了一个CSS类名为"my-table",然后在CSS文件中定义该类的样式:

.my-table {
    -fx-background-color: lightblue;
    -fx-font-size: 14px;
}

上面的CSS代码将TableView的背景色设置为浅蓝色,字体大小设置为14px。

TableColumn控件

TableColumn是TableView中的列,它用于定义表格的列,并指定列的数据类型、标题等属性。

创建TableColumn

要创建一个TableColumn,首先需要引入javafx.scene.control包,然后创建一个TableColumn对象,并指定列的标题和数据类型:

TableColumn<Person, String> nameColumn = new TableColumn<>("姓名");

上面的代码创建了一个标题为"姓名"的TableColumn,该列的数据类型为String。

设置列的值

要设置列的值,可以使用setCellValueFactory方法,该方法接受一个Callback对象作为参数,用于从数据对象中获取值:

nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));

上面的代码将nameColumn的值设置为Person对象的name属性。

设置列的样式

可以使用CSS来设置TableColumn的样式。可以为TableColumn设置一个CSS类,然后在CSS文件中定义样式:

nameColumn.getStyleClass().add("my-column");

上面的代码为nameColumn设置了一个CSS类名为"my-column",然后在CSS文件中定义该类的样式:

.my-column {
    -fx-alignment: center;
    -fx-font-weight: bold;
}

上面的CSS代码将nameColumn的对齐方式设置为居中,字体加粗。

完整示例

下面是一个完整的JavaFX表格示例,包含了TableView和TableColumn的使用:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        TableView<Person> tableView = new TableView<>();

        TableColumn<Person, String> nameColumn = new TableColumn<>("姓名");
        nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));

        TableColumn<Person, Integer> ageColumn = new TableColumn<>("年龄");
        ageColumn.setCellValueFactory(new PropertyValueFactory<>("age"));

        ObservableList<Person> data = FXCollections.observableArrayList(
                new Person("张三", 20),
                new Person("李四",