Javascriptによるデータテーブルの機能拡張

今回は簡単なJavascriptを使ってデータテーブルに機能追加する方法を二つほど、すぐ使えるサンプルコード付きで紹介します。

Excelのようにデータテーブルの列を分類し、二段、三段とヘッダーを複数行にしたいというような要望はよく耳にします。SkyVisualEditorの機能としても組み込みたいところですが、簡単なJavascriptで実現できますので説明していきたいと思います。

例えば毎月の稼働を一年分表示するテーブルを作るとして、ヘッダーを多重化出来ないので識別するために「1月人数」「1月時間」のように少し冗長なのラベルを付けて対応するしかありませんでした。

少し残念なテーブルですね。これを以下のJavascriptで改善していきます。

//サンプルコード：
var t = jQuery("[id$=tableID]").find("[id$=tableID_table] thead");
tr = jQuery('<tr></tr>').prependTo(t);
tr.append('<th colspan="2">1月</th>');
tr.append('<th colspan="2">2月</th>');
tr.append('<th colspan="2">3月</th>');
...

以上のサンプルコードを自分のページで利用したい場合はスクリプト内の「tableID」を対象テーブルのIDに置き換え、テーブルの内容に合わせてcolspan要素に結合したいセルの数を指定し、thの間に入力したいラベルを入力するなどを調整するだけで適用できます。

スクリプトが完成したら、データテーブルのプロパティ→［開発］→［JavaScript］でテーブルスクリプトエディタを開き、用意したスクリプトを貼り付けて、後はカラムのラベルから冗長だった「1月」「2月」の部分を削れば完成です。

ラベルもスッキリして、かなり見栄えが良くなりましたね！

続いてもう一つ小技を紹介します。SkyVisualEditorのテーブルのヘッダーは構造的にHTMLのタグを入力出来ませんので、行の幅を縮めるために改行を入れたい時に入れられないと不便に思う場合もあります。

<br>を入れても改行されずに、余計長くなりますね。これにつきましても以下のようなスクリプトで実現できます。

//サンプルコード：
var ths = jQuery("[id$=tableID]").find("[id$=tableID_table] thead span");
ths.each(function(){
  if(jQuery(this).text().indexOf("<br>") != -1){
     jQuery(this).html(jQuery(this).text());
  }
});

適用方法ですが、上と同じくtableIDを自分のテーブルに置き換えれば完成です。上のヘッダー追加スクリプトと仲良くテーブルスクリプトの中に入れましょう。


意図した通りにコンパクトになりました！

このように、ちょっとしたコードでSkyVisualEditorに機能を追加し思った通りのレイアウトを実現できる場合もありますので、ぜひ色々とチャレンジして見てください。