2011年8月15日 / 最終更新日 : 2011年8月15日 矢木 浩人 jQuery

jQuery テーブルプラグインがIEでは遅すぎるのでプラグインを作成してみる

jQuery のテーブル用のプラグインを利用してシステム開発に利用することを想定していたのだが、画面の描画、およびスクロールしたときの反応が使用に耐えないくらい遅すぎる。

まぁ、今回行っているのは、列が数十あるようなテーブルのことで、各プラグインのデモで扱われている件数なら、問題ない。

そもそもそんなに列があるような画面設計にするなとか言う話かもしれないが、業務アプリだと結構そのくらい列をもったテーブルが必要な場合もありがちなので、今回だけ設計の変更で回避というのも違う気がする。

 

実は、Chrome ではそこそこの速度で動き、実用には耐えられそうなのだ。が、問題はIE8。システム要件上、IE8で動作する必要があるんだよなー

DataTable や、Frexigrid、tablesoter なんかをいろいろ設定を変えながら、試したのだが、どれも今ふたつみっつ。

まぁ、そもそもそんな高機能なことができる必要は無い。できればもちろんうれしいのだが、汎用性より応答性をとらなければならない局面。せっかくなので、jQueryの勉強がてら、プラグインを自作してみよう。

 

要件

随時、パフォーマンスを見ながら機能追加していくとして、最低限の要件は、

  • 数十列 × 数百行 のデータが(通常のテーブルに比べ)必要以上に遅くならずに描画されること。
  • テーブルヘッダーを固定
  • ボディーの横スクロールにあわせてヘッダーをスクロール

んー最初はこんな程度でしょう。

jQuery プラグインの作成

jQueryプラグインの作成自体は簡単だ。jQueryクックブック に、丁寧に解説してくれている。乱暴に手順を書くと、以下の感じか。

  1. ラグインを匿名関数でラップし、すぐその関数を実行することで、$ でjQueryオブジェクトを参照できる (1)
  2. jQuery.fn オブジェクトをメソッド名で拡張しjQueryメソッドを作成する (2)
  3. jQuery オブジェクトは複数の結果に対応する必要があるので、each() 処理を行う (3) 
  1. ;(function($){    // (1) 
  2.   $.fn.lightable = function(options) { // (2)
  3.     var options = $.extend({
  4.       // デフォルトのオプション
  5.     },options);
  6.     
  7.     return this.each(function(){ // (3)
  8.       // 処理本体
  9.       
  10.     });
  11.   };
  12. })(jQuery);

 

テーブルの構成

肝心の、テーブルについてだが、少しでもIEのテーブルの描画反応をよくするために、テーブルの描画に、固定レイアウトアルゴリズムが用いられるようにする。

「表は通常、構成要素をすべて読み込んでから表示される。table-layout プロパティを利用することで、表のレイアウトに使用するアルゴリズムを選択できる。」

と、「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」にあり、固定レイアウトアルゴリズムが採用されるためには、

 

  1. table-layout:fixed に設定する
  2. width プロパティで表全体の幅を指定する

と、する必要がある。width プロパティが未指定や「auto」の場合は、自動レイアウトアルゴリズムが採用されてしまう。

作成してみた

こんな感じ。まったく機能性がないので、寂しくはある。が、まぁスタートラインなのでよしとする。

lightable01

以下内容。

jQueryプラグイン (jquery.lightable.js)

jQuery の概要やセレクタ、リファレンスとして、「jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践 」は非常にわかりやすくて、良書。参考にさせていただきながら、、、

やっていることは、

  • $.extend で、オプションのデフォルト値を使用
  • COL 要素に パラメータとして渡された、width をセット。 ここで align やらスタイルやら列ごとの定義を指定できればよいのだが、どうもできなさそうだ。IE6ではできたのだが、できてしまうのがどうやらおかしいようだ。列のスタイル適用方法については、改めて検討しよう。
  • TABLE を DIV で囲んで、ヘッダーをコピーして別のDIVで囲み、横スクロールを同期させる

