7

4 つの列を持つ CellTable があります。

| 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);

                    }
                }


    });

しかし、うまくいきません。

4

1 に答える 1

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両方が true の場合、mouseoverイベントのすべての列を収集します
  • 最後に、blurイベントで、選択したすべてのセルのスタイルを変更します。
  • focus次のイベントで最後に選択したセルのスタイルをリセットする

スナップショット

ここに画像の説明を入力

ここに画像の説明を入力

于 2014-03-28T22:28:34.447 に答える