调整列大小时适应文本字段宽度

Question

我有一个 treeTableView，在它的 header 中我有一个标签和文本框。当通过调整列的大小增加列时，我希望文本框的宽度也增加。

怎么做？

如何获取动态列宽？或者如何根据列为文本框设置动态宽度？

代码：

<TableView fx:id="tableView" layoutX="1.0" layoutY="1.0"
           minHeight="580.0" prefWidth="434.0" AnchorPane.bottomAnchor="0.0"
           AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
           AnchorPane.topAnchor="0.0" HBox.hgrow="ALWAYS" VBox.vgrow="ALWAYS">
    <columns>
        <TableColumn style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="MessageId">
            <cellValueFactory>
                <PropertyValueFactory property="messageId" />
            </cellValueFactory>
        </TableColumn>

        <TableColumn prefWidth="110.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Digest Reference">
            <cellValueFactory>
                <PropertyValueFactory property="digestReference" />
            </cellValueFactory>
        </TableColumn>

        <TableColumn prefWidth="115.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Message Reference">
            <cellValueFactory>
                <PropertyValueFactory property="messageRef" />
            </cellValueFactory>
        </TableColumn>

        <TableColumn prefWidth="115.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Deal Number">
            <cellValueFactory>
                <PropertyValueFactory property="dealNo" />
            </cellValueFactory>
        </TableColumn>

        <TableColumn style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Digest Value">
            <cellValueFactory>
                <PropertyValueFactory property="digestValue" />
            </cellValueFactory>
        </TableColumn>

        <TableColumn prefWidth="100.0" style="-fx-font-family: Calibri; -fx-font-size: 11px;" text="Updated Date Time">
            <cellValueFactory>
                <PropertyValueFactory property="updateTime" />
            </cellValueFactory>
        </TableColumn>

    </columns>

    <columnResizePolicy>
        <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
    </columnResizePolicy>
</TableView>

JAVA代码：

for (TableColumn<NonRepudiation, ?> tableColumn : tableView.getColumns()) {

double width = tableColumn.getWidth();

VBox vBox = new VBox();
vBox.autosize();
vBox.setPrefWidth(tableColumn.getMaxWidth());

double width = tableColumn.getWidth();

VBox vBox = new VBox();
vBox.autosize();
vBox.setPrefWidth(tableColumn.getMaxWidth());

HBox lableBox = new HBox();
lableBox.setPrefWidth(width);
lableBox.getStyleClass().add("labelBoxTxt");

StackPane HL    =   new StackPane();
HL.getStyleClass().add("greyBorder");

Label label = new Label(tableColumn.getText());
label.setPrefWidth(width);
label.alignmentProperty().setValue(Pos.TOP_LEFT);

TextField textField = new TextField();
textField.setPrefWidth(width);
textField.textProperty().addListener(filterTable(tableColumn));

HBox textInputBox = new HBox();
textInputBox.getChildren().add(textField);
lableBox.getChildren().add(label);

HBox.setMargin(textField, new Insets(3,3,3,0));

vBox.getChildren().addAll(lableBox, HL, textInputBox);

tableColumn.setGraphic(vBox);
}

Answer 1

基本上你需要使用HBox.setHgrow()方法。这里重构了你的代码：

for ( TableColumn tableColumn : tableView.getColumns() ) {

    // build label
    Label label = new Label( tableColumn.getText() );
    HBox lableBox = new HBox( label );
    lableBox.getStyleClass().add( "labelBoxTxt" );
    lableBox.setAlignment( Pos.CENTER );

    // build hor line
    StackPane HL = new StackPane();
    HL.getStyleClass().add( "greyBorder" );

    // build text field
    TextField textField = new TextField();
    HBox.setHgrow( textField, Priority.ALWAYS );
    HBox.setMargin( textField, new Insets( 3 ) );
    HBox textInputBox = new HBox( textField );

    // put together
    VBox vBox = new VBox( lableBox, HL, textInputBox );
    tableColumn.setText( "" );
    tableColumn.setGraphic( vBox );
}

Answer 2

我找到了解决方案。

为您的表格视图设置 css class。

<TableView styleClass="k-table-view"

然后将cssclass添加到vbox

vBox.getStyleClass().add("k-column-graphic");

添加css规则

    .k-table-view .column-header > .label  {
    -fx-content-display: graphic-only;
}

.k-column-graphic {
    -fx-alignment: center-left;
}

我正在为图形设置动态宽度。

调整列大小时适应文本字段宽度

Fit textfield width when column is resized

javafx

dynamic

width

javafx-8