2015-09-25 48 views
0

我想在我的TreeTableView中用紅色邊框標記多個行,但我遇到了表格單元格從各自列移開的問題。JavaFX 8:爲表格行使用邊框時移動表格單元格

視覺上看起來是這樣的:

http://i.imgur.com/KBK3hvM.png

的style.css:

.style { 
    -fx-border-style: solid line-join round ; 
    -fx-border-color: ...; 
} 

對於這似乎有點遠離右移由什麼出現在樹中的每個列是邊框的寬度(1px默認)。沒有一個問題只有2列,但最終的應用程序應該有十幾個。

我可以設置邊界的插圖位於單元格的外側,並修復了移位,但您無法再看到側邊框,這看起來也很奇怪。

我猜設置行的樣式只是方便讓引擎爲每個單元格設置它。

有沒有辦法阻止TreeTableCells轉移?也許爲單元格設置單獨的樣式,而不是設計整行的樣式?

回答

0

假設.style應用於TreeTableRow S:

.style { 
    -fx-background-color: red, -fx-background ; 
    -fx-background-insets: 0, 1 ; 
} 

我經常發現我要挖到源的默認樣式表來計算這些了。您可能想要混淆插頁並實施某種邏輯,以防止應用了樣式類的相鄰行上的雙邊框。

下面是一個SSCCE:

import javafx.application.Application; 
import javafx.beans.property.IntegerProperty; 
import javafx.beans.property.SimpleIntegerProperty; 
import javafx.beans.property.SimpleStringProperty; 
import javafx.beans.property.StringProperty; 
import javafx.scene.Scene; 
import javafx.scene.control.TreeItem; 
import javafx.scene.control.TreeTableColumn; 
import javafx.scene.control.TreeTableRow; 
import javafx.scene.control.TreeTableView; 
import javafx.scene.layout.BorderPane; 
import javafx.stage.Stage; 

public class StyledTreeTableView extends Application { 

    private static final int MAX_VALUE = 1000 ; 

    @Override 
    public void start(Stage primaryStage) { 
     TreeTableView<Item> treeTable = new TreeTableView<>(); 
     treeTable.setRoot(createTreeItem(1)); 

     treeTable.setRowFactory(ttv -> new TreeTableRow<Item>() { 
      @Override 
      public void updateItem(Item item, boolean empty) { 
       super.updateItem(item, empty); 
       if (empty) { 
        setText(null); 
        getStyleClass().remove("highlight"); 
       } else { 
        setText(item.toString()); 
        if (item.getValue() % 10 == 3 || item.getValue() % 10 == 4) { 
         if (! getStyleClass().contains("highlight")) { 
          getStyleClass().add("highlight"); 
         } 
        } else { 
         getStyleClass().remove("highlight"); 
        } 
       } 
      } 
     }); 

     TreeTableColumn<Item, String> nameCol = new TreeTableColumn<>("Item"); 
     nameCol.setCellValueFactory(cellData -> cellData.getValue().getValue().nameProperty()); 
     treeTable.getColumns().add(nameCol); 

     for (int colIndex = 1 ; colIndex < 10 ; colIndex++) { 
      TreeTableColumn<Item, Number> valueCol = new TreeTableColumn<>("Value * "+colIndex); 
      final int multiplier = colIndex ; 
      valueCol.setCellValueFactory(cellData -> cellData.getValue().getValue().valueProperty().multiply(multiplier)); 
      treeTable.getColumns().add(valueCol); 
     } 

     BorderPane root = new BorderPane(treeTable); 
     Scene scene = new Scene(root, 600, 600); 
     scene.getStylesheets().add("styled-tree-table.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    private TreeItem<Item> createTreeItem(int value) { 
     Item item = new Item("Item "+ value, value); 
     TreeItem<Item> treeItem = new TreeItem<>(item); 
     if (value < MAX_VALUE) { 
      for (int i = 0 ; i < 10; i++) { 
       treeItem.getChildren().add(createTreeItem(value * 10 + i)); 
      } 
     } 
     return treeItem ; 
    } 

    public static class Item { 
     private final StringProperty name = new SimpleStringProperty(); 
     private final IntegerProperty value = new SimpleIntegerProperty(); 

     public Item(String name, int value) { 
      setName(name); 
      setValue(value); 
     } 

     public final StringProperty nameProperty() { 
      return this.name; 
     } 

     public final java.lang.String getName() { 
      return this.nameProperty().get(); 
     } 

     public final void setName(final java.lang.String name) { 
      this.nameProperty().set(name); 
     } 

     public final IntegerProperty valueProperty() { 
      return this.value; 
     } 

     public final int getValue() { 
      return this.valueProperty().get(); 
     } 

     public final void setValue(final int value) { 
      this.valueProperty().set(value); 
     } 


    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

與樣式:

.highlight { 
    -fx-background-color: red, -fx-background ; 
    -fx-background-insets: 0, 1 ; 
} 
+0

啊,'TreeTableView',不'TableView'。根據更新並添加示例。 –

+0

這幾乎是我在尋找的東西,雙邊框確實沒什麼問題。如果我理解了CSS的權利,那麼這會將該行的背景設置爲紅色,然後使用默認值覆蓋該背景?無論如何,感謝您的提示,完整的代碼! – Plsplsplsplsplspls