CodeZine(コードジン)

特集ページ一覧

Dojo道場 ~ 第3回「DataGridをもっと使いこなす」

「Dojo道場」~実用アプリ構築のためのベストプラクティス

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/27 14:00

 本シリーズでは、豊富な機能の中から厳選した、ビジネス・アプリケーションのためのベスト・プラクティスを中心に、Dojo Toolkitの活用方法をご紹介します。連載の第3回である今回は、実際のアプリケーションの要件を満たすための一歩進んだDataGridの機能を解説します。

目次

はじめに

 多彩なDojo Toolkitの機能の中でも、ビジネス・アプリケーションの構築に欠かせないコンポーネントとして、以前の記事『Dojo ToolkitのDataGridを使いこなす』でも取り上げたDataGrid。典型的な表形式データの表示、編集機能に加えて、行、カラム表示のカスタマイズや新たに追加されたEnhancedGrid、TreeGridといった派生クラスの機能など、前回ご紹介しきれなかった機能、利用法がまだまだあります。今回は実際のアプリケーションの要件を満たすための一歩進んだ機能を解説します。

DataGridの作成

 はじめに、以前の記事のサンプル・コードでDataGrid作成の基本をおさらいしましょう。

  1. DataGridを利用するには、まず最初にDataGridモジュールを読み込みます。
  2. dojo.require("dojox.grid.DataGrid");
    

     また、スタイルシートを記述する箇所で、DataGridのスタイルシートも読み込んでおきます。今回はDojo 1.5で追加されたclaroテーマ用のスタイルシートを使います。

    @import "../dojo-release-1.5.0/dojox/grid/resources/claroGrid.css";
    
  3. DataGridは、前回の記事でも紹介したDojo ToolkitのデータAPIを利用してデータにアクセスしますので、DataGridに表示するデータ用のデータ・ストアを作成します。
  4. var myDataStore = new dojo.data.ItemFileReadStore({data: {items: [
        {name: "鈴木一郎", email: "suzuki@ibm.com",
            birthDate: 250555200000, photo: "images/photo1.gif", group: 3},
    (中略)
    ]}});
    
  5. 画像のURLや日付などの数値情報を分かりやすく表示するために formatter関数を定義します。
  6. function myDateFormatter(date){
        if(!date) return "";
        return dojo.date.locale.format(new Date(date), {fullYear: true, selector: "date"});
    };
    
    function myGroupFormatter(group){
        switch(group){
        case 1: return "家族";
        case 2: return "友人";
        case 3: return "会社";
        default: return "";
        }
    };
    
    function myImageFormatter(url){
        if(!url) url = dojo.moduleUrl("dojo", "resources/blank.gif").toString();
        return "<img width='40' height='40' src='" + url + "'/>";
    };
    
  7. カラムごとの情報を記述してDataGridのビューを定義します。上記のformatter関数もここでカラムと結び付けます。
  8. var myStructure = [
        {cells: [
            {name: "画像", field: "photo", width: "50px",
                formatter: myImageFormatter},
            {name: "名前", field: "name", width: "auto"},
            {name: "メールアドレス", field: "email", width: "auto"},
            {name: "生年月日", field: "birthDate", width: "auto",
                formatter: myDateFormatter},
            {name: "グループ", field: "group", width: "60px",
                formatter: myGroupFormatter}
        ]}
    ];
    
  9. 最後にHTMLマークアップで、データ・ストアやビューの定義を指定して、DataGridを作成します(DataGridの作成はJavaScriptでも行えます)。
  10. <table dojoType="dojox.grid.DataGrid" id="myDataGrid"
        style="width: 500px; height: 200px;"
        store="myDataStore" structure="myStructure"></table>
    

 以上の手順で以下のようなDataGridが表示されます。

実行結果
実行結果

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 野口 雅人(ノグチ マサト)

    日本アイ・ビー・エム株式会社 ソフトウェア開発研究所 シニア・テクニカ ル・スタッフ・メンバー 1990年、日本IBM入社。ホームページ・ビルダー、Rational Application Developer などの製品開発に従事。現在はWeb 2.0/RIA関連のソフトウェア開発を担当。

バックナンバー

連載:「Dojo道場」~実用アプリ構築のためのベストプラクティス

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5