1

多くの行を持つ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 - 猫 - 下 - 上
...さらに行
4

1 に答える 1

0

このタイプの実装では、FlexTable の代わりに Grid を使用できる方が適切です。しかし、フレックステーブルを使用してやりたいので

これは私がそれを行う方法です（これは非常に長い答えになるでしょう:-)）。まず、行の値を保持するオブジェクトを作成する必要があります。そうすれば、操作が簡単になります。したがって、最初に、行に配置する必要があるすべての属性を持つオブジェクトを作成します。

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

次に、フレックス テーブルにコンテンツを描画するメソッドを記述します。

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 ) );
    }
于 2013-11-27T06:04:23.033 に答える