具有多行表头的JavaFX 2.0表

时间:2012-06-08 15:50:47

标签: javafx-2

是否可以使用多行标题制作javaFX 2.0表? 我在网上找到的所有例子都有表格,其中columnt header width =它的文本大小,没有包装。屏幕上显示了我所拥有的以及我需要的内容:enter image description here

4 个答案:

答案 0 :(得分:8)

我提出了以下功能:

private void makeHeaderWrappable(TableColumn col) {
  Label label = new Label(col.getText());
  label.setStyle("-fx-padding: 8px;");
  label.setWrapText(true);
  label.setAlignment(Pos.CENTER);
  label.setTextAlignment(TextAlignment.CENTER);

  StackPane stack = new StackPane();
  stack.getChildren().add(label);
  stack.prefWidthProperty().bind(col.widthProperty().subtract(5));
  label.prefWidthProperty().bind(stack.prefWidthProperty());
  col.setGraphic(stack);
}

一个完整的可执行示例是in this gist(需要2.2 developer preview as a minimum)。

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

public class TableWrappedHeaders extends Application {
  public static void main(String[] args) { launch(args); }

  @Override public void start(Stage stage) {
    TableColumn firstNameCol = new TableColumn("First Name (which is a really long name)");
    makeHeaderWrappable(firstNameCol);
    firstNameCol.setPrefWidth(100);
    firstNameCol.setCellValueFactory(new PropertyValueFactory<Person,String>("firstName"));
    TableColumn lastNameCol = new TableColumn("Last Name");
    lastNameCol.setPrefWidth(100);
    lastNameCol.setCellValueFactory(new PropertyValueFactory<Person,String>("lastName"));

    TableView table = new TableView();
    table.getColumns().addAll(firstNameCol, lastNameCol);
    table.setItems(FXCollections.observableArrayList(
      new Person("Jacob", "Smith"),
      new Person("Isabella", "Johnson"),
      new Person("Ethan", "Williams")
    ));
    table.setPrefSize(250, 200);

    Pane layout = new VBox(10);
    layout.setStyle("-fx-padding: 10;");
    layout.getChildren().addAll(table);
    stage.setScene(new Scene(layout));
    stage.show();
  }

  private void makeHeaderWrappable(TableColumn col) {
    Label label = new Label(col.getText());
    label.setStyle("-fx-padding: 8px;");
    label.setWrapText(true);
    label.setAlignment(Pos.CENTER);
    label.setTextAlignment(TextAlignment.CENTER);

    StackPane stack = new StackPane();
    stack.getChildren().add(label);
    stack.prefWidthProperty().bind(col.widthProperty().subtract(5));
    label.prefWidthProperty().bind(stack.prefWidthProperty());
    col.setText(null);
    col.setGraphic(stack);
  }

  public static class Person {
    private final SimpleStringProperty firstName;
    private final SimpleStringProperty lastName;

    private Person(String fName, String lName) {
      this.firstName = new SimpleStringProperty(fName);
      this.lastName = new SimpleStringProperty(lName);
    }

    public String getFirstName() { return firstName.get(); }
    public void setFirstName(String fName) { firstName.set(fName); }
    public String getLastName() { return lastName.get(); }
    public void setLastName(String fName) { lastName.set(fName); }
  }
}

可能有更好的方法可以做到这一点,但上面的函数在我的测试用例中至少对我有用。

我认为这可以通过简单的CSS样式实现,但我无法通过css单独工作。

答案 1 :(得分:8)

找到不使用标签的解决方案。在Scene Builder 8.3.0(Gluon),JavaFX 8中,鼠标悬停时出现一个按钮,位于文本字段的右侧,可以从菜单中选择多行。

Menu for multi - line mode

这会产生以下XML代码:

<TableColumn fx:id="prodDisc" editable="false" prefWidth="50.0" text="Prod &#10;Disc" />

答案 2 :(得分:6)

对齐标题文本的最简单方法是使用CSS样式,如下所示:

.table-view .column-header .label {
  -fx-text-alignment: center;
}

在标题文本字符串中使用新的换行符序列“\ n”将其拆分为多行。

答案 3 :(得分:6)

