必要に迫られたので。
jQuery Grid Plugin – jqGrid [日本語マニュアルサイト：jqGrid]
jqGridデモ
jqGrid Demo
※TOK2で404となっていました。すみません…
主な機能
- jqGridを使用したグリッドテーブル
- jqGridでのヘッダ2段組
- jqGridでの横固定スクロール
- jqGridで動的にカラム追加 (無理矢理)
- 各種jQuery UIのテーマを動的に変更可能 (おまけ)
コード
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" /> <!-- jqGrid css -->
<link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <!-- jQuery UI css -->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> <!-- jQuery js -->
<script type="text/javascript" src="jquery-ui.min.js"></script> <!-- jQuery UI js -->
<script type="text/javascript" src="jquery.jqGrid.min.js"></script> <!-- jqGrid js -->
<script type="text/javascript" src="i18n/grid.locale-ja.js"></script> <!-- jqGrid locale js -->
<script type="text/javascript">
<!--
// グリッドに表示するデータ
var jsonData = [
{no:'003', name:'メガフシギバナ', hp:80, a:100, b:123, c:122, d:120, s:80, sp:'あついしぼう'}
,{no:'006', name:'メガリザードンX', hp:78, a:130, b:111, c:130, d:85, s:100, sp:'かたいツメ'}
,{no:'006', name:'メガリザードンY', hp:78, a:104, b:78, c:159, d:115, s:100, sp:'ひでり'}
,{no:'009', name:'メガカメックス', hp:79, a:103, b:120, c:135, d:115, s:78, sp:'メガランチャー'}
// ～省略～
];
// カラム名データ
var columnNameData = ['No', 'Name', 'ＨＰ', '攻撃', '防御', '特攻', '特防', '素早', '備考'];
// カラム設定データ
var columnParamData = [
{name:'no', index:'no', width:25, align:'center', sorttype:'text', resizable:false, frozen:true}
,{name:'name', index:'name', width:100, align:'left', sorttype:'text', frozen:true}
,{name:'hp', index:'hp', width:30, align:'right', sorttype:'int', frozen:false}
,{name:'a', index:'a', width:30, align:'right', sorttype:'int'}
,{name:'b', index:'b', width:30, align:'right', sorttype:'int'}
,{name:'c', index:'c', width:30, align:'right', sorttype:'int'}
,{name:'d', index:'d', width:30, align:'right', sorttype:'int'}
,{name:'s', index:'s', width:30, align:'right', sorttype:'int'}
,{name:'notes', index:'notes', width:100, align:'left', sortable:false, hidden:true}
]
var isLoaded = false;
$(function(){
createGrid = function () {$('#hogeGridTable').jqGrid({
datatype : 'local' // データタイプ
, colNames : columnNameData // カラム名
, colModel : columnParamData // カラム設定
, data : jsonData // 読み込むデータ
, rowNum : 10 // 1ページの表示件数
, rowList : [5, 10, 15] // rowNumの選択リスト
, caption : 'メガシンカ一覧' // キャプション
, height : 150 // グリッドテーブルの高さ
, width : 480 // グリッドテーブルの幅
, pager : 'hogePager' // ページャ
, shrinkToFit : true // カラム幅の自動調整
, viewrecords: true // フッタの右下に件数情報を表示
, gridComplete : function() { // 読み込み完了時に呼ばれる関数
if (!isLoaded) {
$('#hogeGridTable').jqGrid('setGroupHeaders', {
useColSpanStyle : true // カラム縦結合
, groupHeaders : [ // ヘッダを2段にする
{
startColumnName : 'hp' // 下段の開始カラム
, numberOfColumns : 6 // 結合するカラム数
, titleText : 'ステータス' // 結合後の上段カラム名
}
]
});
$('#hogeGridTable').jqGrid('setFrozenColumns'); // カラムの固定化(固定するカラムはcolModelのfrozen)
isLoaded = true;
}
}
})};
createGrid();
$('#hogeAddCol').click(function() {
isLoaded = false
$("#hogeGridTable").GridUnload(); // グリッドを削除
columnNameData.push("特性"); // カラムの追加
columnParamData.push({name:'sp', index:'sp', width:200, align:'left', sortable:false}); // 追加したカラムの設定を追加
createGrid(); // 列を追加してグリッド再作成
});
});
//-->
</script>
<table id="hogeGridTable"></table> <!-- グリッド部分 -->
<div id="hogePager"></div> <!-- ページャ部分 -->
<input type="button" id="hogeAddCol" value="列追加" />
解説
html部分は単純明快ですので、スクリプト部分を見ていきます。
必要なファイル
コードに記載していますが、必要なのは以下のファイルです。
- jQuery : jquery-1.11.1.min.js (サイト)
- jQuery UI : jquery-ui.min.js、jquery-ui.css (サイト)
- jqGrid : jquery.jqGrid.min.js、grid.locale-ja.js、ui.jqgrid.css (サイト)
それぞれダウンロードして読み込みます。
なお、ファイル名の末尾に"min"とあるのは容量圧縮されたファイルです。
jqGridの基本コード
jqGridを使用するにあたって、基本となるのは以下のコードです。
$('#tableのid').jqGrid({
datatype : 'local' // データタイプ
, colNames : ['カラム1', 'カラム2', 'カラム3'] // カラム名
, colModel : [
{name:'カラム1', id:'col1', width:100, align:'left'}
, {name:'カラム2', id:'col2', width:100, align:'center'}
, {name:'カラム3', id:'col3', width:100, align:'left'}
] // カラム設定
, data : [
{col1:'aaa', col2:'bbb', col3:'ccc'}
, {col1:'ddd', col2:'eee', col3:'fff'}
, {col1:'ggg', col2:'hhh', col3:'iii'}
] // 読み込むデータ
, rowNum : 10 // 1ページの表示件数
, rowList : [5, 10, 15] // rowNumの選択リスト
, caption : 'gridのキャプション' // キャプション
, height : 150 // グリッドテーブルの高さ
, width : 480 // グリッドテーブルの幅
, pager : 'ページャdivタグのid' // ページャ
, shrinkToFit : true // カラム幅の自動調整
, viewrecords: true // フッタの右下に件数情報を表示
});
以下のサイトを参考にさせてもらいました。
jqGrid関数に渡すプロパティの一覧は日本語マニュアルの以下のページに記載されています。
[プロパティ｜基本のグリッド - jqGrid]
dataType : 'local'などは載っていなかったので全てを網羅しているわけではなさそうですが、非常に参考になりました。
jqGridでのヘッダ2段組、横固定スクロール
グリッドテーブルのヘッダ部分を2段組にしたり、一部のカラムを横スクロール時にも固定することができたりします。
$('#tableのid').jqGrid('setGroupHeaders', {
useColSpanStyle : true // カラム縦結合
, groupHeaders : [ // ヘッダを2段にする
{
startColumnName : 'col2' // 下段の開始カラム
, numberOfColumns : 2 // 結合するカラム数
, titleText : '結合名' // 結合後の上段カラム名
}
]
});
$('#tableのid').jqGrid('setFrozenColumns'); // カラムの固定化(固定するカラムはcolModelのfrozen)
}
jqGrid関数を呼ぶ際に、第一引数で'setGroupHeaders'を指定することでヘッダを2段組にできます。
第二引数にuseColSpanStyleとgroupHeadersを持つオブジェクトを渡して、ヘッダの結合条件を指定します。
また、第一引数に'setFrozenColumns'を指定することで、横スクロール固定を有効にします。実際に固定するカラムは基本コードのcolModelプロパティでfrozenをtrueすることで設定可能です。
以下のサイトを参考にさせてもらいました。
jqGridで動的にカラム追加
動的にレコード(行)を追加するのはaddRowDataなどで比較的簡単に実現できますが、カラム(列)は参考になる情報がありませんでした。
無理矢理ながら追加してみたのが以下のコードです。
function() {
$("#tableのid").GridUnload(); // グリッドを削除
columnNameData.push("追加するカラム名"); // カラムの追加
columnParamData.push({name:'追加するカラム名', index:'addCol', width:200, align:'right'}); // 追加したカラムの設定を追加
createGrid(); // 列を追加してグリッド再作成
};
解説では触れていませんでしたが、jqGridは”createGrid"という関数として定義しています。
GridUnload()でグリッドをごそっと削除したあと、外部定義しているカラム名称の配列とカラム設定情報の配列に新しい列をpushしています。
その後はcreateGridを再度コールしてグリッドテーブルを再作成します。
実際のデータについては、本来はサーバから全て受信する想定をしているので、クライアント側で増やしたりしていません。最初から全て持たせています。
一部、以下のサイトを参考にさせてもらいました。
jqGridの備忘録 「グリッドを更新する方法」｜Type2011おじさんの徒然日記
jqGridは他にもデータのフィルタリングなども可能ですが、今回は不要なので省きました。
関連：jQueryプラグイン「jqGrid」を勉強しました その２
