業務で使っているのですが、毎回忘れるのでメモ。
バージョン
- jquery:2.1.1
- jquery-ui:1.11.1
- jqGrid:4.6.0
ヘッダに改行を入れる
単純にcolNamesの指定の中で
タグを埋め込めばOKですが、これだけだと改行した部分が表示されないので、以下のようにヘッダの高さを調整する必要があります。
colNames: ['long<br />text', 'Status']
<style type="text/css">
<!--
.ui-jqgrid .ui-jqgrid-htable th {
height: 70px;
}
.ui-jqgrid .ui-jqgrid-htable th div {
height: 35px;
}
-->
</style>
※リストが複数ある場合は先頭にIDを指定してあげるとそのリストにのみ適用されます
ヘッダの列結合
結合はできるのですが、2行になってしまうようです。今回はそれでいいやと思って詳しくは調べていません。
setGroupHeadersを使用します。
$("#list").jqGrid({
~省略~
});
$("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{ startColumnName: 'content1', numberOfColumns: 4, titleText: 'content group' },
]
});
- useColSpanStyle:2行になるので、これをtrueにすると他の行を自動で行結合してくれます
- startColumnName:どの列から結合するか。colModelで指定したnameを指定します
- numberOfColumns:何列結合するか
- titleText:結合列ヘッダに表示する文字列
こちらを参考にしました。
Common rules
データの列結合
colModelの指定の中で、cellattrにcolspanを指定してあげればOKです。
ただし、結合する先頭列にcolspan、結合される列にはdisplay:noneを指定する必要があります。
colModel: [
{
name: 'content1', index: 'content1', width: 100, align: 'center', hidden: false,
cellattr: function (rowId, tv, rawObject, cm, rdata) {
if (rdata.type == 'aaa') { return ' colspan=2' }
else if (rdata.type == 'bbb') { return ' colspan=4' }
}
},
{
name: 'content2', index: 'content2', width: 80, align: 'center', hidden: false,
cellattr: function(rowId, tv, rawObject, cm, rdata) {
if (rdata.type == 'aaa' || rdata.type == 'bbb') { return ' style="display:none;"' }
}
},
この場合、type列が'aaa'の場合は2列結合、'bbb'の場合は4列結合しています。
cellattrの中で自由に条件指定できるのはありがたいですね。
こちらを参考にしました。
stackOverFlow - How to merge cells in jqGrid 4.0 -
データの行結合
静的データでは簡単なのかもしれないが、Ajax等で動的にデータを取得している場合はやや面倒。
afterInsertRowで行追加処理をする前にbeforeProcessingでデータを確認する必要があります。
今回の要件の場合、上の行と同じ値だったら結合するという内容でした。
あんまり綺麗なソースじゃありませんが。。。
var rowStyleList = new Array();
/**
* グリッドを作成する
*/
function createGrid() {
$("#list").jqGrid({
~省略~
/**
* 行追加の前に呼ばれる処理
*/
beforeProcessing: function () {
// 行スタイルリストの作成
createRowStyleList();
},
/**
* 行生成
*/
afterInsertRow: function (rowid, aData) {
$("#list").setColProp('column1', {
cellattr: function (rowId, value, rowObject, colModel, arrData) {
// スタイル設定
if (rowStyleList.length != 0) {
return rowStyleList[rowId - 1][1];
}
}
});
},
~省略~
});
}
/**
* 行スタイルリストを作成する
*/
function createRowStyleList() {
var rowIDs = $("#list").getDataIDs(); // データ取得
var prevColumn1 = ''; // 前の行のデータ
var spanCount = 1; // 結合行数
var combTopId = 0; // 結合の先頭行番号
var styleList = new Array();
// 行解析
var len = rowIDs.length;
for (var i = 0; i < len; i++) {
var item = rowIDs[i];
var column1 = $("#list").getCell(item, 'column1');
if (prevColumn1 == column1) {
// 前の行と同じ場合
spanCount++;
var rowInfoList = new Array(3); // 0:結合先頭行番号、1:スタイル、2:結合行数(結合先頭行のみ)
rowInfoList[0] = combTopId + 1;
rowInfoList[1] = ' style=display:none; '; // 同じなので表示しない
rowInfoList[2] = 0;
styleList[i] = rowInfoList;
if (i + 1 == len) {
// 最終行の場合
var rowLastList = new Array(3);
rowLastList[0] = combTopId + 1;
rowLastList[1] = ' rowspan=' + spanCount;
rowLastList[2] = spanCount;
styleList[combTopId] = rowLastList;
}
}
else {
// 前の行と違う
if (i != 0) {
// 先頭行でない場合
if (spanCount != 1) {
// 複数行の場合
var rowInfoList = new Array(3);
rowInfoList[0] = combTopId + 1;
rowInfoList[1] = ' rowspan=' + spanCount; // 結合1行目
rowInfoList[2] = spanCount;
styleList[combTopId] = rowInfoList;
if (i + 1 == len) {
// 最終行の場合
var rowLastList = new Array(3);
rowLastList[0] = i + 1;
rowLastList[1] = '';
rowLastList[2] = 0;
styleList[i] = rowLastList;
}
}
else {
// 単一行の場合
var rowInfoList = new Array(3);
rowInfoList[0] = i;
rowInfoList[1] = '';
rowInfoList[2] = 0;
styleList[i - 1] = rowInfoList;
if (i + 1 == len) {
// 最終行の場合
var rowLastList = new Array(3);
rowLastList[0] = i + 1;
rowLastList[1] = '';
rowLastList[2] = 0;
styleList[i] = rowLastList;
}
}
spanCount = 1;
}
combTopId = i;
}
prevColumn1 = column1;
}
rowStyleList = styleList;
}
※ソースそのまま貼れないので一部抜粋しています。そのままでは動作しないかもしれません。なんとなく伝われば。
ちなみにデータ数が多いと結合されるのに気持ち時間がかかります。
もっと簡単にできる方法があればご指南ください。
(2017/09/21追加)ヘッダの列結合に伴う列のズレ修正
最近遭遇して解決できたので追記。
ヘッダの列結合をしたはいいものの、なぜかヘッダ列とデータ列の列幅がずれて表示されてしまいました。
ネットにはそれっぽい情報はあったのですが解決できず、調べたところ以下で解決できました。
<style type="text/css">
<!--
#gview_list .ui-jqgrid-htable{
table-layout: auto;
}
-->
</style>
#gview_***
の部分は適時自分のリスト名に書き換えてください。