くらいか。 

  1. ;(function($){
  2.   $.fn.lightable = function(options) {
  3.     var cfg = $.extend({
  4.       height:"100%",
  5.     },options);
  6.     
  7.     var table, headerTable;
  8.     var wrapper, headWrapper, bodyWrapper;
  9.     
  10.     /**
  11.      * 処理本体
  12.      */
  13.     return this.each(function(){
  14.       table = $(this);
  15.       table.attr({cellspacing:"0", border:"0", cellpadding:"0" });
  16.       
  17.       headerTable = $(document.createElement("table"));
  18.       headerTable.attr({cellspacing:"0", border:"0", cellpadding:"0" });
  19.       
  20.       headerTable.prepend($("thead", table).addClass("ui-widget-header").clone());
  21.       $('thead tr',headerTable).append("<th></th>");  // for scrollbar
  22.       
  23.       // 固定レイアウトアルゴリズムを利用するように属性を設定(table-layout=fixed かつ widthプロパティが指定される必要がある)
  24.       var tattr = {"table-layout":"fixed", "width":"100%"};
  25.       table.css(tattr);
  26.       headerTable.css(tattr);
  27.       
  28.       if (cfg.cols) {
  29.         var cg = new Array();
  30.         $(cfg.cols).each(function(){
  31.           cg.push("<col");
  32.           if ("width" in this) {
  33.             cg.push(" width='");
  34.             cg.push(this.width);
  35.             cg.push("'");
  36.           }
  37.           cg.push("/>");
  38.         });
  39.         table.prepend(cg.join(""));
  40.         
  41.         // for scrollbar
  42.         cg.push("<col width='18px'/>");
  43.         headerTable.prepend(cg.join(""));
  44.       }
  45.       
  46.       // 構造を作成
  47.       table.wrapAll("<div class='lightable-wrapper' style='width:100%;'>"
  48.               + "<div class='lightable-body-wrapper' style='overflow:auto;width:100%;"
  49.               + "height:" + cfg.height + ";'></div></div>");
  50.  
  51.       wrapper = table.closest(".lightable-wrapper");
  52.       wrapper.prepend("<div class='lighttable-head-wrapper' style='overflow:hidden;width:100%;height:100%;'></div>");
  53.       
  54.       headWrapper = $(".lighttable-head-wrapper", wrapper); 
  55.       bodyWrapper = table.closest(".lightable-body-wrapper");
  56.       headWrapper.prepend(headerTable);
  57.       
  58.       $("thead" ,table).hide();
  59.       
  60.       bodyWrapper.scroll(function(){
  61.         headWrapper.scrollLeft(this.scrollLeft);
  62.       });
  63.     });
  64.   };
  65. })(jQuery);

HTML (table_test.html)

ざっくりこんな感じ。

$(テーブル).lightable(パラメータ); でプラグインを適用

ひとつ驚いた？のは、配列の要素の最後のカンマがあるか無いかで、IE とChrome でjQuery.each() で返される要素数が異なること。

