我创建了一个简单的Tableview,它应该存储笔记,一切正常,但我想为每一列添加一个工具提示。
Example of my TableView
正如你可以看到日期不适合单元格,我想在那里添加一个工具提示,如果你用鼠标将鼠标悬停在单元格上它应该出现并显示整个字符串。
基本上每行中的最后3个(date,noteTitle,noteTags)单元格应该有一个工具提示,因为它们可能会溢出。
//create TableCols
TableColumn colorCol = new TableColumn<Rectangle, String>("C");
colorCol.setMinWidth(30.0);
colorCol.setMaxWidth(30.0);
TableColumn prioCol = new TableColumn<Note, String>("priority");
prioCol.setMinWidth(70.0);
prioCol.setMaxWidth(70.0);
TableColumn dateCol = new TableColumn<Note, String>("date");
dateCol.setMinWidth(150.0);
dateCol.setMaxWidth(150.0);
TableColumn titleCol = new TableColumn<Note, String>("title");
titleCol.setMaxWidth(150.0);
titleCol.setMinWidth(150.0);
TableColumn tagsCol = new TableColumn<Note, String>("tags");
tagsCol.setMaxWidth(100.0);
tagsCol.setMinWidth(100.0);
fxListView.getColumns().addAll(colorCol, prioCol, dateCol, titleCol, tagsCol); //add cols to table. fxListView is the table
colorCol.setCellValueFactory(new PropertyValueFactory<>("rect"));
prioCol.setCellValueFactory(new PropertyValueFactory<>("priority"));
dateCol.setCellValueFactory(new PropertyValueFactory<>("date"));
titleCol.setCellValueFactory(new PropertyValueFactory<>("title"));
tagsCol.setCellValueFactory(new PropertyValueFactory<>("tags"));
DBManager temp = new DBManager();
fxListView.setItems(temp.getTableData()); // this Method just returns a ObservableList<Note> with a few test datas.
public class Note {
private Rectangle rect;
private String rectColorString;
private String priority;
private String date;
private String title;
private String note;
private String tags;
private String fontStyle;
private int fontSize;
public Note(String rectColorString, String priority,String title, String note,String tags, String fontStyle, int fontSize) {
this.rectColorString = rectColorString;
rect = new Rectangle(24, 24, Color.web(rectColorString));
this.priority = priority;
this.date = new Date().toString();
this.title = title;
this.note = note;
this.tags = tags;
this.fontStyle = fontStyle;
this.fontSize = fontSize;
}
public String getDate() {
return this.date;
}
public Rectangle getRect() {
return rect;
}
public void setRect(Rectangle rect) {
this.rect = rect;
}
public String getRectColorString() {
return rectColorString;
}
public void setRectColorString(String rectColorString) {
this.rectColorString = rectColorString;
this.rect = new Rectangle(24, 24, Color.web(rectColorString));
}
public String getPriority() {
return priority;
}
public void setPriority(String priority) {
this.priority = priority;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getNote() {
return note;
}
public void setNote(String note) {
this.note = note;
}
public String getTags() {
return tags;
}
public void setTags(String tags) {
this.tags = tags;
}
public String getFontStyle() {
return fontStyle;
}
public void setFontStyle(String fontStyle) {
this.fontStyle = fontStyle;
}
public int getFontSize() {
return fontSize;
}
public void setFontSize(int fontSize) {
this.fontSize = fontSize;
}
}
还有另一张关于我希望如何显示工具提示的图片(如果我的解释不够清楚) Result
答案 0 :(得分:0)
您需要使用自定义TableCell
实现来执行此操作。从cellFactory
列中返回此类实现:
public class TooltipTableCell<S, T> extends TableCell<S, T> {
private final Tooltip tooltip = new Tooltip();
private final Text measureText = new Text();
private Node textDisplay;
private final InvalidationListener listener = o -> {
setTooltip((measureText.getBoundsInLocal().getWidth() > textDisplay.getBoundsInLocal().getWidth()) ? tooltip : null);
};
@Override
protected void layoutChildren() {
super.layoutChildren();
measureText.boundsInLocalProperty().addListener(listener);
Node oldTextDisplay = textDisplay;
textDisplay = lookup("LabeledText"); // lookup node displaying the text via CSS
if (oldTextDisplay != textDisplay) {
if (oldTextDisplay != null) {
oldTextDisplay.boundsInLocalProperty().removeListener(listener);
}
textDisplay.boundsInLocalProperty().addListener(listener);
listener.invalidated(null);
}
}
@Override
protected void updateItem(T item, boolean empty) {
super.updateItem(item, empty);
String newText = empty || item == null ? "" : item.toString();
setText(newText);
tooltip.setText(newText);
measureText.setText(newText);
}
public static <E, F> Callback<TableColumn<E, F>, TableCell<E, F>> forTableColumn() {
return column -> new TooltipTableCell<>();
}
}
titleCol.setCellFactory(TooltipTableCell.forTableColumn());
请注意,在构造函数上指定类型参数没有意义,但在变量的声明中则没有意义。最好在声明中指定它,并在构造函数调用中使用菱形运算符:
TableColumn<Note, String> dateCol = new TableColumn<>("date");
(如果colorCol
的声明包含类型参数,这将导致fxListView
的编译时错误。)
答案 1 :(得分:0)
将Tooltip
添加到单元格而不是TableColumn
。
public class CustomTableCell extends TableCell<Note, String>() {
private final Tooltip tooltip = new Tooltip();
public CustomTableCell() {
tooltip.textProperty().bind(itemProperty());
}
@Override
protected void updateItem(String item, boolean emtpy) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setTooltip(null); // so an empty cell doesn't display a Tooltip
} else {
setText(item);
setTooltip(tooltip);
}
}
}
然后使用TableColumn
在column.setCellFactory(Callback)
上设置单元格工厂。
修改强>
在添加Tooltip
之前,answer given by fabian还会考虑整个项目是否已经显示。