【jqGrid】サイトにjqGridを導入する方法
jQueryのプラグイン「jqGrid」はHTML標準の「TABLEタグ」だけでは実現するには難しいデータのソートや絞り込みなどの機能を実現してくれるものです。
今回はその「jqGrid」をサイトで利用できるようにする方法です。
サイトにjqGridを導入する方法
jqGridは
http://www.trirand.com/blog/でダウンロードできるのですが、利用は無料ではないので、今回は無料バージョンをCDNからリンクして使うことにします。
具体的には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>
</head>
jqGridはjQueryのプラグインなのでjQuery本体もCDNからのリンクを追加しておきます。
実際に表を表示するには
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<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/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" }
];
//列の表示名
var header_name = ["No.","名前","年齢","性別"];
//表示するデータ
var datas = [
{ "no":1, name:"Aさん", age:20, gender:"男性" },
{ "no":2, name:"Bさん", age:25, gender:"女性" },
{ "no":3, name:"Cさん", age:30, gender:"男性" },
{ "no":4, name:"Dさん", age:35, gender:"男性" },
{ "no":5, name:"Eさん", age:45, gender:"女性" }
];
//テーブルの作成
$( "#list_table" ).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 : 'list_pager' //footerのページャー要素のid
,shrinkToFit : true //画面サイズに依存せず固定の大きさを表示する設定
,viewrecords: true //footerの右下に表示する。
});
$( "#list_table" ).filterToolbar({
defaultSearch : "eq" //一致条件
});
});
</script>
</head>
<body>
<table id="list_table"></table>
<div id="list_pager"></div>
</body>
</html>
のような感じになります。