我有一个 CellTable,它有 4 列:
| Column 1 | Column 2 | Column 3 | Column 4 |
目标:
用户可以在按住鼠标按钮并将鼠标悬停在列上的同时选择多个列。
例如,用户单击第 1 列并按住鼠标按钮,移动到第 2 列和第 3 列上,从而选择了第 2 列和第 3 列。
我试过:
final MultiSelectionModel<data> selectionModel = new MultiSelectionModel<BestellungData>();
cellTable.setSelectionModel(selectionModel);
cellTable.addCellPreviewHandler(new Handler<data>()
{
@Override
public void onCellPreview(
CellPreviewEvent<data> event) {
// TODO Auto-generated method stub
if ("click".equals(event.getNativeEvent().getType())) {
selectionModel.setSelected(event.getValue(), true);
}
}
});
但是它不起作用。
最佳答案
试试这个
private boolean isFocus, isFocusMouseDown;
private int lastStyledRow = -1;
private Set<Integer> columns = new HashSet<Integer>();
...
table.addCellPreviewHandler(new Handler<Contact>() {
@Override
public void onCellPreview(CellPreviewEvent<Contact> event) {
if ("focus".equals(event.getNativeEvent().getType())) {
isFocus = true;
if (lastStyledRow != -1) {
NodeList<TableCellElement> cells = table.getRowElement(lastStyledRow)
.getCells();
for (int col : columns) {
cells.getItem(col).removeClassName("selectedCell");
}
columns.clear();
}
}
if ("blur".equals(event.getNativeEvent().getType())) {
isFocus = false;
isFocusMouseDown = false;
lastStyledRow = event.getIndex();
NodeList<TableCellElement> cells = table.getRowElement(event.getIndex())
.getCells();
for (int col : columns) {
cells.getItem(col).addClassName("selectedCell");
}
}
if ("mousedown".equals(event.getNativeEvent().getType()) && isFocus) {
isFocusMouseDown = true;
}
if ("mouseover".equals(event.getNativeEvent().getType()) && isFocusMouseDown) {
columns.add(event.getColumn());
}
}
});
这是所选单元格的虚拟 CSS
.selectedCell{
border: 2px solid #F3F7FB;
background-color: #F00;
font-weight: bold;
}
在上面的代码中,我们监听了几个事件,并根据它们的顺序我们可以识别选定的列。
事件顺序:
focus
任何列上的事件 mousedown
开始在花药柱上拖动的事件 focus
和 mousedown
两者都为真,然后收集 mouseover
上的所有列事件 blur
事件,更改所有选定单元格的样式。 focus
事件 快照
关于GWT : Celltable Multiselection , MouseDown 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22479304/