クリックしたカラムでソート2
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>クリックしたカラムでソート2</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([
- { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
- { local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
- { local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
- { local: '沖縄地方', area: '恩納', kind: '保養地・自然', description: 'ビーチリゾート、万座毛。', },
- { local: '北海道', area: '旭川', kind: '文化', description: 'アイヌ文化、旭山動物園など。', },
- { local: '九州地方', area: '指宿', kind: '保養・自然', description: '指宿温泉、開聞岳、池田湖、長崎鼻。', },
- { local: '九州地方', area: '鹿児島', kind: '歴史遺産・自然', description: '桜島、磯庭園、城山など。', },
- { local: '関東地方', area: '箱根', kind: '保養', description: '箱根温泉、芦ノ湖、箱根駅伝。', },
- { local: '中部地方', area: '黒部', kind: '自然・温泉', description: '宇奈月温泉などの温泉、黒部峡谷。', },
- { local: '中部地方', area: '名古屋', kind: '歴史遺産・文化', description: '名古屋城、熱田神宮、徳川美術館', },
- { local: '四国地方', area: '大洲', kind: '町並・歴史遺産', description: 'おはなはん通り、大洲城、鵜飼など。', },
- { local: '中国地方', area: '米子', kind: '保養・歴史遺産', description: '皆生温泉、米子城跡と城下町', },
- { local: '中国地方', area: '出雲市', kind: '自然・歴史遺産', description: '出雲大社、日御碕、立久恵峡など。', },
- { local: '沖縄地方', area: '南城市知念地区', kind: '歴史遺産', description: '世界遺産である斎場御嶽。', },
- ]);
- // 地方でソート
- self.sortLocal = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.local, b.local, false);});
- };
- // 地方でソート:逆順
- self.sortLocalReverse = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.local, b.local, true);});
- };
-
- // 地域でソート
- self.sortArea = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.area, b.area, false);});
- };
- // 地域でソート:逆順
- self.sortAreaReverse = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.area, b.area, true);});
- };
-
- // 種別でソート
- self.sortKind = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.kind, b.kind, false);});
- };
- // 種別でソート:逆順
- self.sortKindReverse = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.kind, b.kind, true);});
- };
-
- // 説明でソート
- self.sortDescription = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.description, b.description, false);});
- };
- // 説明でソート:逆順
- self.sortDescriptionReverse = function()
- {
- self.tourism.sort(function(a,b){return arySort(a.description, b.description, true);});
- };
- }
- // 連想配列のソート
- 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>クリックしたカラムでソート2</h1>
- <table>
- <thead>
- <tr>
- <th>地方
- <a href="#" data-bind="text: '▼', click: $root.sortLocal"></a>
- <a href="#" data-bind="text: '▲', click: $root.sortLocalReverse"></a>
- </th>
- <th>地域
- <a href="#" data-bind="text: '▼', click: $root.sortArea"></a>
- <a href="#" data-bind="text: '▲', click: $root.sortAreaReverse"></a>
- </th>
- <th>種別
- <a href="#" data-bind="text: '▼', click: $root.sortKind"></a>
- <a href="#" data-bind="text: '▲', click: $root.sortKindReverse"></a>
- </th>
- <th>説明
- <a href="#" data-bind="text: '▼', click: $root.sortDescription"></a>
- <a href="#" data-bind="text: '▲', click: $root.sortDescriptionReverse"></a>
- </th>
- </tr>
- </thead>
- <tbody data-bind="foreach: tourism">
- <tr>
- <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;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>