JavaFX TableView使用和样式设置

1、新建fxml界面文件，里面就放置一个TableView

对应的Controller为TableViewTestController，css配置文件为TableViewTestCss.css，表格设计三列分别为nameCol、ageCol和DescCol

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.VBox?>

<VBox alignment="CENTER" prefHeight="400.0" prefWidth="534.0" stylesheets="@../css/TableViewTestCss.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.nii.desktop.controller.TableViewTestController">
   <children>
      <TableView fx:id="studentTableView">
        <columns>
          <TableColumn fx:id="nameCol" prefWidth="75.0" text="Name" />
          <TableColumn fx:id="ageCol" prefWidth="75.0" text="Age" />
            <TableColumn fx:id="descCol" prefWidth="75.0" text="Desc" />
        </columns>
         <columnResizePolicy>
            <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
         </columnResizePolicy>
      </TableView>
   </children>
</VBox>

2、实体Studnet.java类
该类和表格的数据对应，有三个字段，其中age是Integer类型

package com.nii.desktop.model.student;

import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;

/**
 * Created by wzj on 2018/1/7.
 */
public class Student
{
    private SimpleStringProperty name = new SimpleStringProperty();

    private SimpleIntegerProperty age = new SimpleIntegerProperty();

    private SimpleStringProperty desc = new SimpleStringProperty();

    public Student(String name, Integer age, String desc)
    {
        setName(name);
        setAge(age);
        setDesc(desc);
    }

    public String getName()
    {
        return name.get();
    }

    public SimpleStringProperty nameProperty()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name.set(name);
    }

    public int getAge()
    {
        return age.get();
    }

    public SimpleIntegerProperty ageProperty()
    {
        return age;
    }

    public void setAge(int age)
    {
        this.age.set(age);
    }

    public String getDesc()
    {
        return desc.get();
    }

    public SimpleStringProperty descProperty()
    {
        return desc;
    }

    public void setDesc(String desc)
    {
        this.desc.set(desc);
    }
}

3、TableViewTestController在表格中初始化三行数据

将表格的数据映射到data中，通过更改data的值，就可以控制表格数据。

package com.nii.desktop.controller;

import com.nii.desktop.model.device.AdbDevice;
import com.nii.desktop.signal.event.ModeEvent;
import com.nii.desktop.signal.listener.ModeListener;
import com.nii.desktop.signal.type.DeviceEventType;
import com.nii.desktop.util.ui.ResourceLoader;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TextField;
import javafx.scene.layout.Pane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

import java.io.IOException;
import java.net.URL;
import java.util.EventListener;
import java.util.ResourceBundle;
import java.util.UUID;

/**
 * Created by wzj on 2017/1/4.
 */
public class MainUIController implements Initializable
{
    /**
     * 设备对象
     */
    private AdbDevice adbDevice = new AdbDevice();

    /**
     * 数字框
     */
    @FXML
    private TextField numTextField;

    /**
     * 名字框
     */
    @FXML
    private TextField nameTextField;

    @FXML
    private WebView webview;

    @FXML
    private TextField urlTextField;

    /**
     * 容器
     */
    @FXML
    private TabPane tabPane;

    /**
     * web engine
     */
    WebEngine webEngine;



    /**
     * Called to initialize a controller after its root element has been
     * completely processed.
     *
     * @param location  The location used to resolve relative paths for the root object, or
     *                  <tt>null</tt> if the location is not known.
     * @param resources The resources used to localize the root object, or <tt>null</tt> if
     */
    @Override
    public void initialize(URL location, ResourceBundle resources)
    {
        registerListener();

        numTextField.setEditable(false);
        adbDevice.setDeviceNumber(0);

        webEngine = webview.getEngine();

        loadListViewTestTab();
        loadTableViewTestTab();

    }

    private void loadListViewTestTab()
    {
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(ResourceLoader.getFxmlResource("ListViewTest.fxml"));

        try
        {
            Pane pane = fxmlLoader.load();

            Tab listViewTab = new Tab("ListView");
            listViewTab.setContent(pane);
            tabPane.getTabs().add(listViewTab);

        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
    }

    private void loadTableViewTestTab()
    {
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(ResourceLoader.getFxmlResource("TableViewTest.fxml"));

        try
        {
            Pane pane = fxmlLoader.load();

            Tab tableViewTab = new Tab("TableView");
            tableViewTab.setContent(pane);
            tabPane.getTabs().add(tableViewTab);

        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
    }


    private void registerListener()
    {
        adbDevice.addChangeListener(DeviceEventType.NUMBER_CHANGE, new ModeListener()
        {
            @Override
            public void handleEvent(ModeEvent event)
            {
                numTextField.setText(String.valueOf(adbDevice.getDeviceNumber()));
            }
        });

        adbDevice.addChangeListener(DeviceEventType.NAME_CHANGE, new ModeListener()
        {
            @Override
            public void handleEvent(ModeEvent event)
            {
                nameTextField.setText(event.getSource().toString());
            }
        });
    }

    /**
     * 点击+按钮
     */
    @FXML
    private void upButtonClickAction()
    {
        int num = adbDevice.getDeviceNumber() + 1;
        adbDevice.setDeviceNumber(num);
    }

    /**
     * 点击-按钮
     */
    @FXML
    private void downButtonClickAction()
    {
        int num = adbDevice.getDeviceNumber() - 1;
        adbDevice.setDeviceNumber(num);

        adbDevice.setDeviceName(UUID.randomUUID().toString());
    }

    /**
     * 回车事件
     */
    @FXML
    private void urlTextFieldAction()
    {
        goBtClickAction();
    }

    /**
     * Go按钮点击事件
     */
    @FXML
    private void goBtClickAction()
    {
        webEngine.load(urlTextField.getText());
    }
}

4、设置表格的CSS样式
具体每一个css样式的功能，请看下面文件的注释

/*设置表格头靠左、字体大小，字体颜色*/
.table-view .column-header .label{
    -fx-alignment: center-left;
    -fx-font-family: "Arial";
    -fx-text-fill: rgba(68,68,68,0.96);
    -fx-font-size: 12;
}

/*设置表格头高度*/
.table-view > .column-header-background{
    -fx-pref-height: 40;
}

/*设置每一列内容居中，每一行高度*/
.table-row-cell{
    -fx-cell-size: 45px;
    -fx-alignment: center;
}

#studentTableView{
    -fx-table-cell-border-color:transparent;
    -fx-border-color: white;
    -fx-alignment: center-left;
}

/*设置每一列内容居中*/
#studentTableView .table-column{
  -fx-alignment: center-left;
}

5、效果如下

github地址：https://github.com/HelloKittyNII/Code