我做了一个CSS hack来将Tableview与外部滚动条绑定。一个滚动条控制两个表格视图。
我的想法的概述：
- 创建两个表视图
- 制作一个垂直滚动条。在本例中我们将其称为 myScrollbar
- 将 myScrollbar 的 min 和 max 设置为 min=0, max=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;
}
然后我们需要设置如何使用滚动条滚动tableview。
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/ http://blog.ngopal.com.np/2012/09/25/how-to-bind-vertical-scroll-in-multi-tableview/
