JavaFX TableView使用和样式设置

不念不忘少年蓝@ 2022-06-02 07:19 735阅读 0赞

**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、效果如下**  
![这里写图片描述][SouthEast]

**github地址：**[https://github.com/HelloKittyNII/Code][https_github.com_HelloKittyNII_Code]

[SouthEast]: /images/20220602/582530cf158e4d7495637ff9dde764e0.png
[https_github.com_HelloKittyNII_Code]: https://github.com/HelloKittyNII/Code