如何在 FlexTable (GWT) 中交换行？

Question

我有一个有很多行的 FlexTable

ID - 字 - 向下 - 向上 1 - 车 - 下 - 2 - 猫 - 向下 - 向上 ...更多行

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 和一个按钮 MoveDown。我希望当用户单击向上（在第 ID=2 行）时，FlexTable 将变为

ID - 字 - 向下 - 向上 2 - 猫 - 向下 - 向上 1 - 车 - 下 ...更多行...

& 然后当用户点击向下（在第 ID=2 行）时，FlexTable 将变为

ID - 字 - 向下 - 向上 1 - 车 - 下 - 2 - 猫 - 向下 - 向上 ...更多行

Answer 1

对于这种类型的实现，最好使用 Grid 而不是 FlexTable。但是既然你想用弹性表来做

我就是这样做的（这将是一个非常冗长的答案:-)）。首先，您需要创建一个保存行值的对象。然后就很容易处理操作了。因此，首先创建一个对象，其中包含您需要为一行放置的所有属性。

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