如何交換FlexTable（GWT）中的行？

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

現在我有一個按鈕上移&按鈕下移。我想，當用戶點擊拉（行ID = 2），將FlexTable將成爲

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

&那麼當用戶單擊向下（在排ID = 2），將FlexTable將成爲

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

Answer 1

對於這種類型的實現，如果可以使用Grid而不是FlexTable，則更好。但既然你想用flex表做

這就是我該怎麼做的（這將是一個非常懶惰的答案:-)）。首先，您需要創建一個保存行值的對象。那麼處理這個操作就很容易了。所以首先創建一個包含所有需要放置一行的屬性的對象。

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