使 GWT Flextable 列可调整大小

Question

我正在尝试使我的 flextables 列可调整大小。因此用户可以决定列的宽度。一种解决方案是使用 css resize 属性但这在 IE 中不起作用。有人知道如何在 IE 中使用它吗？

我的想法是捕获 onBrowserEvent 并注册一些鼠标处理程序，但我没有得到正确的元素来调整大小。

我希望你能帮助我。提前致谢！

Answer 1

您好，我找到了适合自己的解决方案。也许这可以帮助某人。

 public class ResizableFlexTable
    extends FlexTable
{
  private int mouseDownX;
  private boolean mouseDown;
  private int columnWidth;
  private TableCellElement headerElem;
  private int column;
  private ResizeMode resizeMode;

  /**
   * 
   */
  public ResizableFlexTable()
  {
    super();
    sinkEvents( Event.ONMOUSEMOVE );
    sinkEvents( Event.ONMOUSEDOWN );
    sinkEvents( Event.ONMOUSEUP );
    sinkEvents( Event.ONCLICK );
    Event.setEventListener( getElement(), this );
  }

  @Override
  public void onBrowserEvent( Event event )
  {
    if ( event.getType().equals( "change" ) )
    {
      super.onBrowserEvent( event );
      return;
    }

    boolean eventMouseUp = event.getType().equals( "mouseup" );
    boolean eventClick = event.getType().equals( "click" );
    boolean eventMouseDown = event.getType().equals( "mousedown" );
    boolean eventMouseMove = event.getType().equals( "mousemove" );

    if ( eventMouseUp )
    {
      mouseDownX = -1;
      mouseDown = false;
    }
    if ( resizeMode == ResizeMode.RESIZING && eventClick )
    {
      resizeMode = ResizeMode.ENDING;
    }

    TableCellElement tableCellElement = findNearestParentCell( (Element) event.getEventTarget()
        .cast() );
    if ( tableCellElement == null )
    {
      super.onBrowserEvent( event );
      return;
    }

    Element trElem = tableCellElement.getParentElement();
    if ( trElem == null )
    {
      super.onBrowserEvent( event );
      return;
    }
    TableRowElement tr = TableRowElement.as( trElem );
    // Element sectionElem = tr.getParentElement();
    if ( tr == null )
    {
      super.onBrowserEvent( event );
      return;
    }

    int col = tableCellElement.getCellIndex();
    if ( tr == getTableHeadElement() )
    {
      int mouseX = event.getClientX();
      int right = tableCellElement.getAbsoluteLeft() + tableCellElement.getOffsetWidth();
      if ( !mouseDown && eventMouseDown )
      {
        if ( mouseX <= right && mouseX >= right - 10 )
        {
          headerElem = tableCellElement;
          column = col;
          mouseDownX = event.getClientX();
          mouseDown = true;
          columnWidth = headerElem.getOffsetWidth();
        }
      }
      else if ( eventMouseMove )
      {
        if ( mouseDown || mouseX <= right && mouseX >= right - 10 )
        {
          tableCellElement.getStyle().setCursor( Cursor.COL_RESIZE );
        }
        else
        {
          tableCellElement.getStyle().setCursor( Cursor.AUTO );
        }
      }
    }
    else
    {
      super.onBrowserEvent( event );
    }

    if ( headerElem != null && eventMouseMove && mouseDown )
    {
      int move = event.getClientX() - mouseDownX;
      @SuppressWarnings ( "hiding")
      int columnWidth = this.columnWidth + move;
      if ( columnWidth > 24 )
      {
        getColumnFormatter().getElement( column ).setAttribute( "width", columnWidth + "px" );
        resizeMode = ResizeMode.RESIZING;
      }
    }

    if ( resizeMode != ResizeMode.RESIZING && resizeMode != ResizeMode.ENDING && eventClick )
    {
      super.onBrowserEvent( event );
    }
    else if ( resizeMode == ResizeMode.ENDING )
    {
      resizeMode = ResizeMode.NO;
    }
  }

  /**
   * @return
   */
  private TableRowElement getTableHeadElement()
  {
    TableRowElement row = getRowFormatter().getElement( 0 ).cast();
    return row;
  }

  /**
   * Diese Methode ist 1 zu 1 aus der Oberklasse übernommen. Nicht ändern!!!
   */
  private TableCellElement findNearestParentCell( Element elem )
  {
    while ( (elem != null) && (elem != getElement()) )
    {
      String tagName = elem.getTagName();
      if ( "td".equalsIgnoreCase( tagName ) || "th".equalsIgnoreCase( tagName ) )
      {
        return elem.cast();
      }
      elem = elem.getParentElement();
    }
    return null;
  }
}

这不是很好，但对我有用。

使 GWT Flextable 列可调整大小

Make GWT Flextable column resizeable

gwt

resize

flextable