Заполняющая ячейка таблицы потоков GWT

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   |
+-+-------+

Я пытался использовать table.getFlexCellFormatter().setColSpan(row, col, span), как рекомендовано в API, но это привело к первому результату выше. Есть идеи, как мне поступить?

@ Стефан: мой код

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