イントラマートの「imuiListTable」に絞り込みフィルターを設定する方法

2018-02-07イントラマート

イントラマートの「imuiListTable」に絞り込みフィルターを設定する方法はイントラマートのAPIドキュメントにはないのですが、展開されたソースを見ると内部的には「jqGrid」を利用しているようなので、そのオブジェクトに直接「絞り込みフィルター」を設定します。

イントラマートとは
株式会社NTTデータイントラマート社が開発・販売している、Webアプリケーションシステムのシステム共通基盤(統合型フレームワーク)で、国内の著名企業を中心に6,000社以上に導入されています。 イントラマートを導入することにより、Webシステム開発における短納期・低コスト・標準化推進・品質向上を実現できます。
詳しくはこちらをご覧ください。

イントラマートの「imuiListTable」に絞り込みフィルターを設定する方法

まずはファンクションコンテナーにデータの設定をします。

var sampleData =  [
        {"col1":"上田辰男", "col2":"ウエダ タツオ",     "col3":"ueda"},
        {"col1":"青柳辰巳", "col2":"アオヤギ タツミ",   "col3":"aoyagi"},
        {"col1":"林政義",   "col2":"ハヤシ マサヨシ",   "col3":"hayashi"},
        {"col1":"円山益男", "col2":"マルヤマ マスオ",   "col3":"maruyama"},
        {"col1":"関根千香", "col2":"セキネ チカ",       "col3":"sekine"},
        {"col1":"寺田雅彦", "col2":"テラダ マサヒコ",   "col3":"terada"},
        {"col1":"吉川一哉", "col2":"ヨシカワ カズヤ",   "col3":"yoshikawa"},
        {"col1":"大磯博文", "col2":"オオイソ ヒロフミ", "col3":"ooiso"},
        {"col1":"萩本順子", "col2":"ハギモト ジュンコ", "col3":"hagimoto"},
        {"col1":"生田一哉", "col2":"イクタ カズヤ",     "col3":"ikuta"},
        {"col1":"片山聡",   "col2":"カタヤマ サトシ",   "col3":"katayama"}
];
function init(request){}

次はプレゼンテーションページにテーブルを生成して「絞り込みフィルター」を設定します。

<imart type="imuiListTable" id="tableList" data=sampleData viewRecords="true" width="500" height="200" >
  <pager rowNum="5" rowList="1,3,5"  />
  <cols>
    <col name="col1" caption="名前" />
    <col name="col2" caption="カナ" />
    <col name="col3" caption="英語" />
  </cols>
</imart>
<script>
    $(document).ready(function(){
        //filterバー追加
        $("#tableList").filterToolbar({
            defaultSearch:'bw' //一致条件を入れる。
             //選択肢['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
        });
    });
</script>

「絞り込みフィルター」は「Javascript」で直接生成するテーブルの「id」を指定してfilterToolbarを呼び出せば「絞り込みフィルター」を生成できます。

株式会社システムトラスト

イントラマートの導入・開発についてなど気軽にご相談ください。

お問合せ