JavaFX TableView使用和樣式設定
阿新 • • 發佈：2019-01-22
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?> 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、效果如下
