Question

在GWT中，我试图通过网格中的按钮获取FlexTable，以便单击其中一个按钮会导致发生某些事情。但是，当我在浏览器中查看结果时，我得到以下结果：

+-+-+ +-+  
|a|b| |c|  
+-+-+ +-+  
  |e|      
+-+-+-+-+-+
|d|h|i|f|g|
+-+-+-+-+-+
  |j|      
  +-+      
  |k|
  +-+

而我想要的是：

+-+---+---+
|a| b | c |
+-+---+-+-+
| | e | | |
| +-+-+ | |
| |h|i|f|g|
|d+-+-+ | |
| | j | | |
| +---+-+-+
| |   k   |
+-+-------+

我尝试使用API中推荐的table.getFlexCellFormatter().setColSpan(row, col, span)，但这导致了上面的第一个结果。关于我应该如何进行的任何想法？

@Stefan：我的代码是

public MyPanel() {
    Button b;
    FlexTable ft = new FlexTable();
    ClickHandler click = new ClickHandler() {
        @Override
        public void onClick() {
            // do something here with the button that was clicked
        }
    }
    b = new Button("a");
    b.addClickHandler(click);
    ft.setWidget(0, 0, b);
    // do the same for button "b" at (0,1), "c" at (0,3), "d" at (1,0), "e" at (1,1),
    // "f" at (1,3), "g" at (1,4), "h" at (2,1), "i" at (2,2), "j" at (3,1), "k" at (4,1)
    ft.getFlexCellFormatter().setColSpan(0, 1, 2);
    ft.getFlexCellFormatter().setColSpan(0, 3, 2);
    ft.getFlexCellFormatter().setRowSpan(1, 0, 4);
    ft.getFlexCellFormatter().setColSpan(1, 1, 2);
    ft.getFlexCellFormatter().setRowSpan(1, 3, 3);
    ft.getFlexCellFormatter().setRowSpan(1, 4, 3);
    ft.getFlexCellFormatter().setColSpan(3, 1, 2);
    ft.getFlexCellFormatter().setColSpan(4, 1, 4);
}

Answer 1

在表格单元格上设置colspan和rowspan不会更改相邻单元格索引，它只是将它们推开。例如，要实现此表：

+-+-+
|a|b|
| |-+
|a|c|
+-+-+

我们使用：

ft.setWidget(0, 0, a);
ft.setWidget(0, 1, b);
ft.setWidget(1, 0, c); // !!!
ft.getFlexCellFormatter().setRowSpan(0,0,2);

请参阅，小部件c位于属于第一行的第一个单元格中。如果您考虑将生成的HTML，可能会以这种方式查看内容：

<table>
  <tr>
    <td rolspan="2">a</td><td>b</td>
  </tr><tr>
    <td>c</td>
  </tr>
</table>

调整单元格索引，所有内容都应按照您希望的方式排列：

ft.setWidget(0, 0, a);
ft.setWidget(0, 1, b);
ft.setWidget(0, 2, c);
ft.setWidget(1, 0, d);
ft.setWidget(1, 1, e);
ft.setWidget(1, 2, f);
ft.setWidget(1, 3, g);
ft.setWidget(2, 0, h);
ft.setWidget(2, 1, i);
ft.setWidget(3, 0, j);
ft.setWidget(4, 0, k);
ft.getFlexCellFormatter().setColSpan(0, 1, 2);
ft.getFlexCellFormatter().setColSpan(0, 2, 2);
ft.getFlexCellFormatter().setRowSpan(1, 0, 4);
ft.getFlexCellFormatter().setColSpan(1, 1, 2);
ft.getFlexCellFormatter().setRowSpan(1, 2, 3);
ft.getFlexCellFormatter().setRowSpan(1, 3, 3);
ft.getFlexCellFormatter().setColSpan(3, 0, 2);
ft.getFlexCellFormatter().setColSpan(4, 0, 4);

GWT流量表填充单元格

1 个答案: