tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>＼(＾o＾)／

javascriptでjsonで受け取ったmysqlとかのDBデータからテーブル(table)タグを作成するライブラリ＆そのjqueryプラグインを作ってみたテスト-tablemagic

javascript json jquery

はじめに

mysqlなんかのDBデータをまるっとtableタグに変換するようなものがなかったので
探すのもめんどうだし作ってみました。
※といっても2011か2012年くらいに。

今はスプレッドシートみたいに描画してくれたり高機能なものはあるんですけど
シンプルにtableタグが欲しいときありますよね！

https://github.com/tweeeety/tableMagic

使い方

簡単に説明1
  • こんな感じのデータをajaxで受け取ったとすると
var sampleData = [
  {"totaled_date":"2014-01-16","entry":"2","invite":"0","sales":"65422","sales_dau":3,"sales_mau":33,"sales_uu":0,"mau":37,"dau":14},
  {"totaled_date":"2014-01-17","entry":"2","invite":"0","sales":"2039","sales_dau":2,"sales_mau":33,"sales_uu":1,"mau":37,"dau":14},
  {"totaled_date":"2014-01-24","entry":"3","invite":"0","sales":"348120","sales_dau":8,"sales_mau":37,"sales_uu":0,"mau":43,"dau":0},
  {"totaled_date":"2014-01-25","entry":"1","invite":"0","sales":"14570","sales_dau":4,"sales_mau":39,"sales_uu":1,"mau":45,"dau":0},
  {"totaled_date":"2014-01-26","entry":"4","invite":"0","sales":"14600","sales_dau":1,"sales_mau":39,"sales_uu":0,"mau":45,"dau":0}
];
  • こんな感じに記述することで
<!-- include -->
<script src="js/tablemagic.js"></script>

<!-- main -->
<script>
  window.onload = function(){
    var table = new TableMagic(sampleData).get();
    console.log(table);
  }
</script>
  • こんな風にtableタグ生成してくれる
簡単に説明2
  • こんな感じのデータをajaxで受け取ったとすると
var sampleData = [
  {"totaled_date":"2014-01-16","entry":"2","invite":"0","sales":"65422","sales_dau":3,"sales_mau":33,"sales_uu":0,"mau":37,"dau":14},
  {"totaled_date":"2014-01-17","entry":"2","invite":"0","sales":"2039","sales_dau":2,"sales_mau":33,"sales_uu":1,"mau":37,"dau":14},
  {"totaled_date":"2014-01-24","entry":"3","invite":"0","sales":"348120","sales_dau":8,"sales_mau":37,"sales_uu":0,"mau":43,"dau":0},
  {"totaled_date":"2014-01-25","entry":"1","invite":"0","sales":"14570","sales_dau":4,"sales_mau":39,"sales_uu":1,"mau":45,"dau":0},
  {"totaled_date":"2014-01-26","entry":"4","invite":"0","sales":"14600","sales_dau":1,"sales_mau":39,"sales_uu":0,"mau":45,"dau":0}
];
  • こんな感じに記述することで
<div id="my-table"></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.tablemagic.js"></script>
<script>
$(function(){
  $("#my-table").tableMagic(sampleData);
});
</script>
  • こんなふうに描画される
    tableタグ文字列を生成するだけも可能です(後述)
詳細

詳細な使い方はgithubのREADME.mdを見てみてください
→https://github.com/tweeeety/tableMagic

やれること

オプションを指定することでこんなことができます

  • テーブルタグの生成(と、jquery contentへの埋め込み)
  • 1レコード内の表示順序の制御
  • レコードのタイトル文字列の指定
  • 簡易集計(列での合計、平均、またはその有無)
  • 描画後のcallback呼び出し
  • データの行と列の回転
ちょい補足
tablemagic.js

jsライブラリです。
jquery的なものは使っていないためjqueryに依存せず上記のことができます。

jquery.tablemagic.js

jqueryプラグインです。
上記のjsライブラリをラップしてjqueryプラグインにしたもので こちらは使用に際してjquery自体も読み込む必要があります

オプション

すべてではないですがメインで使うオプションはこんな感じ

  • titleOrderArr [array] … タイトル行の順序指定配列
  • titleHash [object] … タイトル文字列の連想配列
  • trOddClassName [string] … 奇数行のtrタグに挿入するclass名
  • trEvenClassName [string] … 偶数行のtrタグに挿入するclass名
  • renderName [string] … 描画(tableタグの生成)のフォーマット。
    指定可能文字列は以下
    • normal … そのまま描画
    • sumUpCol … 列で集計
    • rotateNormal … ノーマルのものを回転
    • sumUpColRotate … 列で集計してから回転
  • callback [function] … 表示後に呼び出すcallback

使い方サンプル

いくつかの使い方として例を載せます。
サンプルのDBデータは上述のデータと同じです

  1. jsライブラリとして使ってみる
  2. jqueryプラグインとして使ってみる
    • 1レコード内の表示順序の制御とタイトル文字列を指定してみる
    • 集計してみる
    • 回転してみる

1. jsライブラリとして使ってみる

jsライブラリとしても使えます。この場合はテーブルタグを生成して返却します。

  • html
<!-- include -->
<script src="js/tablemagic.js"></script>

<!-- main -->
<script>
  window.onload = function(){
    var table = new TableMagic(sampleData).get();
    console.log(table);
  }
</script>
  • 結果

※resultに表示されているのはjsFiddle用にconsole.logをオーバーライドするlogFiddleを使ってます
→jsfiddleでconsole.logの結果をresultに出すように書き換えるlogFiddle作ってみたメモ

2. jqueryプラグインとして使ってみる

まんま表示するサンプルは一番最初に書いたので次からはちょっと違うパターンでの表示

1レコード内の表示順序の制御とタイトル文字列を指定してみる

オプションのtitleOrderArrとtitleHashを指定することで表示の順番と文字列を指定できます

  • html
<div id="my-table"></div>

<!-- include -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.tablemagic.js"></script>

<!-- main -->
<script>
$(function(){
  // title行の順番を指定
  var titleOrderArr = ['totaled_date', 'entry', 'dau','invite','mau','sales','sales_dau','sales_mau','sales_uu'];

  // title行の文字列を指定
  var titleHash = {
    dau: 'dau',
    entry: '登録者',
    invite: '招待者',
    mau: 'mau',
    sales: '売上',
    sales_dau: '売上day',
    sales_mau: '売上mau',
    sales_uu: '売上uu',
    totaled_date: "日付"
  };

  // オプション指定
  var opt = {
    titleOrderArr : titleOrderArr,
    titleHash : titleHash
  };
  $("#my-table").tableMagic(sampleData, opt);
});
  • 結果
集計してみる

オプションのrenderNameに特定の文字列を指定することで何パターンかの描画を選べます。今回は'sumUpCol'を指定。
またlabelを指定すると合計的なカラムの文字列を指定できます

  • html
<div id="my-table"></div>

<!-- include -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.tablemagic.js"></script>

<!-- main -->
<script>
$(function(){
  // title行の順番を指定
  var titleOrderArr = ['totaled_date', 'entry', 'dau','invite','mau','sales','sales_dau','sales_mau','sales_uu'];

  // title行の文字列を指定
  var titleHash = {
    dau: 'dau',
    entry: '登録者',
    invite: '招待者',
    mau: 'mau',
    sales: '売上',
    sales_dau: '売上day',
    sales_mau: '売上mau',
    sales_uu: '売上uu',
    totaled_date: "日付"
  };

  // オプション指定
  // renderNameとlabelを指定
  var opt = {
    titleOrderArr : titleOrderArr,
    titleHash : titleHash,
    renderName : "sumUpCol",
    label : {sum:"合計です"} 
  };
  $("#my-table").tableMagic(sampleData, opt);
});
</script>
  • 結果
回転してみる

