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、效果如下