Symfoware

Symfowareについての考察blog

DWRでテーブルを操作する(util.js使用)

DWRに同梱されている「util.js」を使用して、テーブルにデータを設定してみます。


dwr.util.addRows



データを設定するには、dwr.util.addRowsを使用します。

書式は
dwr.util.addRows('tbodyのid', '表示するデータ', '表示に使用する関数', 'オプション')




dwr.util.removeAllRows



テーブルに設定されているデータを消去するには、dwr.util.removeAllRowsを使用します。

書式は
dwr.util.removeAllRows('tbodyのid', 'オプション')




サンプル



サンプルコードは以下の通り。


<html>
<head>
    <title>DWR サンプル</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src='dwr/util.js'></script>
    <script type="text/javascript">
    
    //セルの描画に使用する関数
    var cellFunc = [
        function(data) {return data; },
        function(data) {return data.toUpperCase(); }
    ]
    
    //ボタンを押したときに呼ばれる関数
    function printData() {
        //データ設定
        dwr.util.addRows("sample_t", ['data_a', 'data_b', 'data_c'], cellFunc);
    }
    
    function clearData() {
        //テーブルの中身を消去
        dwr.util.removeAllRows("sample_t");
    }
    
    </script>
</head>
<body>
<input type="button" value="表示" onClick="printData();" />
<input type="button" value="消去" onClick="clearData();" /><br/>
<table border="1">
    <thead>
        <tr>
            <th>data</th>
            <th>Upper</th>
        </tr>
     </thead>
     <tbody id="sample_t"> </tbody>
</table>

</body>
</html>





動かしてみると・・・

04_001_20100721125420.png





また、設定する値をリストの入れ子にすると、行列の表現が行えます。


<html>
<head>
    <title>DWR サンプル</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src='dwr/util.js'></script>
    <script type="text/javascript">
    
    //セルの描画に使用する関数
    var cellFunc = [
        function(data) {return data[0]; },
        function(data) {return data[1]; }
    ]
    
    //ボタンを押したときに呼ばれる関数
    function printData() {
        //データ設定
        dwr.util.addRows("sample_t", [['a1', 'a2'], ['b1', 'b2']], cellFunc);
    }
    
    function clearData() {
        //テーブルの中身を消去
        dwr.util.removeAllRows("sample_t");
    }
    
    </script>
</head>
<body>
<input type="button" value="表示" onClick="printData();" />
<input type="button" value="消去" onClick="clearData();" /><br/>
<table border="1">
    <thead>
        <tr>
            <th>data_1</th>
            <th>data_2</th>
        </tr>
     </thead>
     <tbody id="sample_t"> </tbody>
</table>

</body>
</html>




実行結果

04_002_20100721125420.png





【参考URL】
util.js: Tables Manipulation
http://directwebremoting.org/dwr/browser/util/tables.html

DWRでリッチなWebページを作る!(7) - ユーティリティ関数「addRows」でテーブルを表示する
http://www.javadb.jp/Code.sd?id=1206









関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/07/31(土) 12:10:45|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