ウィキっとく? javascript > Yahoo UI Library > DataTable

※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

javascriptで表(データテーブル)を表示する(Yahoo UI Library: DataTable(2.6.0))

サンプル

  • 簡単なサンプル

事前準備

  • 必要ライブラリの読み込み(使用する機能によって増減します)
    <!-- Dependencies -->
     <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
     
     <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
     <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
     <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
     <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
     <!-- OPTIONAL: Connection (enables XHR) -->
     <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
     <!-- Source files -->
     <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
  • bodyのスタイル指定
    <body class="yui-skin-sam">
  • 表を置く場所指定
    <div id="myDataTable"></div>
  • データソースなどの準備
    1. YAHOO.util.Event.onDOMReady(function() {
    2. //データ
    3. var myData = [
    4. {name:"鈴木", kokugo:100, sugaku:60, rika:70, shakai:50, eigo:95},
    5. {name:"佐藤", kokugo:50, sugaku:100, rika:100, shakai:70, eigo:45},
    6. {name:"小林", kokugo:70, sugaku:70, rika:70, shakai:70, eigo:70},
    7. {name:"中村", kokugo:75, sugaku:95, rika:80, shakai:80, eigo:95},
    8. {name:"高橋", kokugo:80, sugaku:50, rika:80, shakai:90, eigo:90}
    9. ];
    10.  
    11. //データソース
    12. var myDataSource = new YAHOO.util.DataSource(myData);
    13. myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    14. myDataSource.responseSchema = {
    15. fields: [
    16. "name",
    17. {key:"kokugo", parser:"number"},
    18. {key:"sugaku", parser:"number"},
    19. {key:"rika", parser:"number"},
    20. {key:"shakai", parser:"number"},
    21. {key:"eigo", parser:"number"}
    22. ]
    23. };
    24.  
    25. //以下データテーブルの処理記述・・・
    26.  
    27. //データテーブル
    28. var myColumnDefs = [
    29. {key:"name", label:"名前"},
    30. {key:"kokugo", label:"国語"},
    31. {key:"sugaku", label:"数学"},
    32. {key:"rika", label:"理科"},
    33. {key:"shakai", label:"社会"},
    34. {key:"eigo", label:"英語"}
    35. ];
    36. var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
    37. });

逆引き

ソートさせたい。

  • カラム定義設定箇所で sortable:true を指定
    1. var myColumnDefs = [
    2. {key:"name", label:"名前", sortable:true},
    3. {key:"kokugo", label:"国語"},
    4. {key:"sugaku", label:"数学"},
    5. {key:"rika", label:"理科"},
    6. {key:"shakai", label:"社会"},
    7. {key:"eigo", label:"英語"}
    8. ];
    • 数値を数値でソートさせるにはデータソースのresponseSchema設定箇所で parser:"number" を指定すること。
      指定しないと文字列ソートされる。

カラムの幅を調整できるようにしたい。

  • カラム定義設定箇所で resizeable:true を指定
    1. var myColumnDefs = [
    2. {key:"name", label:"名前", resizeable:true},
    3. {key:"kokugo", label:"国語"},
    4. {key:"sugaku", label:"数学"},
    5. {key:"rika", label:"理科"},
    6. {key:"shakai", label:"社会"},
    7. {key:"eigo", label:"英語"}
    8. ];
    • 指定しても動かない場合、dragdropライブラリを追加してるか確認

数値を桁区切りしたい。

  • カラム定義設定箇所で formatter:"number" を指定
    1. var myColumnDefs = [
    2. {key:"name", label:"名前", formatter:"number"},
    3. {key:"kokugo", label:"国語"},
    4. {key:"sugaku", label:"数学"},
    5. {key:"rika", label:"理科"},
    6. {key:"shakai", label:"社会"},
    7. {key:"eigo", label:"英語"}
    8. ];
    • formatterオプションは他にも"button"、"checkbox"、"currency"、"date"、etc..などの設定値がある。また、独自のフォーマットも作成できる。

ページ繰り機能をつけたい。

  • YAHOO.widget.Paginatorを使用する。
    1. var oConfigs = {
    2. paginator: new YAHOO.widget.Paginator({
    3. rowsPerPage: 30
    4. })
    5. };
    6. var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs);
    • paginatorライブラリ,cssを追加する必要がある。

マウスオーバーで行をハイライトさせたい。

  1. var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
  2. myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
  3. myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);

行を選択状態にしたい。

  • 1行選択
    1. var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
    2. myDataTable.set("selectionMode", "single");
    3. myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
  • 複数行選択可
    1. var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
    2. myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);