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

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

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

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

データ設定です。

イントラマートの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(){
    //ヘッダー（キャプション）を２段組みに設定
    $("#tableList").jqGrid('setGroupHeaders', {
        useColSpanStyle: true,
        groupHeaders: [
            //１つ目の段組み
            {
                startColumnName: 'col2',         //２段組みを開始するカラム名
                numberOfColumns: 2,              //結合するセルの数
                titleText: '段組みヘッダー１'    //２段組み結合したセルの表示内容
            }
            //２つ目の段組み
           ,{
                startColumnName: 'col5',         //２段組みを開始するカラム名
                numberOfColumns: 2,              //結合するセルの数
                titleText: '段組みヘッダー２'    //２段組み結合したセルの表示内容
           }
        ]
    });

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

});
</script>

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

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

お問合せ