【Javascript】jQueryプラグインjqGridの紹介

こんにちわ!
てんとう虫@infiniです(`・ω・´)

今回は前回のjsTreeに続き
jqGridの紹介をしてみたいと思います!

概要はjsTreeと同じく
HTML,XML,jsonのデータを用いてグリッドが生成できるプラグインです!

インストール方法

jqGridを使用するためには、こちらからインストールするだけです。

ついでにこちらのUIもインストールすると
とてもリッチなものが作れたりします★

使用方法

では実際に使用してみたいと思います!

まずはHTMLに各種設定ファイルを読ませます。

<script type="text/javascript" src="jQuery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js" ></script>

そしてJavaScriptも書きます。
解説はコメントにて

$(document).ready(function(){
	var mydata = [
		{code:"001", hira:"あああ", kana:"アアア"},
		{code:"002", hira:"いいい", kana:"イイイ"},
		{code:"003", hira:"ううう", kana:"ウウウ"},
		{code:"004", hira:"えええ", kana:"エエエ"},
		{code:"005", hira:"おおお", kana:"オオオ"},
		{code:"006", hira:"かかか", kana:"カカカ"},
	];
	
	$("#list").jqGrid({
		data	: mydata, //上記で作成したデータ
		datatype: 'local', //xmlでもjsonでもないのでlocal
		caption : '文字一覧',	//表の題名
		colNames: ['コード','ひらがな','カタカナ'], //各項目の表示名
		colModel: [
			{index:'code', name:'code'}, //indexは添字(ソート時などに見られる)。nameに表示したいデータ名を入れる
			{index:'hira', name:'hira'},	
			{index:'kana', name:'kana'},
			],
		sortname	: "code", //デフォルトでcodeをみてソートし表示する
		sortorder	: "ASC"	 //デフォルトで昇順にする
		});
	});

実行します!

リッチな見た目のグリッドが生成されました〜!

項目名の部分をクリックすると
昇順と降順の切り替えなどもしてくれます!便利!

XMLのデータから生成

XMLのデータを用意します。

<root>
	<Items>
		<content>
			<code>001</code>
			<fruits>apple</fruits>
		</content>
		
		<content>
			<code>002</code>
			<fruits>orange</fruits>
		</content>

		<content>
			<code>003</code>
			<fruits>remon</fruits>
		</content>
	</Items>
</root>

そしてJavaScript

$(document).ready(function() {
	$('#list').jqGrid({
		url      : 'ahaha.xml', //読み込ませるxmlファイル名を指定
		datatype : 'xml', //xmlファイルを読ませるのでxmlに
		caption  : '果物一覧',
		colNames : [ 'code', 'fruit'],
		colModel : [ 
			{ name : 'code', index : 'code', xmlmap : 'code' },
			{ name : 'fruits', index : 'fruits', xmlmap : 'fruits' },
		],
		xmlReader	: {
			root        : 'Items', //xmlファイルのroot要素
			row         : 'content', //xmlファイルのrow要素
			repeatitems : false //オブジェクトの配列をデータとして受け取る
		},
	});
});

実行します!

ちゃんとXMLのデータを使用することが出来ました♪

サブグリッド生成

次にサブグリッドというグリッドの生成を行います。
サブグリッドはグリッドの中にグリッドが入っているやつです。

グリッドの中で簡単なツリーみたいなのが作成できるのです。

先ほど作成した果物一覧の中にサブグリッドを作成してみます。
上記のコードのxmlReaderの項目の次に
続けて以下のプロパティを書きます。

subGrid		: true, //サブグリッドを使用する
subGridRowExpanded: function(subgrid_id, row_id) {
	var subgrid_table_id;
	subgrid_table_id = subgrid_id + "_t";
	$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>"); //サブグリッドのテーブルを作成
	$("#" + subgrid_table_id).jqGrid( {  //普通のグリッドと同じようにプロパティを設定
		height 	 : 80,
		url      : 'Detail.xml',
		datatype : 'xml',
		colNames : [ 'color', 'size'],
		colModel : [ 
			{ name : 'color', index : 'color', xmlmap :  'color' },
			{ name : 'size', index : 'size', xmlmap : 'size' },
		],
		xmlReader   : {
			root        : 'Items',
			row         : 'content',
			repeatitems : false
		},
	});

実行します。

このように横に+が付いてくれます!

開くとしっかりサブグリッドが生成されています!!

とても簡単に生成することが出来ました♪

グルーピング生成

最後にグルーピングという機能を紹介して終わりたいと思います。

グルーピングとは
グリッドの要素を勝手にソートし、項目ごとにグループ分けしてくれます

とりあえず実際に実装してみます。

$(document).ready(function() {
	var mydata = [
	{name:"りんご", place:"青森", price:"120", num:"168050"},
	{name:"みかん", place:"和歌山", price:"30", num:"103500"},
	{name:"ぶどう", place:"山梨", price:"300", num:"103270"},
	{name:"みかん", place:"愛媛", price:"80", num:"107310"},
	{name:"ぶどう", place:"長野", price:"350", num:"165820"},
	{name:"りんご", place:"岩手", price:"200", num:"101740"},
	{name:"ぶどう", place:"山形", price:"280", num:"105260"},
	{name:"りんご", place:"長野", price:"100", num:"134260"},
	{name:"みかん", place:"静岡", price:"100", num:"197310"},
	];
	
	$('#list').jqGrid({
		data      : mydata,
		datatype : 'local',
		colNames : [ '名前', '生産地', '値段','生産量'],
		colModel : [ 
			{ name : 'name', index : 'name',summaryType:'count', summaryTpl : '({0}) total'}, //summaryType:'count'で項目数をカウント
			{ name : 'place', index : 'place'},
			{ name : 'price', index : 'Price',summaryType: 'avg'}, //summaryType: 'avg'で項目の平均を算出
			{ name : 'num',index :  'num',summaryType: 'sum'}, //summaryType: 'sum'で項目の合計を算出
		],
		caption		: 'fruitGrid',
		height		: 'auto', //データの量に合わせた表の高さにする
		grouping	: true,	//グルーピングを使用する
		groupingView: {		//グルーピングの設定
			groupField		 : ['name'], //グループ化したい項目
			groupText		 : ['<b>{0}</b>'], //グループ化した項目の表示名
			groupOrder 		 : ['asc'], //昇順
			groupSummary	 : [true]  //サマリータイプを使用する
		}
	});
});

これを実行します。

きれいにグルーピング化することができました(^o^)

平均や合計なども出せるのでとても便利です★



基本的な部分しか紹介は出来ていませんが
何かのお役に立てるとうれしいです。

これからも少しずついろんな機能について行進して行こうと思いますので
ぜひよろしくお願いいたします!

てんとう虫@infiniでした〜(`・ω・´)