将两个tableviews绑定在一起，以便它们同步滚动 [英] Binding two tableviews together such that they scroll in sync

问题描述

我想将两个tableview绑定在一起，以便它们同步滚动。我怎么做？我无法找到如何访问tableview的滚动条。

I want to bind two tableviews together such that they scroll in sync. How do I do that? I am unable to find out how to access the scrollbar of a tableview.

推荐答案

我已经制作了一个CSS hack来绑定一个具有外部滚动条的Tableview。一个滚动条控制两个tableviews。

I've made a CSS hack to bind a Tableview with an external scrollbar. One scrollbar controls both tableviews.

我的想法概述：

• 创建两个tableviews


• 制作一个垂直滚动条。在本例中我们称之为myScrollbar


• 将myScrollbar的最小值和最大值设置为min = 0，max = TableView.Items.size（）


• 当myScrollbar的值发生更改时，调用tableview的scrollTo（int）函数


• 禁用使用CSS实现的tableview的本机垂直滚动条。

• Create two tableviews
• Make one Vertical scrollbar. Let's call it myScrollbar in this example
• Set the min and max of myScrollbar to size of min=0, max=TableView.Items.size()
• When the value of myScrollbar changes then call both tableview's scrollTo(int) function
• Disable the native vertical scrollbar of the tableview implemented with CSS.

这将为您提供两个表，两个表都由一个外部滚动条（myScrollbar）控制。

This will give you two tables, both controlled by one external scrollbar (myScrollbar).

以下是使用css隐藏tableview滚动条的代码：

Here is the code to hide the scrollbar of a tableview using css:

/* 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;

}

然后我们需要设置如何滚动tableview使用滚动条。

Then we need to set how to scroll the tableview by using the scrollbar.

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 /

这篇关于将两个tableviews绑定在一起，以便它们同步滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！