Teeda Ajaxを使った動的テーブル更新

Teeda-html-example　にはajaxを用いたテーブルのリスト更新のサンプルがついているけど，そのサンプルはボタンを押す度に，テーブルに行を追加していくだけ．

僕がしたいのは，ボタンを押すと，テーブル内の要素が書き換わるようなajax

しかも，テーブルはforeachで動的に行数なども変化させつつ生成したい．

かなり調べまくった結果，やり方わかったので以下に記述．

ajax化したいテーブルサンプルはこんな感じ
<!-- テストajaxテーブル -->
<table border="1">
<thead>
    <tr>
        <th scope="col"></th>
        <th scope="col">hoge</th>
        <th scope="col">hoge</th>
    </tr>
</thead>
<tbody>
    <tr id="aaa" style="display: none;">
        <th  id="ajax">hogehoge</th>
        <td  id="test1">0</td>
        <td  id="test2">0</td>
    </tr>
</tbody>
</table>

このtrタグにidは，HashMapオブジェクトのID名(キー値とでも呼ぶのかな?)．
実際の要素となる，ajax,test1,test2は，パブリック変数．
以下ページクラスのajax部分ソース↓
    public Map ajaxTest(){
        List listItems = new ArrayList();
        testItems = new TestDto[3];
        for(int i=0; i<3; i++){
        TestDto dto = new TestDto();
        dto.setAjax("およよ");
        dto.setTest1(1);
        dto.setTest2(2);
        testItems[i] = dto;
        listItems.add(dto);
        }
        Map mapTest = new HashMap();
        mapTest.put("aaa", listItems);       
        return mapTest;
    }
こんな感じでmapオブジェクトを返してあげます．
<script type=text/javascript>
<!--
次，ajaxを実現するjavascript部分↓

var startAjaxTest = function(){
     function home_areajaxPage_ajaxTest(res){
          Kumu.Ajax.removeRender("aaa");
          Kumu.Ajax.render(res);
     }
 Kumu.Ajax.executeTeedaAjax(home_areajaxPage_ajaxTest, []);
};

KumuEventConf = {
            'click_startAjaxTest' : startAjaxTest
          }
//-->
</script>

あ，jsファイルの読み込みもちろん忘れずに．

<input type="button" value="Test" id="startAjaxTest"/>
こんな感じでボタン生成してあげれば完成．

ボタンを押すと，ページクラスから値を引っ張ってテーブルの要素に代入します．
ページクラスの値を変えて，ボタンを押せば，ちゃんと要素が書き換わるかと．

僕が迷ったのは，上記javascriptの赤文字で記述されてる部分．
それがサンプルには記述されてないため，どんどん要素が追加されていく仕様だったみたい．

Kumu.Ajax.render()はデフォルトでinnerHTMLでセットする動作らしい．
そして調べた結果
Kumu.Ajax.removeRender(id)をすると，直前に追加した要素を削除してくれるらしいです．

とりあえず，無事に出来てよかった．
次はグラフとテーブルを組み合わせた動的なテーブル更新を実現します．