今度はオプションのrenderNameに'sumUpColRotate'を指定してみます
labelは指定しないので、デフォルト文字列の合計になります

  • html
<div id="my-table"></div>

<!-- include -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.tablemagic.js"></script>

<!-- main -->
<script>
$(function(){
  // title行の順番を指定
  var titleOrderArr = ['totaled_date', 'entry', 'dau','invite','mau','sales','sales_dau','sales_mau','sales_uu'];

  // title行の文字列を指定
  var titleHash = {
    dau: 'dau',
    entry: '登録者',
    invite: '招待者',
    mau: 'mau',
    sales: '売上',
    sales_dau: '売上day',
    sales_mau: '売上mau',
    sales_uu: '売上uu',
    totaled_date: "日付"
  };

  // オプション指定
  // renderNameを指定
  var opt = {
    titleOrderArr : titleOrderArr,
    titleHash : titleHash,
    renderName : "sumUpColRotate"
  };
  $("#my-table").tableMagic(sampleData, opt);
});
</script>
  • 結果
callback定義してみる

callbackを渡してみるサンプルです。
callbackなので中身は好きに書けばよいですが、
今回はタイトル行(または列)をクリックするとそのラインが赤くなるようにしてみました

  • html
<div id="my-table"></div>

<!-- include -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.tablemagic.js"></script>

<!-- main -->
<script>
$(function(){
  // title行の順番を指定
  var titleOrderArr = ['totaled_date', 'entry', 'dau','invite','mau','sales','sales_dau','sales_mau','sales_uu'];

  // title行の文字列を指定
  var titleHash = {
    dau: 'dau',
    entry: '登録者',
    invite: '招待者',
    mau: 'mau',
    sales: '売上',
    sales_dau: '売上day',
    sales_mau: '売上mau',
    sales_uu: '売上uu',
    totaled_date: "日付"
  };

  // オプション指定
  // renderNameとlabelを指定
  var opt = {
    titleOrderArr : titleOrderArr,
    titleHash : titleHash,
    renderName : "normal",
    
    addThead          : true,
    trHeaderClassName : "trHeader",
    tdHeaderClassName : "tdHeader",
    firstRowTd2Th     : true,
    firstColTd2Th     : true,
  };
  
  // callbackを指定
  if( opt && !opt.callback ) opt.callback = function() { lineMarker($(".my-table"), opt) };
  $("#my-table").tableMagic(sampleData, opt);
});
</script>

<!-- callback -->
<script>
var lineMarker = function(tableContent, opt){
  var rowMarkerClass = 'cellRow';
  var colMarkerClass = 'cellCol';
  
  // mark row
  tableContent.find("."+opt.tdHeaderClassName).each(function(){
    $(this).on("click", function(){
      $(this).toggleClass(rowMarkerClass);
      $(this).parent("tr").find("td").toggleClass(rowMarkerClass);
    });
  });
  
  // mark col
  var tdOrTh = opt.firstRowTd2Th ? 'th' : 'td';
  tableContent.find("."+opt.trHeaderClassName).find(tdOrTh).each(function(){
    $(this).on("click", function(){
      var index = $(this).parent("tr").find(tdOrTh).index(this);
      
      var trElements;
      if(opt.addThead){
        trElements = $(this).parent("tr").parent("thead").parent('table').find('tr');
      }else{
        trElements = $(this).parent("tr").parent('table').find('tr');
      }
      trElements.each(function(){
        $(this).children().eq(index).toggleClass(colMarkerClass);
      });
    });
  });
};
</script>
  • 結果
    タイトル行か列をクリックしてみてください。ラインが赤くなります

まとめ

ってことで、ざざっと書いてしまったやつなので
こうしたほうがいいとかあればください＼(＾o＾)／

jsでtableを描画する機会はちょくちょくあると思いますが、
自分は他の記事で書いたPivotTable.jsと合わせて、用途によって使い分けてみてました。
参考程度にのせておきます
→PivotTable.jsを使ってjavascriptで集計を簡単に表示するテスト