「クリックしたカラムでソート３」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

クリックしたカラムでソート３

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックしたカラムでソート３</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function viewModel() {
var self = this;
// 表示するデータ群をいれる変数（？）
self.tourism = ko.observableArray();
// 表示するデータ
self.tourism([
{ id: 60, local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
{ id: 12, local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
{ id: 20, local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
{ id: 25, local: '沖縄地方', area: '恩納', kind: '保養地・自然', description: 'ビーチリゾート、万座毛。', },
{ id: 15, local: '北海道', area: '旭川', kind: '文化', description: 'アイヌ文化、旭山動物園など。', },
{ id: 16, local: '九州地方', area: '指宿', kind: '保養・自然', description: '指宿温泉、開聞岳、池田湖、長崎鼻。', },
{ id: 30, local: '九州地方', area: '鹿児島', kind: '歴史遺産・自然', description: '桜島、磯庭園、城山など。', },
{ id: 31, local: '関東地方', area: '箱根', kind: '保養', description: '箱根温泉、芦ノ湖、箱根駅伝。', },
{ id: 40, local: '中部地方', area: '黒部', kind: '自然・温泉', description: '宇奈月温泉などの温泉、黒部峡谷。', },
{ id: 25, local: '中部地方', area: '名古屋', kind: '歴史遺産・文化', description: '名古屋城、熱田神宮、徳川美術館', },
{ id: 32, local: '四国地方', area: '大洲', kind: '町並・歴史遺産', description: 'おはなはん通り、大洲城、鵜飼など。', },
{ id: 36, local: '中国地方', area: '米子', kind: '保養・歴史遺産', description: '皆生温泉、米子城跡と城下町', },
{ id: 13, local: '中国地方', area: '出雲市', kind: '自然・歴史遺産', description: '出雲大社、日御碕、立久恵峡など。', },
{ id: 10, local: '沖縄地方', area: '南城市知念地区', kind: '歴史遺産', description: '世界遺産である斎場御嶽。', },
]);
// ソート
self.sortObj = function (key, order) {
// key : 並び替えの対象のキー
// order : true - 昇順（正順：小さいモノ順） / false - 降順（逆順：大きいもの順）
self.tourism.sort(function(a,b){return arySort(a[key], b[key], order);});
}
}
// 連想配列のソート
function arySort(aKey, bKey, order)
{
if ((aKey < bKey && order == true) || (bKey < aKey && order == false))
{
return -1;
}
else if ((bKey < aKey && order == true) || (aKey < bKey && order == false))
{
return 1;
}
else
{
return 0;
}
}
ko.applyBindings(new viewModel());
});
</script>
<style type="text/css">
tr:hover{
background-color:#ffffcc;
}
th, td{
border:1px solid #ccc;
font-size:small;
}
</style>
</head>
<body>
<h1>クリックしたカラムでソート３</h1>
<table>
<thead>
<tr>
<th>id
<a href="#" title="正順（小さい順）" data-bind="text: '▲', click: function(){$root.sortObj('id', true);}"></a>
<a href="#" title="逆順（大きい順）" data-bind="text: '▼', click: function(){$root.sortObj('id', false);}"></a>
</th>
<th>地方
<a href="#" title="正順（小さい順）" data-bind="text: '▲', click: function(){$root.sortObj('local', true);}"></a>
<a href="#" title="逆順（大きい順）" data-bind="text: '▼', click: function(){$root.sortObj('local', false);}"></a>
</th>
<th>地域
<a href="#" title="正順（小さい順）" data-bind="text: '▲', click: function(){$root.sortObj('area', true);}"></a>
<a href="#" title="逆順（大きい順）" data-bind="text: '▼', click: function(){$root.sortObj('area', false);}"></a>
</th>
<th>種別
<a href="#" title="正順（小さい順）" data-bind="text: '▲', click: function(){$root.sortObj('kind', true);}"></a>
<a href="#" title="逆順（大きい順）" data-bind="text: '▼', click: function(){$root.sortObj('kind', false);}"></a>
</th>
<th>説明
<a href="#" title="正順（小さい順）" data-bind="text: '▲', click: function(){$root.sortObj('description', true);}"></a>
<a href="#" title="逆順（大きい順）" data-bind="text: '▼', click: function(){$root.sortObj('description', false);}"></a>
</th>
</tr>
</thead>
<tbody data-bind="foreach: tourism">
<tr>
<td style="white-space:nowrap" data-bind="text: id"></td>
<td style="white-space:nowrap" data-bind="text: local"></td>
<td style="white-space:nowrap" data-bind="text: area"></td>
<td style="white-space:nowrap" data-bind="text: kind"></td>
<td data-bind="text: description"></td>
</tr>
</tbody>
</table>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>