YUI の DataTable で行選択のイベント処理を実装

Ajax JavaScript

Ext JS の DataGrid と同等の YUI Library 2.4.1 の DataTable を使って行選択時のイベント処理を実装してみた。

結果的に、機能や API の使い勝手に大差は無いものの、現時点では Ext JS の DataGrid の方が洗練されており完成度が高い印象を受けた。YUI の DataTable はベータ版のようだし、今後の改良次第といったところか。

サンプル

<html>
<head>
  <title>YUI DataTable sample</title>

  <link type="text/css" rel="stylesheet" href="../yui/build/assets/skins/sam/datatable.css"></link>

  <script type="text/javascript" src="../yui/build/utilities/utilities.js"></script>
  <script type="text/javascript" src="../yui/build/datasource/datasource-beta-min.js"></script>
  <script type="text/javascript" src="../yui/build/datatable/datatable-beta-min.js"></script>

</head>
<body >
<h1>YUI DataTable Sample</h1>

<div id="grid-sample" class="yui-skin-sam"></div>

<script type="text/javascript">
<!--
  YAHOO.util.Event.addListener(window, "load", new function() {

    //ヘッダー情報の定義
    var columns = [
      {key: "title", sortable: true, resizeable: true},
      {key: "point", sortable: true, resizeable: true},
      {key: "date", formatter: YAHOO.widget.DataTable.formatDate, sortable: true, resizeable: true}
    ];

    //表示データの定義
    var data = [
      {title: "test1", point: 10, date: new Date(2008, 2, 1)},
      {title: "a", point: 5, date: new Date(2008, 2, 10)},
      {title: "aaaaaaaaaaaaaaaaaaaaa", point: 5, date: new Date(2008, 2, 2)},
      {title: "abc", point: 100, date: new Date(2008, 3, 1)},
      {title: "123", point: 15, date: new Date(2008, 4, 5)},
      {title: "チェックデータ", point: -10, date: new Date(2008, 1, 1)}
    ];

    var dsrc = new YAHOO.util.DataSource(data);
    dsrc.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    dsrc.responseSchema = {
      fields: ["title", "point", "date"]
    };

    var table = new YAHOO.widget.DataTable("grid-sample", columns, dsrc, {});

    //マウスオーバー時のハイライト処理の設定
    table.subscribe("rowMouseoverEvent", table.onEventHighlightRow); 
    table.subscribe("rowMouseoutEvent", table.onEventUnhighlightRow); 
    //行選択の有効化
    table.subscribe("rowClickEvent", table.onEventSelectRow);

    //行選択時のイベント処理を実装
    table.subscribe("rowSelectEvent", function(e) {

      //選択行（レコード）の ID が入った配列を取得
      var list = this.getSelectedRows();
      var rs = this.getRecordSet();

      for (var i = 0; i < list.length; i++) {
        //選択行（レコード）のタイトルを表示
        alert("selected: id = " + list[i] + ", title = " + rs.getRecord(list[i]).getData("title"));
      }
    });
  });
//-->
</script>
</body>
</html>

行の選択

行の選択の有効化やマウスオーバー時のハイライト処理の設定は、以下のように subscribe メソッドを使ってイベントと実行するメソッドを結びつける必要があった。
なお、デフォルト設定では複数行の選択が可能になる。

<script type="text/javascript">
<!--
    ・・・
    //マウスオーバー時のハイライト処理の設定
    table.subscribe("rowMouseoverEvent", table.onEventHighlightRow); 
    table.subscribe("rowMouseoutEvent", table.onEventUnhighlightRow); 
    //行選択の有効化
    table.subscribe("rowClickEvent", table.onEventSelectRow);
    ・・・
//-->
</script>

注意点

サンプルの実装にあたり以下のような点で戸惑った。

  • utilities.js を読み込まないと resizeable: true にしても列幅の変更ができない（サンプルの dr_rowselect.html では utilities.js を使っていない）
  • DataTable のスクリプト処理は DataTable を表示する要素より後に記述しなければならない
  • DataTable を表示する要素、あるいは親要素の class 属性で "yui-skin-sam" を設定しないとスタイルシートが適用されない
  • scrollable に true を設定する（スクロールバーの表示）とヘッダー部分しか列幅が変わらなくなる
  • 日付を適切にソートするには Date オブジェクトとしてデータ定義されていなければならない