SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 多彩な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が表示されます。

実行結果
実行結果

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
行やカラムをまたがるセルの表示

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5640 2010/12/27 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング