JavaFX - 表格檢視 (TableView)

上一頁
下一頁

TableView 是一種圖形使用者介面元件，用於以表格形式顯示資料。類似於典型的表格，TableView 包含列、行和單元格，每個單元格可以容納任何型別的資料。一般來說，表格表示如下所示：

JavaFX TableView

JavaFX 中的 TableView

在 JavaFX 中，表格檢視由TableView 類表示。此類是名為javafx.scene.control 包的一部分。透過例項化此類，我們可以在 JavaFX 中建立一個 TableView 節點。它有兩個建構函式：

  • TableView() - 這是預設建構函式，用於建立一個沒有任何預定義資料的表格檢視。

  • TableView(ObservableList items) - 這是 TableView 類的引數化建構函式，它接受專案列表並建立一個包含指定專案的新表格檢視。

在 JavaFX 中建立 TableView 的步驟

按照以下步驟在 JavaFX 中建立表格檢視。

步驟 1：建立一個類來表示表格中的資料

首先，我們需要建立一個類來表示要在 TableView 中顯示的資料。此類應具有與表格列對應的屬性。在這裡，我們將使用下面的程式碼塊建立一個名為 movie 的類，其屬性為標題、演員、價格和評分：

// The data model class 
public static class Movie {
    private final SimpleStringProperty title;
    private final SimpleStringProperty actor;
    private final SimpleDoubleProperty price;
    private final SimpleIntegerProperty rating;

步驟 2：為 TableView 建立列

建立 TableColumn 物件，並使用setCellValueFactory() 方法設定其單元格值。單元格值工廠是一個函式，它告訴列如何從上面宣告的資料模型類中提取資料。以下程式碼塊顯示瞭如何建立列：

// Creating columns for the TableView
TableColumn<Movie, String> titleColumn = new TableColumn<>("Movie Name");
titleColumn.setCellValueFactory(cellData -> cellData.getValue().titleProperty());
TableColumn<Movie, String> actorColumn = new TableColumn<>("Actor");
actorColumn.setCellValueFactory(cellData -> cellData.getValue().authorProperty());
TableColumn<Movie, Number> priceColumn = new TableColumn<>("Price");
priceColumn.setCellValueFactory(cellData -> cellData.getValue().priceProperty());
TableColumn<Movie, Number> ratingColumn = new TableColumn<>("IMDB Rating");
ratingColumn.setCellValueFactory(cellData -> cellData.getValue().ratingProperty());

步驟 3：例項化 TableView 類

例項化javafx.scene.control 包的TableView 類，無需向其建構函式傳遞任何引數值，並使用以下程式碼塊新增所有列：

// Creating a TableView
TableView<Movie> tableView = new TableView<>();
// Adding the columns to the TableView
tableView.getColumns().addAll(titleColumn, actorColumn, priceColumn, ratingColumn);

步驟 4：啟動應用程式

建立表格檢視並新增所有資料後，請按照以下步驟正確啟動應用程式：

  • 首先，透過將 TableView 物件作為引數值傳遞給其建構函式來例項化名為BorderPane 的類。

  • 然後，透過將 BorderPane 物件作為引數值傳遞給其建構函式來例項化名為Scene 的類。我們還可以將應用程式螢幕的尺寸作為可選引數傳遞給此建構函式。

  • 然後，使用Stage 類的setTitle() 方法設定階段的標題。

  • 現在，使用名為Stage 的類的setScene() 方法將 Scene 物件新增到階段。

  • 使用名為show() 的方法顯示場景的內容。

