我有一个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);
}
}
});
但它不起作用。
答案 0 :(得分:1)
试试这个
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
事件快照