|
開発やらlinuxについてやったこと、ひっかかったことのメモ
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)をすると，直前に追加した要素を削除してくれるらしいです． とりあえず，無事に出来てよかった． 次はグラフとテーブルを組み合わせた動的なテーブル更新を実現します． PR
ネット調べまくっていろいろやってみても全くできず。。。
何時間迷ったことか． サンプルと自分の見比べてようやく解決． 以下Teeda Ajaxの簡単なサンプルソース
<!-- var startAjax = function(){ function home_ajaxPage_ajaxStartAjax(res){ var result = $i('result'); result.innerHTML = res; } Kumu.Ajax.executeTeedaAjax(home_ajaxPage_ajaxStartAjax, [], Kumu.Ajax.RESPONSE_TYPE_TEXT); }; KumuEventConf = { 'click_startAjax' : startAjax } //--> </script> #2 <div id="result">ここが変わります</div> <input type="button" value="Start Ajax" id="startAjax" /> #3 public String ajaxStartAjax(){ return "Start Ajax"; } このサンプルの動作は，Start Ajaxというボタンを押すと，id="result"の部分のテキストが， サーバからとってきた文字列StartAjaxになります． 注意すべきは，関数名． churaプロジェクトだと，javaクラスは，プロジェクト名.web.ディレクトリ名パッケージの中にあるので， 関数は， ディレクトリ名＿ページクラス名_メソッド名 という命名規則です． さらにメソッドは頭がajaxで始まる名前にすること． |
カレンダー
カテゴリー
フリーエリア
最新記事
(07/25)
(04/22)
(04/21)
(02/22)
(02/08)
(02/04)
(01/16)
(11/26)
(11/24)
(11/12)
最新TB
プロフィール
ＨＮ：
poti
性別：
非公開
バーコード
ブログ内検索
最古記事
(11/16)
(11/16)
(11/17)
(11/17)
(11/17)
(11/18)
(11/18)
(11/19)
(11/21)
(11/21)
P R
|
