プログラムでグリッド表示してみよう連載三回目となる今回は、いよいよdhtmlxGridを使ってデータグリッドを表示します。最初なので、データグリッドを表示するための難度を知っていただくことをふまえて、簡単な内容で進めていきます。作業工程データグリッドを表示させるために、以下の作業工程で進めます。前回の記事でダウンロードしたファイルの中の「dhtmlxGrid/codebase」フォルダ一式を、適当な場所にコピーします。本連載では、lesson03というフォルダを作成し、その中にcodebaseフォルダをコピーして進めます。データグリッド配置データグリッドの配置は、非常に簡単です。ほんの少しのHTMLとJavaScriptの記述で実現できます。下のコードを入力して、htmlファイルを作成してください。style="width:600px;height:150px;"></div></body></html>ファイル名は適当で構いませんが、筆者はlesson03.htmlとしました。作成先は、codebaseをコピーした場所と同じです(記事では、lesson03フォルダ直下に作成した)。ファイル保存イメージ作成したhtmlファイルに、データグリッドを表示するためのJavaScriptを記述します。先ほどのファイルの<head></head>間に、以下のコードを追加してください。Lesson03();dataGrid.init();};//--></script></head>それでは、作成したファイルをブラウザで表示してみましょう。下図のようにデータグリッドが表示されたと思います。データグリッド表示いかがでしたか?とても簡単にデータグリッドを表示できることがお分かりになっていただけたかと思います※.1。次の項では、JavaScriptに少し手を加え、データグリッドに対してデータをロードさせたいと思います。JavaScriptが見慣れない記述方法と思われる方がいらっしゃるかと思いますが、これはJavaなどに見られるオブジェクト指向を擬似的に実現した「プロトタイプ・ベース」のオブジェクト指向です。一般的な関数による記述でも問題ありません。データロード処理実装では、データグリッドに対してデータをロードさせていきますが、本連載ではJSON形式のデータをロードさせたいと思います。Notation」の略語であり、軽量なデータ記述言語です。実際にロードさせる内容ですが、下表の内容をJSON形式のデータに置き換えて、JavaScriptでロードさせます。会社員それでは早速JSON形式に置き換えてみましょう。表の内容をJSON形式に変換してみます。"会社員"]}一行はハッシュを使って表し、一意に識別できるようにidを振ります。データ部は、ハッシュと配列を使って表します。キー「data」の部分が、それにあたります。このようにして、上記のように一行分のデータが出来上がります。各行は、カンマで区切ります。次に、全体のデータを表すハッシュを作成します。全体のデータは「rows」というキーを使って表します。"会社員"]}]};キー「rows」に入る値は、先ほど作成した行データの配列になります。作成したハッシュデータは、ローカル変数に代入しておきましょう。これで、JSON形式への置き換えは完了です。最後に、作成したJSONデータをデータグリッドにロードしましょう。以下の赤字コードを追加してください。追加したメソッドを呼び出す};修正したファイルを保存したあとに、ブラウザで表示してみましょう。実行した結果は、下図のようになると思います。データロード結果どうでしょう?皆さんはうまく表示できましたか?JSON形式を見慣れない方には、少し分かりづらい部分があったかもしれません。dhtmlxGridは、JSON以外にもXML形式やJsArray形式をサポートしているので、興味のある方は挑戦してみてください。おわりに連載の第三回目はいかがでしたか?やっと、データグリッドにデータを表示させるところまで行き着けました。今回の記事を通して、データグリッドを表示させることが、意外にも簡単だということをお分かりいただけたのではないでしょうか?次回は、今回作ったデータグリッドに対して、いくつかの機能を追加していこうと思います。今回と同様、機能追加についても簡単に実現できることをお伝えしていければと思います。おしまい※.記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。ITテクニカルセミナーレポート月額150円から導入できるICリコーダー「ICタイムリコーダー」詳しくはこちら「お問合せ」開発のご依頼やシステム導入のご相談などお気軽にどうぞ10823136金融システムやさまざまな業務システム開発、ECサイトなどの各種Webサイト構築・開発、IC(RFID)を活用したシステム、技術者向けOJTやICタイムリコーダー等、システム開発に関わることならオープントーンにお任せください。HOMEシステム開発ソリューション開発事例ニュース会社情報サイトマップお問合せ。