HARD DAY'S NIGHT別館

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

jqGrid ソートサンプル

jqGrid はデータの並べ替えに sorttype というオプションを指定することで順序を変えることができます。sorttype には、text, date, int, float, function が指定できます。

数値や日付だったら、それぞれ int や date を指定すれば良いのですが、 例えば、企業では社長、部長、課長など肩書きがありますが、社長は1番目に表示するとか、 会社名だったら法人格を取り除いて社名で並べ替える場合などがあります。

このサンプルは、関数(sortype:function)を使って法人格を取り除いた独自の並べ替えを行います。

コード


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

	jQuery("#list").jqGrid({
		data: mydata,
		datatype: "local",
		colNames:['コード', '会社名', 'カナ'],
		colModel:[
			{index:'comp_code', name:'comp_code'},
			{index:'comp_name', name:'comp_name', sorttype: function(cell) {
							  var str = cell;
							  str = str.replace("株式会社", "");
							  str = str.replace("有限会社", "");
							  return str;
						 }},
			{index:'comp_kana', name:'comp_kana', sorttype: function(cell) {
							  var str = cell;
							  str = str.replace("カブシキカイシャ", "");
							  str = str.replace("ユウゲンガイシャ", "");
							  return str;
						 }},
		],
		height: 'auto',
		sortname: 'comp_code',
		sortorder: "ASC",
		multiselect: false,
		caption: '会社一覧'
	});	
});
	

HTMLコード


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