將兩個表視圖綁定在一起，以便它們同步滾動

Question

我想將兩個表視圖綁定在一起，以便它們同步滾動。我怎麼做？我無法找到如何訪問tableview的滾動條。

Answer 1

我不認爲這是現在可能的。 TableViewSkin繼承自具有VirtualFlow字段的VirtualContainerBase。 VirtualFlow對象有兩個VirtualScrollBar字段，hbar和vbar，這就是你所追求的。儘管如此，我看不到任何方式。

有趣的是，TableView中還有一個私有contentWidth字段，雖然這是private的。我相信JFX團隊對開放太多可以理解的API非常謹慎。您可以要求將contentWidth字段作爲int屬性打開，作爲JFX JIRA或openjfx-dev郵件列表上的功能請求。

停止間隔度量將綁定表視圖選擇模型的選定項目或索引屬性。

Answer 2

我做了一個CSS hack綁定Tableview與外部滾動條。一個滾動條控制兩個表格。

我的想法概述：

• 創建兩個tableviews
• 做一個垂直滾動條。讓我們myScrollbar調用它在本例中
• 設置最低和最高myScrollbar來分鐘的大小= 0，最大值= TableView.Items.size（）
• 當myScrollbar的值發生變化然後調用二者的tableview的scrollTo（int）的函數
• 禁用使用CSS實現的tableview的原生垂直滾動條。

這會給你兩個表，兩個表都由一個外部滾動條（myScrollbar）控制。

下面是隱藏使用CSS一的tableview的滾動條代碼：

/* The main scrollbar **track** CSS class */ 

.mytableview .scroll-bar:vertical .track{ 
     -fx-padding:0px; 
    -fx-background-color:transparent; 
    -fx-border-color:transparent; 
    -fx-background-radius: 0em; 
    -fx-border-radius:2em; 

} 

/* The increment and decrement button CSS class of scrollbar */ 

.mytableview .scroll-bar:vertical .increment-button , 
.mytableview .scroll-bar:vertical .decrement-button { 

    -fx-background-color:transparent; 
    -fx-background-radius: 0em; 
    -fx-padding:0 0 0 0; 
} 

.mytableview .scroll-bar:vertical .increment-arrow, 
.mytableview .scroll-bar:vertical .decrement-arrow 
{ 
    -fx-shape: " "; 
    -fx-padding:0;   
} 

/* The main scrollbar **thumb** CSS class which we drag every time (movable) */ 
.mytableview .scroll-bar:vertical .thumb { 
    -fx-background-color:transparent; 
    -fx-background-insets: 0, 0, 0; 
    -fx-background-radius: 2em; 
    -fx-padding:0px; 

} 

然後，我們需要設置如何使用滾動條滾動的實現代碼如下。

scroll.setMax(100); //make sure the max is equal to the size of the table row data. 
scroll.setMin(0); 
scroll.valueProperty().addListener(new ChangeListener(){ 

    @Override 
    public void changed(ObservableValue ov, Number t, Number t1) { 
     //Scroll your tableview according to the table row index 
     table1.scrollTo(t1.intValue()); 
     table2.scrollTo(t1.intValue()); 
    } 

}); 

http://blog.ngopal.com.np/2012/09/25/how-to-bind-vertical-scroll-in-multi-tableview/

Answer 3

我已經找到解決問題的最簡單方法是綁定可見的valueProperty一個隱藏滾動條。

// Controller 
@FXML private TableView<MyBean> tableLeft; 
@FXML private TableView<MyBean> tableRight; 
@FXML private ScrollBar scrollBar; 


@SuppressWarnings("rawtypes") 
private void bindScrollBars(TableView<?> tableView1, TableView<?> tableView2, 
       ScrollBar scrollBar, Orientation orientation) { 

    // Get the scrollbar of first table 
    VirtualFlow vf = (VirtualFlow)tableView1.getChildrenUnmodifiable().get(1); 
    ScrollBar scrollBar1 = null; 
    for (final Node subNode: vf.getChildrenUnmodifiable()) { 
     if (subNode instanceof ScrollBar && 
       ((ScrollBar)subNode).getOrientation() == orientation) { 
      scrollBar1 = (ScrollBar)subNode; 
     } 
    } 

    // Get the scrollbar of second table 
    vf = (VirtualFlow)tableView2.getChildrenUnmodifiable().get(1); 
    ScrollBar scrollBar2 = null; 
    for (final Node subNode: vf.getChildrenUnmodifiable()) { 
     if (subNode instanceof ScrollBar && 
       ((ScrollBar)subNode).getOrientation() == orientation) { 
      scrollBar2 = (ScrollBar)subNode; 
     } 
    } 

    // Set min/max of visible scrollbar to min/max of a table scrollbar 
    scrollBar.setMin(scrollBar1.getMin()); 
    scrollBar.setMax(scrollBar1.getMax()); 

    // bind the hidden scrollbar valueProterty the visible scrollbar 
    scrollBar.valueProperty().bindBidirectional(scrollBar1.valueProperty()); 
    scrollBar.valueProperty().bindBidirectional(scrollBar2.valueProperty()); 
} 

/* 
* This method must be called in Application.start() after the stage is shown, 
* because the hidden scrollbars exist only when the tables are rendered 
*/ 
public void setScrollBarBinding() { 
    bindScrollBars(this.tableLeft, this.tableRight, this.scrollBar, Orientation.VERTICAL); 
} 

現在你必須調用從應用程序的結合顯示在舞臺後的表呈現：

// Application 
    private MyController controller; 

    @Override 
    public void start(Stage primaryStage) { 
     try { 
      FXMLLoader fxmlLoader = new FXMLLoader(SalesApp.class.getResource("scene.fxml")); 
      BorderPane root = (BorderPane) fxmlLoader.load();; 
      Scene scene = new Scene(root); 
      scene.getStylesheets().add(getClass().getResource("app.css").toExternalForm()); 
      primaryStage.setScene(scene); 
      primaryStage.show();    
controller = (MyController) fxmlLoader.getController(); 
      controller.setScrollBarBinding(); 
     } catch(Exception e) { 
      e.printStackTrace(); 
     } 
    } 

現在的表應通過鼠標，鍵盤或滾動條滾動同步。

玩得開心，奧拉夫