如何在JavaFX TableView中添加表格页脚或列页脚展示汇总统计数据

JavaFX 原生TableView未提供内置的页脚/列脚属性，可通过「绑定列宽的自定义统计栏」方案实现需求，无需引入第三方组件，适配性更高。

步骤1：修改FXML布局 #

在原有TableView下方新增页脚容器，与TableView同宽，内部Label与对应列宽度绑定：

<!-- 原有包裹TableView的HBox替换为VBox -->
<VBox alignment="CENTER" prefHeight="419.0" prefWidth="857.0">
    <children>                  
        <TableView fx:id="myTableView" prefHeight="380.0" prefWidth="816.0">
            <columns>
                <TableColumn fx:id="itemName" prefWidth="200.0" text="Item Name" />
                <TableColumn fx:id="pricePerUnit" prefWidth="200.0" text="Price Per Unit" />
                <TableColumn fx:id="quantity" prefWidth="200.0" text="Quantity" />
                <TableColumn fx:id="amount" prefWidth="200.0" text="Amount" />
            </columns>
        </TableView>
        <!-- 新增页脚HBox -->
        <HBox fx:id="footerHBox" prefHeight="39.0" prefWidth="816.0" style="-fx-background-color: #f0f0f0; -fx-border-color: #cccccc; -fx-border-width: 1 0 0 0;">
            <children>
                <Label fx:id="totalCountLabel" style="-fx-padding: 5 0 0 5;" text="总计：4条" />
                <Label fx:id="emptyLabel1" />
                <Label fx:id="totalQuantityLabel" style="-fx-padding: 5 0 0 5;" />
                <Label fx:id="totalAmountLabel" style="-fx-padding: 5 0 0 5;" />
            </children>
        </HBox>
    </children>
</VBox>

步骤2：修改Controller类 #

添加页脚控件绑定、统计逻辑，以及列宽同步监听器：

package javafxapplication8;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;

public class TVCTestModel implements Initializable {

    @FXML
    private TableColumn<TestModel, String> itemName;
    @FXML
    private TableColumn<TestModel, Integer> pricePerUnit;
    @FXML
    private TableColumn<TestModel, Double> quantity;
    @FXML
    private TableColumn<TestModel, Double> amount;
    @FXML
    private TableView<TestModel> myTableView;
    // 新增页脚控件
    @FXML
    private HBox footerHBox;
    @FXML
    private Label totalCountLabel;
    @FXML
    private Label emptyLabel1;
    @FXML
    private Label totalQuantityLabel;
    @FXML
    private Label totalAmountLabel;

    public ObservableList<TestModel> objList = FXCollections.observableArrayList();
    @FXML
    private AnchorPane anchor;
    private static TestModel curTestModel;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        this.itemName.setCellValueFactory(new PropertyValueFactory<>("itemName"));
        this.pricePerUnit.setCellValueFactory(new PropertyValueFactory<>("pricePerUnit"));
        this.quantity.setCellValueFactory(new PropertyValueFactory<>("quantity"));
        this.amount.setCellValueFactory(new PropertyValueFactory<>("amount"));

        objList.add(new TestModel("Item 1", 10, 4, 400));
        objList.add(new TestModel("Item 2", 20, 5, 1000));
        objList.add(new TestModel("Item 3", 30, 6, 1800));
        objList.add(new TestModel("Item 4", 400, 7, 2800));
        myTableView.setItems(objList);

        // 1. 绑定页脚每个标签的宽度和对应列宽一致
        totalCountLabel.prefWidthProperty().bind(itemName.widthProperty());
        emptyLabel1.prefWidthProperty().bind(pricePerUnit.widthProperty());
        totalQuantityLabel.prefWidthProperty().bind(quantity.widthProperty());
        totalAmountLabel.prefWidthProperty().bind(amount.widthProperty());

        // 2. 计算统计值
        calculateSummary();

        // 3. 监听数据变动，自动更新统计
        objList.addListener((ListChangeListener.Change<? extends TestModel> c) -> {
            calculateSummary();
        });
    }

    // 统计计算方法
    private void calculateSummary(){
        int totalCount = objList.size();
        double totalQuantity = 0.0;
        double totalAmount = 0.0;
        for(TestModel item : objList){
            totalQuantity += item.getQuantity();
            totalAmount += item.getAmount();
        }
        totalCountLabel.setText("总计：" + totalCount + "条");
        totalQuantityLabel.setText(String.format("%.1f", totalQuantity));
        totalAmountLabel.setText(String.format("%.2f", totalAmount));
    }
}

扩展适配说明 #

• 如果需要支持列拖动调整顺序：可给列添加width属性监听，动态更新对应Label的宽度绑定。
• 如果需要隐藏列：同步隐藏页脚对应Label即可。
• 若需要更复杂的列脚样式，可直接替换Label为自定义节点。

内容的提问来源于stack exchange，提问作者Asif Ali