jQueryのプラグインjqGridを使えばHTMLのtableタグでは実現できない様々な機能を持った表を作成することができます。
今回はそのjqGridで複数行の行ヘッダーを作成する方法です。
jqGridで複数行の行ヘッダーを作成する
jqGridで複数行の行ヘッダーを作成するには「setGroupHeaders」を利用します。
jqGridで表を作成したあとで行ヘッダーを追加します。
基本的に追加したい行数分「setGroupHeaders」を追加することになります。
今回は行ヘッダーを２行追加してみます（デフォルトのヘッダーと合わせて３行のヘッダーになります。）
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/css/ui.jqgrid.min.css">
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/i18n/min/grid.gendere-de.js"></script>
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/jquery.jqgrid.min.js"></script>
<script>
$(function() {
//列の設定
var col_model= [
{ name:"no" , index:"no", width:70, align:"right" },
{ name:"name", index:"name", width:100, align:"left" },
{ name:"age", index:"age", width:100, align:"right" },
{ name:"gender", index:"gender", width:100, align:"left" },
{ name:"feature", index:"feature", width:200, align:"left" }
];
//列の表示名
var header_name = ["No.","名前","年齢","性別","特徴"];
//表示するデータ
var datas = [
{ "no":1, name:"Aさん", age:20, gender:"男性", feature:"仮名ではない" },
{ "no":2, name:"Bさん", age:25, gender:"女性", feature:"ばあさんではない" },
{ "no":3, name:"Cさん", age:30, gender:"男性", feature:"特になし" },
{ "no":4, name:"Dさん", age:35, gender:"男性", feature:"デェーさんではない" },
{ "no":5, name:"Eさん", age:45, gender:"女性", feature:"胃酸ではない" },
{ "no":6, name:"Fさん", age:50, gender:"女性", feature:"特になし" },
{ "no":7, name:"Gさん", age:55, gender:"男性", feature:"じいさんではない" },
{ "no":8, name:"Hさん", age:60, gender:"女性", feature:"エロいわけではない" },
{ "no":9, name:"Iさん", age:65, gender:"女性", feature:"愛燦燦とー" },
{ "no":10, name:"Jさん", age:70, gender:"男性", feature:"川平慈英とは関係ない" },
{ "no":11, name:"Kさん", age:75, gender:"男性", feature:"計算ではない" },
{ "no":12, name:"Lさん", age:80, gender:"男性", feature:"特になし" }
];
//テーブルの作成
$( "#sample1" ).jqGrid({
data:datas //表示したいデータ
,datatype : "local" //データの種別(local,json,xml)
,caption : "表のタイトル" //表のキャプション
,colNames : header_name //列の表示名
,colModel : col_model //列ごとの設定
,rowNum : 5 //1ページに表示する行数
,rowList : [1, 5, 10, datas.length] //変更可能な1ページ当たりの行数
,height : $( window ).height() * 0.4 //高さ(px指定）
,width : $( window ).width() * 0.6 //幅(px指定）
,pager : 'pager1' //footerのページャー要素のid
,shrinkToFit : true //画面サイズに依存せず固定の大きさを表示する設定
,viewrecords: true //footerの右下に表示する。
});
//１段目のグループヘッダー
$("#sample1").jqGrid( 'setGroupHeaders'
,{
useColSpanStyle: true
,groupHeaders: [
{ startColumnName : "no", numberOfColumns : 5, titleText : "<em>全カラムに渡るヘッダー</em>" }
]
});
//２段目のグループヘッダー
$("#sample1").jqGrid( 'setGroupHeaders'
,{
useColSpanStyle: true
,groupHeaders: [
{ startColumnName : "no", numberOfColumns : 3, titleText : "<em>3カラムに渡るヘッダー</em>" }
,{ startColumnName : "gender", numberOfColumns : 2, titleText : "<em>2カラムに渡るヘッダー</em>" }
]
});
});
</script>
</head>
<body>
<table id="sample1"></table>
<div id="pager1"></div>
</body>
</html>
具体的には
//１段目のグループヘッダー
$("#sample1").jqGrid( 'setGroupHeaders'
,{
useColSpanStyle: true
,groupHeaders: [
{ startColumnName : "no", numberOfColumns : 5, titleText : "<em>全カラムに渡るヘッダー</em>" }
]
});
//２段目のグループヘッダー
$("#sample1").jqGrid( 'setGroupHeaders'
,{
useColSpanStyle: true
,groupHeaders: [
{ startColumnName : "no", numberOfColumns : 3, titleText : "<em>3カラムに渡るヘッダー</em>" }
,{ startColumnName : "gender", numberOfColumns : 2, titleText : "<em>2カラムに渡るヘッダー</em>" }
]
});
になります。
1行を複数カラムに分割したい場合は「２段目のグループヘッダー」のようにgroupHeadersに配列で複数個指定すれば分割できます。
まとめ
jqGridで複数行の行ヘッダーを作成するにはsetGroupHeadersを利用すれば簡単に行ヘッダーを追加することができます。
以上、jqGridで複数行の行ヘッダーを作成するでした。
