「データグリッドを使ったRichなWebインタフェースを開発する」第4回データグリッドの機能を知る

第４回データグリッドの機能を知る

連載四回目となる今回は、データグリッドの機能をいくつか紹介していきたいと思います。

作業開始

準備

作業を始める前に、今回使用するHTMLファイルなどを準備しましょう。本稿では、前回の記事の内容をもとに進めたいと思います。まずは、前回の記事で作成した「lesson03」フォルダをコピーして、「lesson04」フォルダにリネームします。続いて、lesson04フォルダ内にある「lesson03.html」を、「lesson04.html」にリネームします。最後に、下記の赤字コードの部分を、lesson04.htmlのコードに適用します。

lesson04.html

<html>
<head>
  <title>Lesson04 - データグリッドの機能を知る</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>
  <script type="text/javascript">
  <!--
  var Lesson04 = function() {
  };
  
  Lesson04.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();
    },
    
    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 Lesson04();
    dataGrid.init();
    dataGrid.load();
  };
  //-->
  </script>
</head>
<body>
<h1>Lesson04 - データグリッドの機能を知る</h1>
<div id="mygrid" style="width:600px;height:150px;"></div>
</body>
</html>

以上で準備は完了です。

レコードの並び替え(ソート)

グリッドに表示されたレコードを並び替える機能を追加してみましょう。この機能を追加するには、グリッドを生成するときに「setColSorting」を使って並び替えに関する設定を行います。詳細は、下記のコードをご覧ください。

lesson04.html

    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.setColSorting("int,str,str");
      this.mygrid.setSkin("light");
      this.mygrid.init();
    },

赤字コードの部分を、lesson04.htmlに追加してください。そして表示してみましょう。

図1. レコード並び替え前

図2. Nameでレコードを並び替え

ヘッダーをクリックすると、レコードが並び替わるのが分かると思います。 setColSortingに設定できるのは、以下のソートタイプです。

int : 数値で並び替え
str : 文字で並び替え
date : 日付で並び替え
na : 並び替え無し
sortingFunction : 独自ソートの関数

上記のソートタイプを列数分だけカンマ区切りで設定すると、指定したソートタイプに対応した並び替え機能が適用されます。

セルの操作

現在はすべての列が編集可能になっていますが、特定の列のみ編集を許可することも可能です。この機能を追加するには、グリッドを生成するときに「setColTypes」を使って列の属性を設定します。詳細は、下記のコードをご覧ください。

lesson04.html

    init : function() {
      this.mygrid = new dhtmlXGridObject("mygrid");
      this.mygrid.setImagePath("codebase/imgs/");
      this.mygrid.setHeader("ID,Name,Description");
      this.mygrid.setColTypes("ro,ro,ed");
      this.mygrid.setInitWidths("*,150,350");
      this.mygrid.setColAlign("right,left,left");
      this.mygrid.setColSorting("int,str,str");
      this.mygrid.setSkin("light");
      this.mygrid.init();
    },

赤字コードの部分をlesson04.htmlに追加して表示してみましょう。ID列とName列は編集不可に、Description列だけ編集可能になったと思います。

setColTypesに設定できるいくつかのカラムタイプを、以下に挙げておきます。

ro : 読み取り専用
ed : 編集セル
txt : 複数行に対応した編集セル
ch : チェックボックス
ra : ラジオボタン
coro : プルダウン

上記のカラムタイプを列数分だけカンマ区切りで設定すると、指定したカラムタイプに対応した列属性が適用されます。

ヘッダーの操作

ヘッダーを追加して複数行にしてみましょう。この機能を追加するには、「attachHeader」を使って追加するヘッダーを設定します。なお、グリッド生成時以外でも、ヘッダー追加は可能です。詳細は、下記のコードをご覧ください。

lesson04.html

    init : function() {
      this.mygrid = new dhtmlXGridObject("mygrid");
      this.mygrid.setImagePath("codebase/imgs/");
      this.mygrid.setHeader("ID,Name,Description");
      this.mygrid.setColTypes("ro,ro,ed");
      this.mygrid.setInitWidths("*,150,350");
      this.mygrid.setColAlign("right,left,left");
      this.mygrid.setColSorting("int,str,str");
      this.mygrid.setSkin("light");
      this.mygrid.init();
      this.mygrid.attachHeader("(Num),(Str),(Str)");
    },

赤字コードの部分をlesson04.htmlに追加して表示してみましょう。下図のように、ヘッダーが一行追加されていると思います。

図3. 複数行のヘッダー

先ほどのコードを使って、今度はヘッダーにリンクをつけてみましょう。ヘッダーにはHTMLを使用することが可能です。

lesson04.html

    init : function() {
      ・・・省略・・・
      this.mygrid.attachHeader("(Num),(Str),<a href='http://dhtmlx.com'>(Str)</a>");
    },

図4. リンクのあるヘッダー

ヘッダーの各列は、結合することも可能です。HTMLのTDタグで使用されるcolspan属性と同じです。

lesson04.html

    init : function() {
      ・・・省略・・・
      this.mygrid.attachHeader("Multi-line&Colspan,#cspan,#cspan");
    },

図5. 列の結合

他に、ヘッダーの各列に個別のスタイルを適用したり、行を結合したりすることも可能です。今回は、紙面の都合上、説明を割愛させていただきます。

イベント定義

データグリッドには、グリッド操作に応じた独自のイベントを定義することが可能です。この機能を追加するには、「attachEvent」を使用してグリッドイベントに対して関数を定義します。詳細は、下記のコードをご覧ください。

    init : function() {
      this.mygrid = new dhtmlXGridObject("mygrid");
      this.mygrid.setImagePath("codebase/imgs/");
      this.mygrid.setHeader("ID,Name,Description");
      this.mygrid.setColTypes("ro,ro,ed");
      this.mygrid.setInitWidths("*,150,350");
      this.mygrid.setColAlign("right,left,left");
      this.mygrid.setColSorting("int,str,str");
      this.mygrid.setSkin("light");
      this.mygrid.init();
      this.mygrid.attachHeader("(Num),(Str),(Str)");
      this.mygrid.attachEvent("onRowSelect", function(id) {
        alert("Selected row id: " + id);
      });
    },

赤字コードの部分をlesson04.htmlに追加して表示し、行を選択してみてください。下図のように、メッセージが表示されると思います。

図6. イベント定義

上記のコードでは、行を選択した時の独自イベントを定義しました。ここでは全部を解説できませんが、他にもいろいろなイベントを定義することが可能です。

おわりに

連載の第四回目はいかがでしたか？紙面の都合上、あまり多くを解説することはできませんでしたが、データグリッドに対して機能を追加することが簡単であることは、お分かりいただけたのではないかと思います。さらに追加できる機能を知りたい方は、以下のページを参照することをお勧めします。

http://dhtmlx.com/docs/products/dhtmlxGrid/samples/index.html
データグリッドのサンプルです（中には有償版でないと追加できない機能があります）
http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:toc
データグリッドのドキュメントです

次回は、サーバー側と連携させてみたいと思います。Java言語が多少出てくるため、若干、難度があがるかもしれませんが、極力分かりやすく解説しようと思います。お楽しみに！

第4回おしまい

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

第４回 データグリッドの機能を知る

第４回 データグリッドの機能を知る

目次

作業開始

準備

レコードの並び替え(ソート)

セルの操作

ヘッダーの操作

イベント定義

おわりに

第４回データグリッドの機能を知る

第４回データグリッドの機能を知る