第３回 プログラムでグリッド表示してみよう

第３回 プログラムでグリッド表示してみよう

連載三回目となる今回は、いよいよdhtmlxGridを使ってデータグリッドを表示します。最初なので、データグリッドを表示するための難度を知っていただくことをふまえて、簡単な内容で進めていきます。

作業工程

データグリッドを表示させるために、以下の作業工程で進めます。

  • 準備
  • データグリッド配置
  • データロード処理実装
  • 完成
準備

　まずは、前回の記事でダウンロードしたファイルの中の「dhtmlxGrid/codebase」フォルダ一式を、適当な場所にコピーします。
　本連載では、lesson03というフォルダを作成し、その中にcodebaseフォルダをコピーして進めます。

データグリッド配置

　データグリッドの配置は、非常に簡単です。ほんの少しのHTMLとJavaScriptの記述で実現できます。
　まずは、下のコードを入力して、htmlファイルを作成してください。

HTMLコード

<html>
<head>
  <title>Lesson03 - データグリッド表示</title>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxgrid.css">
  <script type="text/javascript" src="codebase/dhtmlxcommon.js"></script>
  <script type="text/javascript" src="codebase/dhtmlxgrid.js"></script>
  <script type="text/javascript" src="codebase/dhtmlxgridcell.js"></script>
</head>
<body>
<h1>Lesson03 - データグリッド表示</h1>
<div id="mygrid" style="width:600px;height:150px;"></div>
</body>
</html>

　ファイル名は適当で構いませんが、筆者はlesson03.htmlとしました。
　作成先は、codebaseをコピーした場所と同じです（記事では、lesson03フォルダ直下に作成した）。

図1. ファイル保存イメージ
図1. ファイル保存イメージ

　作成したhtmlファイルに、データグリッドを表示するためのJavaScriptを記述します。先ほどのファイルの<head></head>間に、以下のコードを追加してください。

JavaScriptコード

<head>
  ・・・省略・・・
  <script type="text/javascript">
  <!--
  var Lesson03 = function() {
  };
  
  Lesson03.prototype = {
    init : function() {
      this.mygrid = new dhtmlXGridObject("mygrid");
      this.mygrid.setImagePath("codebase/imgs/");
      this.mygrid.setHeader("ID,Name,Description");
      this.mygrid.setInitWidths("*,150,350");
     this.mygrid.setColAlign("right,left,left");
      this.mygrid.setSkin("light");
      this.mygrid.init();
    }
  };
  
  window.onload = function() {
    var dataGrid = new Lesson03();
    dataGrid.init();
  };
  //-->
  </script>
</head>

　それでは、作成したファイルをブラウザで表示してみましょう。
　下図のようにデータグリッドが表示されたと思います。

図2. データグリッド表示
図2. データグリッド表示

　いかがでしたか？とても簡単にデータグリッドを表示できることがお分かりになっていただけたかと思います※.1。
次の項では、JavaScriptに少し手を加え、データグリッドに対してデータをロードさせたいと思います。


　※.1 JavaScriptが見慣れない記述方法と思われる方がいらっしゃるかと思いますが、これはJavaなどに見られるオブジェクト指向を擬似的に実現した「プロトタイプ・ベース」のオブジェクト指向です。なお、一般的な関数による記述でも問題ありません。

データロード処理実装

　では、データグリッドに対してデータをロードさせていきますが、本連載ではJSON形式のデータをロードさせたいと思います。
　JSONの詳しい説明は割愛させていただきますが、JSONは「JavaScript Object Notation」の略語であり、軽量なデータ記述言語です。


　さて、実際にロードさせる内容ですが、下表の内容をJSON形式のデータに置き換えて、JavaScriptでロードさせます。

表1. JSONに変換するデータ

ID Name Description
101 山田太郎 俳優
102 鈴木一郎 会社員
103 斉藤花子 フリーター
104 佐藤良子 主婦
105 田中権蔵 会社員

　それでは早速JSON形式に置き換えてみましょう。まずは、表の内容をJSON形式に変換してみます。

{id: 1, data: ["101", "山田太郎", "俳優"]},
{id: 2, data: ["102", "鈴木一郎", "会社員"]},
{id: 3, data: ["103", "斉藤花子", "フリーター"]},
{id: 4, data: ["104", "佐藤良子", "主婦"]},
{id: 5, data: ["105", "田中権蔵", "会社員"]}

　一行はハッシュを使って表し、一意に識別できるようにidを振ります。また、データ部は、ハッシュと配列を使って表します。キー「data」の部分が、それにあたります。
　このようにして、上記のように一行分のデータが出来上がります。各行は、カンマで区切ります。

　次に、全体のデータを表すハッシュを作成します。全体のデータは「rows」というキーを使って表します。

var json = {
  rows: [
    {id: 1, data: ["101", "山田太郎", "俳優"]},
    {id: 2, data: ["102", "鈴木一郎", "会社員"]},
    {id: 3, data: ["103", "斉藤花子", "フリーター"]},
    {id: 4, data: ["104", "佐藤良子", "主婦"]},
    {id: 5, data: ["105", "田中権蔵", "会社員"]}
  ]
};

　キー「rows」に入る値は、先ほど作成した行データの配列になります。作成したハッシュデータは、ローカル変数に代入しておきましょう。
　これで、JSON形式への置き換えは完了です。

　最後に、作成したJSONデータをデータグリッドにロードしましょう。以下の赤字コードを追加してください。

データロード処理

  Lesson03.prototype = {
    init : function() {
      ・・・省略・・・
    }, // カンマを忘れずに！
    load : function() {
      var json = {
        rows: [
          {id: 1, data: ["101", "山田太郎", "俳優"]},
          {id: 2, data: ["102", "鈴木一郎", "会社員"]},
          {id: 3, data: ["103", "斉藤花子", "フリーター"]},
          {id: 4, data: ["104", "佐藤良子", "主婦"]},
          {id: 5, data: ["105", "田中権蔵", "会社員"]}
        ]
      };
      this.mygrid.parse(json, "json"); // データロード
    }
  };
  
  window.onload = function() {
    var dataGrid = new Lesson03();
    dataGrid.init();
    dataGrid.load(); // 追加したメソッドを呼び出す
  };

　修正したファイルを保存したあとに、ブラウザで表示してみましょう。実行した結果は、下図のようになると思います。

図3. データロード結果
図3. データロード結果

　どうでしょう？皆さんはうまく表示できましたか？JSON形式を見慣れない方には、少し分かりづらい部分があったかもしれません。
　dhtmlxGridは、JSON以外にもXML形式やJsArray形式をサポートしているので、興味のある方は挑戦してみてください。

おわりに

　連載の第三回目はいかがでしたか？やっと、データグリッドにデータを表示させるところまで行き着けました。今回の記事を通して、データグリッドを表示させることが、意外にも簡単だということをお分かりいただけたのではないでしょうか？
　次回は、今回作ったデータグリッドに対して、いくつかの機能を追加していこうと思います。今回と同様、機能追加についても簡単に実現できることをお伝えしていければと思います。お楽しみに！


第3回 おしまい



※.記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。