どうも、[1,2,3,] という様な配列 の場合、IE だと、最後のカンマの後にnull があると判断してか、4要素処理されるが、Chrome だと、3回しか処理されない様だ。 

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=shift-jis">
  4. <link rel="stylesheet" type="text/css" href="./jquery/css/custom-theme/jquery-ui-1.8.14.custom.css" />
  5. <link rel="stylesheet" type="text/css" href="./css/lightable.css" />
  6. <style type="text/css">
  7. .number {
  8.   text-align:right;
  9. }
  10. </style>
  11. <title>Lightable Test</title>
  12. </head>
  13. <body>
  14.   <table id="tbl_dummy" style="table-layout:fixed;width:100%;">
  15.     <thead>
  16.       <tr>
  17.         <th>カラム1</th>
  18.         <th>カラム2</th>
  19.         <th>カラム3</th>
  20.         <th>カラム4</th>
  21.         <th>カラム5</th>
  22.         <th>カラム6</th>
  23.         <th>カラム7</th>
  24.         <th>カラム8</th>
  25.         <th>カラム9</th>
  26.         <th>カラム10</th>
  27.         <th>カラム11</th>
  28.         <th>カラム12</th>
  29.         <th>カラム13</th>
  30.         <th>カラム14</th>
  31.         <th>カラム15</th>
  32.         <th>カラム16</th>
  33.         <th>カラム17</th>
  34.         <th>カラム18</th>
  35.         <th>カラム19</th>
  36.         <th>カラム20</th>
  37.         <th>カラム21</th>
  38.         <th>カラム22</th>
  39.         <th>カラム23</th>
  40.         <th>カラム24</th>
  41.         <th>カラム25</th>
  42.         <th>カラム26</th>
  43.         <th>カラム27</th>
  44.         <th>カラム28</th>
  45.         <th>カラム29</th>
  46.         <th>カラム30</th>
  47.         <th>カラム31</th>
  48.         <th>カラム32</th>
  49.         <th>カラム33</th>
  50.         <th>カラム34</th>
  51.         <th>カラム35</th>
  52.         <th>カラム36</th>
  53.         <th>カラム37</th>
  54.         <th>カラム38</th>
  55.         <th>カラム39</th>
  56.         <th>カラム40</th>
  57.       </tr>
  58.     </thead>
  59.     <tbody>
  60.     </tbody>
  61.   </table>
  62.  
  63.  
  64.   <script type="text/javascript" src="./jquery/js/jquery-1.6.1.js"></script>
  65.   <script type="text/javascript" src="./jquery-ui/js/jquery-ui-1.8.14.custom.min.js"></script>
  66.   <script type="text/javascript" src="./js/jquery.lightable.js"></script>
  67.   <script type="text/javascript" src="./dat.js"></script>
  68.   <script type="text/javascript">
  69.   $(function(){
  70.     
  71.     $("#tbl_dummy").lightable({
  72.       cols:[
  73.         {width:100,align:"right"},
  74.         {width:200},
  75.         {width:300},
  76.         {width:100},
  77.         {width:200},
  78.         {width:300},
  79.         {width:100},
  80.         {width:200},
  81.         {width:300},
  82.         {width:100},
  83.         {width:200},
  84.         {width:300},
  85.         {width:100},
  86.         {width:200},
  87.         {width:300},
  88.         {width:100},
  89.         {width:200},
  90.         {width:300},
  91.         {width:100},
  92.         {width:200},
  93.         {width:300},
  94.         {width:100},
  95.         {width:200},
  96.         {width:300},
  97.         {width:100},
  98.         {width:200},
  99.         {width:300},
  100.         {width:100},
  101.         {width:200},
  102.         {width:300},
  103.         {width:100},
  104.         {width:200},
  105.         {width:300},
  106.         {width:100},
  107.         {width:200},
  108.         {width:300},
  109.         {width:100},
  110.         {width:200},
  111.         {width:300},
  112.         {width:100}
  113.           ]  ,
  114.           height:"500px",
  115.     });  
  116.     loadDummyData();  
  117.   });  
  118.   function loadDummyData() {
  119.     var rows = getData();
  120.     var tb = $("#tbl_dummy");
  121.     var rb = null;
  122.     rb = new Array();
  123.     for (var i=0; i<rows.length; i++) {
  124.       var cells = rows[i];
  125.       
  126.       rb.push("<tr>");
  127.       for (var j=0; j<cells.length; j++) {
  128.         rb.push("<td class='number'>");
  129.         rb.push(cells[j]);
  130.         rb.push("</td>");
  131.       }
  132.       rb.push("</tr>");
  133.     }
  134.     
  135.     tb.append(rb.join(""));
  136.   }
  137.   </script>
  138. </body>
  139. </html>/pre>

CSS (lightable.css)

CSSはこんな感じ。

  1. div.lightable-wrapper {
  2. 	border: 1px solid #DDD;
  3. }
  4. div.lightable-wrapper th {
  5. 	border-width: 0 1px 1px 0;
  6. 	border-style: solid;
  7. 	border-color: #DDD;
  8. 	background: none;
  9. 	font-weight: normal;
  10. 	padding: 5px;
  11. }
  12. div.lightable-wrapper td {
  13. 	padding: 5px;
  14. 	border-width: 0 1px 1px 0;
  15. 	border-style: solid;
  16. 	border-color: #DDD;
  17. 	background: none;
  18. }

テストデータ作成 (dat.js)

適当にテストデータの配列をつくる。

  1. function getData() {
  2.   var rows = [];
  3.   for (var i=0; i<200; i++) {
  4.     var row = []; 
  5.       row.push(i + 1);
  6.       row.push("テストデータ テストデータ 2");
  7.       row.push("テストデータ テストデータ テストデータ 3");
  8.       row.push("テストデータ 4");
  9.       row.push("テストデータ テストデータ 5");
  10.       row.push("テストデータ テストデータ テストデータ 6");
  11.       row.push("テストデータ 7");
  12.       row.push("テストデータ テストデータ 8");
  13.       row.push("テストデータ テストデータ テストデータ 9");
  14.       row.push("テストデータ 10");
  15.                  :
  16.                  略          
  17.                  :
  18.     rows.push(row);
  19.   }
  20.   return rows;
  21. }

んー普通に、既にあるプラグインが動いてくれれば幸せなんだけどなー

面倒くさいけど、これをベースに作り込んでいくしかないかなー

Follow me!

カテゴリー
jQuery

コメントを残す

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

Django

前の記事

Django でちょっとしたアプリを作成する手順の覚え書き (1)
2011年8月5日
X06HT

次の記事

Desire用にPOWERBANKというバッテリーパックを購入
2011年8月17日