新規投稿
フォローする

GaroonのHTMLポートレットで作成したテーブルについて日付範囲などで絞り込みをしたい

お世話になります。

以前、https://cybozudev.zendesk.com/hc/ja/community/posts/205849716-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 で質問をさせて頂きました。

お陰様で、基幹システムからのkintoneへの定期的な取り込みはうまく行きました。

次の段階として、kintoneに取り込んだテーブル形式のデータをガルーンのポータルへ表示し、ガルーン側で日付範囲などで絞り込みを行いたいと思っています。

テーブルを表示させる事はできたのですが、絞り込みを行うところで進まなくなってしまいました。

具体的には、jQueryのプラグインtablesorterのjQuery date range pickerというウィジットhttp://jsfiddle.net/Mottie/abkNM/2919/ を使って実現できないかと、トライアンドエラー・・エラー・・・を繰り返しています。

こういう場にさらすのは恥ずかしいのですが、いろいろと参考にさせて頂きつつ、次の様なコードを継ぎはぎして作ってみましたが、

『オブジェクトは ’・・・・’ プロパティまたはメソッドをサポートしていません』というエラーが出てしまいます。

$関数が他のライブラリとぶつかっているのか、そもそもできない事を目指しているのか。

どなたか、原因と対処方法をご教示頂けると助かります。(もっと良い方法があればそちらでも結構です)

 

<button class="reset">Reset</button>

<!--テーブルのヘッドを設定-->
<table class="kintone-table">
  <thead id="kintone-labels">
  </thead>
  <tbody id="kintone-records">
  </tbody>
</table>


<!--javascriptを記述-->
<script type="text/javascript">
jQuery.noConflict();

(function($){
 "use strict";
//  jQueryはGaroonに読み込まれているものを使う。
// loadJS('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js');
 loadJS('https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js');

 loadJS('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js');
 
 loadJS('https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.min.js');
 loadJS('https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.widgets.js');
 
 loadJS('https://rawgit.com/longbill/jquery-date-range-picker/master/jquery.daterangepicker.js');
 
 loadCSS('https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/css/theme.blue.min.css');
 
 
    // ページとJSライブラリ群の読み込み待ち
 $(document).ready(function() {
        (function waitForLibsLoad() {
            if((typeof jQuery.daterangepicker !== 'undefined')
    &&(typeof jQuery.datepicker !== 'undefined')
    ) {
  
    // ライブラリが読み込まれたらtablesorterを設定
    $(function () {
     var $table = $('table')
      .tablesorter({
       theme: 'blue',
       headerTemplate: '{content} {icon}',
       widgets: ['zebra', 'filter', 'uitheme'],
       widgetOptions: {
        filter_reset: '.reset',
        filter_cssFilter: ['', '', 'datepicker', '', '', '', '', '', '', '', '']
       }
      })
      .on('datepicker-apply datepicker-close', function () {
       $table.trigger('search');
      });
      $('.datepicker').dateRangePicker();
    });

            } else {
                setTimeout(waitForLibsLoad, 0);
            }
        })();
    }, false);

 

    // ======<<以下、オプション関数群>>======


    // 外部CSSの読み込み
    function loadCSS(href) {
        var link = document.createElement('link');
  link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = href;
        document.getElementsByTagName('head')[0].appendChild(link);
    }


    // 外部JSの読み込み
    function loadJS(src){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        document.getElementsByTagName('head')[0].appendChild(script);
    }

})(jQuery);

以下テーブルとCSSは割愛(Garoonでkintoneのデータを表形式で表示してみよう!を参考にさせて頂きました。)

以上、宜しくお願い致します。

 

0

2件のコメント

Avatar
Kawamukai Naoki

> var $table = $('table')
このコードでは全tableタグを対象にtablesorterを適応しようとしています。
tablesorterはtheadを要求しますが、tableによってはこのタグがない場合があるので、エラーが起きると思います。

> loadJS(...
動的にscriptタグを追加すると、
JSファイルが読み込まれるタイミングがコントロールしにくいです。
こちらの環境では
jquery.tablesorter.widgets.jsが
jquery.tablesorter.min.jsよりさきに読み込まれてしまい、
jquery.tablesorter.widgets.jsの158行目で、
「Uncaught TypeError: ts.addWidget is not a function」となってしまいました。

HTMLにscriptタグを直接書くことで、シンプルに解決できます。

こちらでは、以下のように記載することでテーブルの表示や日付での絞り込みが行えることは確認できました。

---------------------------------------------------------

<button class="reset">Reset</button>

<!--テーブルのヘッドを設定-->
<table class="kintone-table">
  <thead id="kintone-labels">
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3(Dates)</th>
      <th>4</th>
    </tr>
    </thead>
    <tbody id="kintone-records">
      <tr>
        <td>Koala</td>
        <td></td>
        <td>Mar 5, 2014</td>
        <td></td>
      </tr>
      <tr>
        <td>Ox</td>
        <td></td>
        <td>Jan 2, 2014</td>
        <td></td>
      </tr>
    </tbody>
  </table>

<!--javascriptを読み込み-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.widgets.js"></script>
<script src="https://rawgit.com/longbill/jquery-date-range-picker/master/jquery.daterangepicker.js"></script>


<!--cssを読み込み-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/css/theme.blue.min.css" rel="stylesheet">
<!--gtihubからCSSファイルを読み込むことはできないため、以下のCSSの内容はHTMLポートレットに転記する必要がある。-->
<!--link href="https://raw.githubusercontent.com/longbill/jquery-date-range-picker/master/daterangepicker.css"-->

<!--javascriptを記述-->
<script>
(function($){
  "use strict";
  $(document).ready(function() {
    var $table = $('.kintone-table')
      .tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
          filter_reset: '.reset',
          filter_cssFilter: ['', '', 'datepicker', '']
        }
      })
      .on('datepicker-apply datepicker-close', function () {
        $table.trigger('search');
      });
    $('.datepicker').dateRangePicker();
  });
})(jQuery);
</script>

<style type="text/css">
/* https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/css/theme.blue.min.cssの内容を転載 */
...
</style>

0
Avatar
Yuzuru

Kawamukai Naoki様

ご回答ありがとうございます。

解説まで付けて頂き、大変勉強になります。

なぜか、jquery.daterangepicker.jsの読み込みができなかったので、こちらもHTML内に転記することで、動作を確認できました。

これから、ご教示頂いた内容についてもう少し深く勉強してみたいと思います。

本当にありがとうございました。

0
サインインしてコメントを残してください。