  • 最後，在launch() 方法的幫助下啟動應用程式。

示例

以下是將使用 JavaFX 建立 TableView 的程式。將此程式碼儲存在名為JavafxTableview.java 的檔案中。

import javafx.application.Application;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
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.layout.BorderPane;
import javafx.stage.Stage;
public class JavafxTableview extends Application {
   // The data model class 
   public static class Movie {
      private final SimpleStringProperty title;
      private final SimpleStringProperty actor;
      private final SimpleDoubleProperty price;
      private final SimpleIntegerProperty rating;
      // constructor
      public Movie(String title, String actor, double price, int rating) {
         this.title = new SimpleStringProperty(title);
         this.actor = new SimpleStringProperty(actor);
         this.price = new SimpleDoubleProperty(price);
         this.rating = new SimpleIntegerProperty(rating);
      }
      // getters and setters to access the data
      public SimpleStringProperty titleProperty() {
         return title;
      }
      public SimpleStringProperty authorProperty() {
         return actor;
      }
      public SimpleDoubleProperty priceProperty() {
         return price;
      }
      public SimpleIntegerProperty ratingProperty() {
         return rating;
      }
   }
   // main method starts here
   @Override
   public void start(Stage stage) throws Exception {
      // adding some sample data
      ObservableList<Movie> movies = FXCollections.observableArrayList(
         new Movie("The Batman", "Robert Pattinson", 299, 7),
         new Movie("John Wick: Chapter 4", "Keanu Reeves", 199, 7),
         new Movie("12th Fail", "Vikrant Massey", 199, 9),
         new Movie("Money Heist", "Alvaro Morte", 499, 8),
         new Movie("The Family Man", "Manoj Bajpayee", 399, 8)
      );
      // Creating a TableView
      TableView<Movie> tableView = new TableView<>();
      // Creating columns for the TableView
      TableColumn<Movie, String> titleColumn = new TableColumn<>("Movie Name");
      titleColumn.setCellValueFactory(cellData -> cellData.getValue().titleProperty());
      TableColumn<Movie, String> actorColumn = new TableColumn<>("Actor");
      actorColumn.setCellValueFactory(cellData -> cellData.getValue().authorProperty());
      TableColumn<Movie, Number> priceColumn = new TableColumn<>("Price");
      priceColumn.setCellValueFactory(cellData -> cellData.getValue().priceProperty());
      TableColumn<Movie, Number> ratingColumn = new TableColumn<>("IMDB Rating");
      ratingColumn.setCellValueFactory(cellData -> cellData.getValue().ratingProperty());
      // Adding the columns to the TableView
      tableView.getColumns().addAll(titleColumn, actorColumn, priceColumn, ratingColumn);
      // Set the items of the TableView
      tableView.setItems(movies);
      // Create a BorderPane and set the TableView as its center
      BorderPane root = new BorderPane();
      root.setCenter(tableView);
      // Create a Scene and set it on the Stage
      Scene scene = new Scene(root, 400, 300);
      stage.setTitle("Table View in JavaFX");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String[] args) {
      launch(args);
   }
}

使用以下命令從命令提示符編譯並執行儲存的 Java 檔案。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTableview.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTableview

輸出

執行上述程式後，將生成一個 JavaFX 視窗，其中顯示一個 Tableview，其中包含如下所示的電影列表。

Tableview Output

建立 TableView 的巢狀列

有時，我們需要在多個子列中顯示單個列的資料。當單個實體具有多個屬性時，這很常見，例如，一個人可以有多個聯絡電話或電子郵件帳戶。在這種情況下，我們建立所需的列，並使用getColumns() 方法將它們新增到父列中，如下面的 JavaFX 程式碼所示。將此程式碼儲存在名為NestedTableview.java 的檔案中。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class NestedTableview extends Application {
   @Override
   public void start(Stage stage) {
      // Defining the columns
      TableColumn firstCol = new TableColumn("Column One");
      TableColumn secondCol = new TableColumn("Column Two");
      // creating sub-columns of secondCol
      TableColumn firstSubCol = new TableColumn("Sub Col1");
      TableColumn secondSubCol = new TableColumn("Sub Col2");
      // adding the sub-columns to secondCol
      secondCol.getColumns().addAll(firstSubCol, secondSubCol);
      TableColumn lastCol = new TableColumn("Column Three");
      // instantiating the TableView class 
      TableView newTableview = new TableView();
      newTableview.getColumns().addAll(firstCol, secondCol, lastCol);
      VBox root = new VBox();
      root.setSpacing(5);
      root.getChildren().addAll(newTableview);
      // Create a Scene and set it on the Stage
      Scene scene = new Scene(root, 400, 300);
      stage.setTitle("Nested TableView in JavaFX");
      stage.setScene(scene);
      stage.show();
   }
      public static void main(String[] args) {
      launch(args);
   }
}

要從命令提示符編譯並執行儲存的 Java 檔案，請使用以下命令：

javac --module-path %PATH_TO_FX% --add-modules javafx.controls NestedTableview.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls NestedTableview

輸出

執行上述程式碼後，將生成以下輸出。

Nested Tableview Output
列印頁面
上一頁
下一頁
廣告