イントラマートの「imuiListTable」でヘッダー(キャプション)を2行に段組みする方法

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

イントラマートの「imuiListTable」ではjqGridのgroupHeadersを指定することでヘッダー(キャプション)を簡単に2行に段組みできます。

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

イントラマートの「imuiListTable」でヘッダー(キャプション)を2行に段組みする方法

データ設定です。

イントラマートのAPIドキュメントにあるデータにひらがな、性別、年齢を追加しました。

var sampleData =  [
        {"col1":"上田辰男", "col2":"ウエダ タツオ",     "col3":"ueda"      ,"col4":"うえだ たつお"     ,"col5":"男性" ,"col6":"25歳"},
        {"col1":"青柳辰巳", "col2":"アオヤギ タツミ",   "col3":"aoyagi"    ,"col4":"あおやぎ たつみ"   ,"col5":"男性" ,"col6":"35歳"},
        {"col1":"林政義",   "col2":"ハヤシ マサヨシ",   "col3":"hayashi"   ,"col4":"はやし まさよし"   ,"col5":"男性" ,"col6":"45歳"},
        {"col1":"円山益男", "col2":"マルヤマ マスオ",   "col3":"maruyama"  ,"col4":"まるやま ますお"   ,"col5":"男性" ,"col6":"55歳"},
        {"col1":"関根千香", "col2":"セキネ チカ",       "col3":"sekine"    ,"col4":"せきね ちか"       ,"col5":"女性" ,"col6":"65歳"},
        {"col1":"寺田雅彦", "col2":"テラダ マサヒコ",   "col3":"terada"    ,"col4":"てらだ まさひこ"   ,"col5":"男性" ,"col6":"20歳"},
        {"col1":"吉川一哉", "col2":"ヨシカワ カズヤ",   "col3":"yoshikawa" ,"col4":"よしかわ かずや"   ,"col5":"男性" ,"col6":"30歳"},
        {"col1":"大磯博文", "col2":"オオイソ ヒロフミ", "col3":"ooiso"     ,"col4":"おおいそ ひろふみ" ,"col5":"男性" ,"col6":"40歳"},
        {"col1":"萩本順子", "col2":"ハギモト ジュンコ", "col3":"hagimoto"  ,"col4":"はぎもと じゅんこ" ,"col5":"女性" ,"col6":"50歳"},
        {"col1":"生田一哉", "col2":"イクタ カズヤ",     "col3":"ikuta"     ,"col4":"いくた かずや"     ,"col5":"男性" ,"col6":"60歳"},
        {"col1":"片山聡",   "col2":"カタヤマ サトシ",   "col3":"katayama"  ,"col4":"かたやま さとし"   ,"col5":"男性" ,"col6":"21歳"}
];
function init(request){}

プレゼンテーションページです。

<imart type="imuiListTable" id="tableList" data=sampleData viewRecords="true" width="600" height="300" >
  <pager rowNum="20" rowList="1,3,5"  />
  <cols>
    <col name="col1" caption="漢字" />
    <col name="col2" caption="カナ" />
    <col name="col3" caption="英語" />
    <col name="col4" caption="ひらがな" />
    <col name="col5" caption="性別" />
    <col name="col6" caption="年齢" />
  </cols>
</imart>
<script>
$(document).ready(function(){
    //ヘッダー(キャプション)を2段組みに設定
    $("#tableList").jqGrid('setGroupHeaders', {
        useColSpanStyle: true,
        groupHeaders: [
            //1つ目の段組み
            {
                startColumnName: 'col2',         //2段組みを開始するカラム名
                numberOfColumns: 2,              //結合するセルの数
                titleText: '段組みヘッダー1'    //2段組み結合したセルの表示内容
            }
            //2つ目の段組み
           ,{
                startColumnName: 'col5',         //2段組みを開始するカラム名
                numberOfColumns: 2,              //結合するセルの数
                titleText: '段組みヘッダー2'    //2段組み結合したセルの表示内容
           }
        ]
    });

    //filterバー追加
    $("#tableList").filterToolbar({
        defaultSearch:'bw'        //一致条件を入れる。
                                //選択肢['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
    });

});
</script>

このサンプルではヘッダー(キャプション)の段組みを2か所設定しています。
複数個所で段組みを行いたい場合は、groupHeadersを配列で設定してやるとできるようです。

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

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

お問合せ