javascript - Wicket: Select Multiple Rows (Shift-Click) - Stack Overflow

admin管理员组

文章数量:1025457

Is it possible to select multiple rows in Wicket by using clicking on a row, pressing the shift key and then clicking on another row?

I am using Wicket 6.20. I have figured out the code to select a single row, but I am not sure how to add the AJAX event to determine if the user has pressed the shift-key.

@Override
protected Item<T> newRowItem(final String id, final int index, final IModel<T> model) {
    final Item<T> rowItem = new OddEvenItem<>(id, index, model);
    rowItem.add(new AjaxEventBehavior("onclick") {

        private static final long serialVersionUID = 6720512493017210281L;

        @Override
        protected void onEvent(AjaxRequestTarget target) {

            SearchResultsRow row = (SearchResultsRow) rowItem.getModelObject();
            row.setSelected(!row.isSelected());

            parent.updateSearchResults(target);
        }
    });
    return rowItem;
}

Is it possible to select multiple rows in Wicket by using clicking on a row, pressing the shift key and then clicking on another row?

I am using Wicket 6.20. I have figured out the code to select a single row, but I am not sure how to add the AJAX event to determine if the user has pressed the shift-key.

@Override
protected Item<T> newRowItem(final String id, final int index, final IModel<T> model) {
    final Item<T> rowItem = new OddEvenItem<>(id, index, model);
    rowItem.add(new AjaxEventBehavior("onclick") {

        private static final long serialVersionUID = 6720512493017210281L;

        @Override
        protected void onEvent(AjaxRequestTarget target) {

            SearchResultsRow row = (SearchResultsRow) rowItem.getModelObject();
            row.setSelected(!row.isSelected());

            parent.updateSearchResults(target);
        }
    });
    return rowItem;
}

• javascript
• java
• html
• wicket

Share Improve this question Follow asked Jan 19, 2016 at 21:56 Michael MitchellMichael Mitchell 4122 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

I use this snippet for shift / ctrl ajax-click:

public class AjaxClickWithKeysBehavior extends AjaxEventBehavior
{

    public AjaxClickWithKeysBehavior()
    {
        super( "click" );
    }

    @Override
    protected void updateAjaxAttributes( AjaxRequestAttributes attributes )
    {
        super.updateAjaxAttributes( attributes );

        attributes.getDynamicExtraParameters().add( "return {'ctrl' : attrs.event.ctrlKey, 'shift' : attrs.event.shiftKey}" );
    }

    @Override
    protected void onEvent( AjaxRequestTarget target )
    {
        final RequestCycle requestCycle = RequestCycle.get();

        boolean isCtrl = requestCycle.getRequest().getRequestParameters().getParameterValue( "ctrl" ).toBoolean( false );
        boolean isShift = requestCycle.getRequest().getRequestParameters().getParameterValue( "shift" ).toBoolean( false );

        this.onClick( target, isCtrl, isShift );
    }

    protected void onClick( AjaxRequestTarget target, boolean isCtrl, boolean isShift )
    {
    }

}

WicketStuff-DataTables provides integration with https://datatables/. By using its Select extension it is possible to select rows as you need.

I just added support for the Select extension to master branch. It will be available with WicketStuff 7.2.0. You can see it in action in the infinite/virtual scroll example.

Here is a version that you can drop-in where you use a standard ajaxlink:

public abstract class KeyedAjaxLink extends AjaxLink<Object> {

  private static final long serialVersionUID = 1L;

  /**
   * @param p_id
   */
  public KeyedAjaxLink( String p_id ) {
    super( p_id );
  }

  /**
   * @param p_id
   * @param p_model
   */
  public KeyedAjaxLink( String p_id, IModel<Object> p_model ) {
    super( p_id, p_model );
  }

  @Override
  protected void updateAjaxAttributes( AjaxRequestAttributes p_attributes ) {
    super.updateAjaxAttributes( p_attributes );

    p_attributes.getDynamicExtraParameters().add( "return {'ctrl' : attrs.event.ctrlKey, 'shift' : attrs.event.shiftKey, 'alt' : attrs.event.altKey }" );
  }

  protected boolean isShiftPressed() {
    return isPressed( "shift" );
  }

  protected boolean isCtrlPressed() {
    return isPressed( "ctrl" );
  }

  protected boolean isAltPressed() {
    return isPressed( "alt" );
  }

  protected boolean isPressed( String p_keyCode ) {
    return RequestCycle.get().getRequest().getRequestParameters().getParameterValue( p_keyCode ).toBoolean( false );
  }
}

Just curious; why not using list view with checkbox for this? The solution to what you are trying to achieve seems more of Javascript coding then Wicket itself. I am sure you could find multiple answers on Stackoverflow for achieving multi row select from javascript.

For Wicket list view with checkbox, you can look at: https://cwiki.apache/confluence/display/WICKET/Listview+with+checkboxes

You might have valid reason to go with shift+click. But it might restrict you for the page you are on (if your table has pagination), and also without retaining the selection when e back.

Yes, it's possible. There are ponent org.apache.wicket.markup.html.form.ListMultipleChoice so I think you must use it.

This ponent provide behavior that you expect. You can read documentation in Wicket Docs

