JavaFX TableView使用和样式设置

时间:2022-05-24 17:05:18

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、效果如下
JavaFX TableView使用和样式设置

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