ピボットテーブルを表示するjQueryプラグイン

Pocket

Excelにはピボットテーブルという機能があります。クロス集計と呼ぶ人もいます。
これをHTMLのテーブルで再現するjQueryプラグイン「jquery.pivot.js」を作りました。

使い方

  1. プラグイン(jquery.pivot.js)をダウンロードします。
  2. HTMLを書きます。後述のサンプルを参考にしてください。
    • 元となるテーブルを書きます。idを設定します。1行目は見出しです。合計欄はセットしません。
    • ピボットテーブルを表示する箇所を「<div id="gokei"></div>」のように書きます。
    • スクリプトを書きます。「$(表示先のid).pivot(対象テーブルのid,行ラベル(左側),列ラベル(上側),値,区分);」のように書きます。
      • 表示先のidは「#gokei」のように書きます。「#」を付けます。
      • 対象テーブルのidは「mytable」のように書きます。「#」を付けません。
      • 行ラベル、列ラベル、値は見出しの文字列をセットします。
      • 区分は合計ならば「sum」、カウントならば「count」もしくは空文字列にします。
  3. これらを同じフォルダに保存します。
  4. ページを開くとピボットテーブルが表示されます。


sample

サンプル

<table id="mytable">
    <tr>
        <th>日付</th>
        <th>商品</th>
        <th>支店</th>
        <th>売上</th>
    </tr>
    <tr>
        <td>1月1日</td>
        <td>スキャナ</td>
        <td>千葉</td>
        <td>20000</td>
    </tr>
    <!--省略-->
</table>
<p>合計</p>
<div id="gokei"></div>
<p>個数</p>
<div id="kosu"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pivot.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
    $("#gokei").pivot("mytable", "商品", "支店", "売上", "sum");
    $("#kosu").pivot("mytable", "商品", "支店", "売上", "count");
});
//-->
</script>

[ 2013年2月19日 | カテゴリー: JavaScript | タグ: , , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報