Question

我有一个包含多行的FlexTable

ID - Word - Down - Up
1 - car - Down -
2 - cat - Down - Up
...more rows

FlexTable tb=new FlexTable();
tb.setText(0,0,"ID");
tb.setText(0,1,"Word");
tb.setText(0,2,"Down");
tb.setText(0,3,"Up");
tb.setText(1,0,"1");
tb.setText(1,1,"car");
tb.setText(2,0,"2");
tb.setText(2,1,"cat");
tb.setWidget(1,2,downButton);
tb.setWidget(2,3,upButton);
......

现在我有一个按钮MoveUp＆amp; MoveDown按钮。我想当用户点击Up（行ID = 2）时，FlexTable将变为

ID - Word - Down - Up
2 - cat - Down - Up
1 - car - Down
... more rows ...

＆安培;然后当用户点击Down（行ID = 2）时，FlexTable将变为

ID - Word - Down - Up
1 - car - Down -
2 - cat - Down - Up
...more rows

Answer 1

对于这种类型的实现，如果您可以使用Grid而不是FlexTable，则会更好。但是因为你想使用flex table

来做

这就是我要做的事情（这将是一个非常低调的答案:-)）。首先，您需要创建一个包含行值的对象。然后很容易处理操作。因此，首先要创建一个对象，其中包含您需要为行添加的所有属性。

public class RowWidget
{

    private String name;
    private String id;

    public RowWidget( String name, String id )
    {
        this.name = name;
        this.id = id;
    }

    public String getName()
    {
        return name;
    }

    public void setName( String name )
    {
        this.name = name;
    }

    public String getId()
    {
        return id;
    }

    public void setId( String id )
    {
        this.id = id;
    }
}

然后，您可以创建要添加到表中的数据列表

List<RowWidget> widgets = new ArrayList<RowWidget>();
        RowWidget r1 = new RowWidget( "car", "1" );
        widgets.add( r1 );
        RowWidget r2 = new RowWidget( "cat", "2" );
        widgets.add( r2 );
        RowWidget r3 = new RowWidget( "dog", "3" );
        widgets.add( r3 );
        RowWidget r4 = new RowWidget( "mouse", "4" );
        widgets.add( r4 );

然后编写一个方法来在flex表中绘制内容。

private FlexTable drawTable( final List<RowWidget> widgets )
    {
        FlexTable tb = new FlexTable();
        tb.setText( 0, 0, "ID" );
        tb.setText( 0, 1, "Word" );
        tb.setText( 0, 2, "Down" );
        tb.setText( 0, 3, "Up" );

        for ( int i = 1; i <= widgets.size(); i++ )
        {
            int j = i-1;
            final RowWidget row = widgets.get( j );
            tb.setText( i, 0, row.getId() );
            tb.setText( i, 1, row.getName() );
            if ( i != 1 )
            {
                Anchor upLink = new Anchor( "UP" );
                upLink.addClickHandler( new ClickHandler()
                {

                    @Override
                    public void onClick( ClickEvent event )
                    {
                        changePosition( false, row, widgets );

                    }

                } );
                tb.setWidget( i, 2, upLink );
            }

            Anchor down = new Anchor( "Down" );
            down.addClickHandler( new ClickHandler()
            {

                @Override
                public void onClick( ClickEvent event )
                {
                    changePosition( true, row, widgets );

                }
            } );
            tb.setWidget( i, 3, down );
        }


        return tb;
    }

对于此示例，我将此FlexTable呈现为FlowPanel。

FlowPanel container = new FlowPanel();
container.add( drawTable( widgets ) );

此方法执行行元素的位置更改。

private void changePosition( boolean isDown, RowWidget row, List<RowWidget> widgets )
    {
        int index = widgets.indexOf( row );
        widgets.remove( index );

        if ( isDown )
        {
            widgets.add( index + 1, row );
        }
        else
        {
            widgets.add( index - 1, row );
        }
        container.clear();
        container.add( drawTable( widgets ) );
    }

如何在FlexTable（GWT）中交换行？

1 个答案: