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

2018/02/072019/12/19イントラマートintra-mart Accel Platform,スクリプト開発

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

イントラマートの「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を呼び出せば「絞り込みフィルター」を生成できます。

システムトラストでは、システムエンジニア、プログラマーなどを随時募集中です。気軽にご相談ください。

お問合せ