HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid 簡単サンプル

jqGrid は参照元データをURLを指定して取得して表示することもできるのですが、このサンプルでは、 ローカルに配列として保持しているデータ表示します。

表の折りたたみ、データの並べ替え、列幅の変更、選択行のハイライトなどは、あらかじめ実装されているので、 開発が楽になります。

実際にはPHPでページの取得時にデータベースからクエリして得たデータを mydata 配列に書き出します。

コード


jQuery(document).ready(function()
{
	var mydata = [
		{comp_code:"CD1", comp_name:"株式会社シー", comp_kana:"カブシキカイシャシー"},
		{comp_code:"CD2", comp_name:"ビー株式会社", comp_kana:"ビーカブシキカイシャ"},
		{comp_code:"CD3", comp_name:"有限会社エー", comp_kana:"ユウゲンガイシャエー"},
	];

	jQuery("#list").jqGrid({
		data: mydata,
		datatype: "local",
		colNames:['コード', '会社名', 'カナ'],
		colModel:[
			{index:'comp_code', name:'comp_code', width:'60px'},
			{index:'comp_name', name:'comp_name', width:'150px'},
			{index:'comp_kana', name:'comp_kana', width:'200px'},
		],
		height: 'auto',
		sortname: 'comp_code',
		sortorder: "ASC",
		multiselect: false,
		caption: '会社一覧'
	});	
});
	

HTMLコード


<table id="list">
</table>