使用列标题图片中的标签更容易:

  1. 在列标题图形中添加标签(如果列中有一些文本作为标题删除它)。
  2. 将标签设置为允许换行文本 (场景构建器 - &gt;转到标签的属性并选择自动换行或在代码中 - &gt; label.setWrapText(true))
  3. 设置我们希望的标签宽度和高度
  4. 注意:在FXML(使用Scene Builder)中比在代码中更容易做到这一点。

    以下示例:

        public class TableColumnLongTextLabel extends Application {
    
        @Override
        public void start(Stage stage) {
            TableView table = new TableView();
            TableColumn tableColumnData1 = new TableColumn(),
                    tableColumnData2 = new TableColumn("Long Title without Text Wrap");
    
            tableColumnData1.setCellValueFactory(new PropertyValueFactory<SomeStructure, String>("data1"));
            tableColumnData2.setCellValueFactory(new PropertyValueFactory<SomeStructure, String>("data2"));
    
            table.getColumns().addAll(tableColumnData1, tableColumnData2);
    
            Label columnTitle = new Label("Long Title with Text Wrapped");
            columnTitle.setPrefWidth(125);
            columnTitle.setPrefHeight(50);
            columnTitle.setWrapText(true);
            columnTitle.setTextAlignment(TextAlignment.CENTER);
            tableColumnData1.setGraphic(columnTitle);
    
            table.setItems(FXCollections.observableArrayList(
                    new SomeStructure("Java", "FX", 1),
                    new SomeStructure("Java", "Swing", 0),
                    new SomeStructure("Java", "Sample", 2),
                    new SomeStructure("Some", "Other", 10)
            ));
    
            Pane layout = new VBox(10);
            layout.getChildren().addAll(table);
            stage.setScene(new Scene(layout, 350, 350));
            stage.show();
        }
    
        public static class SomeStructure {
    
            private final SimpleStringProperty data1;
            private final SimpleStringProperty data2;
            private final SimpleIntegerProperty data3;
    
            private SomeStructure(String data1, String data2, Integer data3) {
                this.data1 = new SimpleStringProperty(data1);
                this.data2 = new SimpleStringProperty(data2);
                this.data3 = new SimpleIntegerProperty(data3);
            }
    
            public String getData1() {
                return data1.get();
            }
    
            public void setData1(String data1) {
                this.data1.set(data1);
            }
    
            public String getData2() {
                return data2.get();
            }
    
            public void setData2(String data2) {
                this.data2.set(data2);
            }
    
            public Integer getData3() {
                return data3.get();
            }
    
            public void setData3(Integer data3) {
                this.data3.set(data3);
            }
        }
    
        public static void main(String[] args) {
            launch(args);
        }
    }
    

    使用FXML的示例(无需代码:)):

    <TableView prefHeight="251.0" prefWidth="556.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
           <columns>
              <TableColumn editable="false" maxWidth="90.0" prefWidth="70.0" sortable="false" text="Player">
                 <columns>
                    <TableColumn editable="false" maxWidth="80.0" prefWidth="50.0" text="ID" />
                    <TableColumn editable="false" maxWidth="200.0" prefWidth="180.0" text="Name" />
                 </columns>
              </TableColumn>
              <TableColumn maxWidth="80.0" minWidth="50.0" prefWidth="60.0" text="Game" />
              <TableColumn editable="false" maxWidth="160.0" minWidth="125.0" prefWidth="135.0" sortable="false" text="Team" visible="false" />
              <TableColumn editable="false" maxWidth="160.0" minWidth="107.0" prefWidth="107.0" sortable="false">
                 <graphic>
                    <Label alignment="CENTER" text="Individual Points (Big Team)" textAlignment="CENTER" wrapText="true" />
                 </graphic>
              </TableColumn>
              <TableColumn editable="false" maxWidth="160.0" minWidth="99.0" prefWidth="102.0" sortable="false">
                 <graphic>
                    <Label alignment="CENTER" text="Team Points (Small Maps)" textAlignment="CENTER" wrapText="true" />
                 </graphic>
              </TableColumn>
              <TableColumn editable="false" maxWidth="116.0" minWidth="55.0" prefWidth="55.0" sortable="false">
                 <graphic>
                    <Label text="Total Points" textAlignment="CENTER" wrapText="true" />
                 </graphic>
              </TableColumn>
           </columns>
        </TableView>
    

    enter image description here