jqGrid   検索・フィルタ・チェックボックス・ラジオボタン付きテーブルの作り方

リッチなテーブルを簡単に作成することができるライブラリ「jqGrid」を使った
・検索
・フィルタ
・チェックボックス
・ラジオボタン
付きのテーブルの作り方。備忘録。

準備編などは以下を参照。
http://qiita.com/k499778/items/65db2380d989b1d70985
http://qiita.com/k499778/items/ad5aec2714d7c119996f

<br>
##1.コーディング
```html:jqGrid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" media="screen" href="jqGrid/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="jqGrid/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-ja.js"></script>


<script type="text/javascript">
	$(function() {
		//列の設定
		var colModelSettings= [

		    //チェックボックス
 		    {name:"radio",index:"radio",width:50,align:"center",classes:"radio_class"
		    	,edittype:"checkbox",formatter:"checkbox",editable:true,formatoptions: {disabled : false}},

		    //ラジオボタン
		 /* {name:"radio",index:"radio",width:50,align:"center",classes:"radio_class",
             formatter:function(cellvalue, options, rowObject){
	         return '<input type="radio" name="radio" value="' + options.rowId + '">';}}, */

			{name:"no",index:"no",width:70,align:"center",classes:"no_class"},
			{name:"name",index:"name",width:200,align:"center",classes:"name_class"},
			{name:"age",index:"age",width:200,align:"center",classes:"age_class"},
			{name:"local",index:"local",width:200,align:"center",classes:"local_class"},
			{name:"hobby",index:"hobby",width:200,align:"center",classes:"hobby_class"}
		];

		//列の表示名
		var colNames = ["","No.","name","age","local","hobby"];

		var date = [
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"attta",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"omoawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nsiraagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
		        	{no:2,name:"nakayama",age:20,local:"Japan",hobby:"Soccer"}
		        ];

		//テーブルの作成
		$("#sample1").jqGrid({
			data:date,  //表示したいデータ
			datatype : "local",            //データの種別 他にjsonやxmlも選べます。
		                                       //しかし、私はlocalが推奨です。
			colNames : colNames,           //列の表示名
			colModel : colModelSettings,   //列ごとの設定
			rowNum : 10,                   //一ページに表示する行数
			rowList : [1, 10, 20],         //変更可能な1ページ当たりの行数
			caption : "Sample Display",    //ヘッダーのキャプション
			height : 200,                  //高さ
			width : 700,                   //幅
			pager : 'pager1',              //footerのページャー要素のid
			regional : 'ja',
			shrinkToFit : true,       //画面サイズに依存せず固定の大きさを表示する設定
			viewrecords: true,             //footerの右下に表示する。
		});

		//検索追加
		$("#sample1").jqGrid('navGrid','#pager1',{
			add:false,   //おまじない
			edit:false,  //おまじない
			del:false,   //おまじない
			search:{     //検索オプション
				odata : ['equal', 'not equal', 'less', 'less or equal',
		                         'greater','greater or equal', 'begins with',
		                         'does not begin with','is in','is not in','ends with',
		                         'does not end with','contains','does not contain']
			}   //検索の一致条件を入れられる
		});

		//filterバー追加
		$("#sample1").filterToolbar({
		    defaultSearch:'cn'     //一致条件を入れる。
		                           //選択肢['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
		});
	});
</script>
</head>
<body>
	<table id="sample1"></table>
	<div id="pager1"></div>
</body>
</html>
```





<br>
##2.表示
![a.JPG](https://qiita-image-store.s3.amazonaws.com/0/60528/d584aa9c-7b33-7416-6a8d-2939b95a2eb9.jpeg)



<br>
参照
http://acro-engineer.hatenablog.com/entry/20110715/1310683073