Is it possible to select multiple rows in Wicket by using clicking on a row, pressing the shift key and then clicking on another row?

I am using Wicket 6.20. I have figured out the code to select a single row, but I am not sure how to add the AJAX event to determine if the user has pressed the shift-key.

@Override
protected Item<T> newRowItem(final String id, final int index, final IModel<T> model) {
    final Item<T> rowItem = new OddEvenItem<>(id, index, model);
    rowItem.add(new AjaxEventBehavior("onclick") {

        private static final long serialVersionUID = 6720512493017210281L;

        @Override
        protected void onEvent(AjaxRequestTarget target) {

            SearchResultsRow row = (SearchResultsRow) rowItem.getModelObject();
            row.setSelected(!row.isSelected());

            parent.updateSearchResults(target);
        }
    });
    return rowItem;
}

Is it possible to select multiple rows in Wicket by using clicking on a row, pressing the shift key and then clicking on another row?

I am using Wicket 6.20. I have figured out the code to select a single row, but I am not sure how to add the AJAX event to determine if the user has pressed the shift-key.

@Override
protected Item<T> newRowItem(final String id, final int index, final IModel<T> model) {
    final Item<T> rowItem = new OddEvenItem<>(id, index, model);
    rowItem.add(new AjaxEventBehavior("onclick") {

        private static final long serialVersionUID = 6720512493017210281L;

        @Override
        protected void onEvent(AjaxRequestTarget target) {

            SearchResultsRow row = (SearchResultsRow) rowItem.getModelObject();
            row.setSelected(!row.isSelected());

            parent.updateSearchResults(target);
        }
    });
    return rowItem;
}

• javascript
• java
• html
• wicket

Share Improve this question Follow asked Jan 19, 2016 at 21:56 Michael MitchellMichael Mitchell 4122 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

I use this snippet for shift / ctrl ajax-click:

public class AjaxClickWithKeysBehavior extends AjaxEventBehavior
{

    public AjaxClickWithKeysBehavior()
    {
        super( "click" );
    }

    @Override
    protected void updateAjaxAttributes( AjaxRequestAttributes attributes )
    {
        super.updateAjaxAttributes( attributes );

        attributes.getDynamicExtraParameters().add( "return {'ctrl' : attrs.event.ctrlKey, 'shift' : attrs.event.shiftKey}" );
    }

    @Override
    protected void onEvent( AjaxRequestTarget target )
    {
        final RequestCycle requestCycle = RequestCycle.get();

        boolean isCtrl = requestCycle.getRequest().getRequestParameters().getParameterValue( "ctrl" ).toBoolean( false );
        boolean isShift = requestCycle.getRequest().getRequestParameters().getParameterValue( "shift" ).toBoolean( false );

        this.onClick( target, isCtrl, isShift );
    }

    protected void onClick( AjaxRequestTarget target, boolean isCtrl, boolean isShift )
    {
    }

}

WicketStuff-DataTables provides integration with https://datatables/. By using its Select extension it is possible to select rows as you need.

I just added support for the Select extension to master branch. It will be available with WicketStuff 7.2.0. You can see it in action in the infinite/virtual scroll example.

Here is a version that you can drop-in where you use a standard ajaxlink:

public abstract class KeyedAjaxLink extends AjaxLink<Object> {

  private static final long serialVersionUID = 1L;

  /**
   * @param p_id
   */
  public KeyedAjaxLink( String p_id ) {
    super( p_id );
  }

  /**
   * @param p_id
   * @param p_model
   */
  public KeyedAjaxLink( String p_id, IModel<Object> p_model ) {
    super( p_id, p_model );
  }

  @Override
  protected void updateAjaxAttributes( AjaxRequestAttributes p_attributes ) {
    super.updateAjaxAttributes( p_attributes );

    p_attributes.getDynamicExtraParameters().add( "return {'ctrl' : attrs.event.ctrlKey, 'shift' : attrs.event.shiftKey, 'alt' : attrs.event.altKey }" );
  }

  protected boolean isShiftPressed() {
    return isPressed( "shift" );
  }

  protected boolean isCtrlPressed() {
    return isPressed( "ctrl" );
  }

  protected boolean isAltPressed() {
    return isPressed( "alt" );
  }

  protected boolean isPressed( String p_keyCode ) {
    return RequestCycle.get().getRequest().getRequestParameters().getParameterValue( p_keyCode ).toBoolean( false );
  }
}

Just curious; why not using list view with checkbox for this? The solution to what you are trying to achieve seems more of Javascript coding then Wicket itself. I am sure you could find multiple answers on Stackoverflow for achieving multi row select from javascript.

For Wicket list view with checkbox, you can look at: https://cwiki.apache/confluence/display/WICKET/Listview+with+checkboxes

You might have valid reason to go with shift+click. But it might restrict you for the page you are on (if your table has pagination), and also without retaining the selection when e back.

Yes, it's possible. There are ponent org.apache.wicket.markup.html.form.ListMultipleChoice so I think you must use it.

This ponent provide behavior that you expect. You can read documentation in Wicket Docs

本文标签： javascriptWicket Select Multiple Rows (ShiftClick)Stack Overflow