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

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

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>クリックしたカラムでソート２</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     function viewModel() {
  12.       var self = this;
  14.       // 表示するデータ群をいれる変数（？）
  15.       self.tourism = ko.observableArray();
  17.       // 表示するデータ
  18.       self.tourism([
  19.         { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
  20.         { local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
  21.         { local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
  22.         { local: '沖縄地方', area: '恩納', kind: '保養地・自然', description: 'ビーチリゾート、万座毛。', },
  23.         { local: '北海道', area: '旭川', kind: '文化', description: 'アイヌ文化、旭山動物園など。', },
  24.         { local: '九州地方', area: '指宿', kind: '保養・自然', description: '指宿温泉、開聞岳、池田湖、長崎鼻。', },
  25.         { local: '九州地方', area: '鹿児島', kind: '歴史遺産・自然', description: '桜島、磯庭園、城山など。', },
  26.         { local: '関東地方', area: '箱根', kind: '保養', description: '箱根温泉、芦ノ湖、箱根駅伝。', },
  27.         { local: '中部地方', area: '黒部', kind: '自然・温泉', description: '宇奈月温泉などの温泉、黒部峡谷。', },
  28.         { local: '中部地方', area: '名古屋', kind: '歴史遺産・文化', description: '名古屋城、熱田神宮、徳川美術館', },
  29.         { local: '四国地方', area: '大洲', kind: '町並・歴史遺産', description: 'おはなはん通り、大洲城、鵜飼など。', },
  30.         { local: '中国地方', area: '米子', kind: '保養・歴史遺産', description: '皆生温泉、米子城跡と城下町', },
  31.         { local: '中国地方', area: '出雲市', kind: '自然・歴史遺産', description: '出雲大社、日御碕、立久恵峡など。', },
  32.         { local: '沖縄地方', area: '南城市知念地区', kind: '歴史遺産', description: '世界遺産である斎場御嶽。', },
  33.       ]);
  35.       // 地方でソート
  36.       self.sortLocal = function()
  37.       {
  38.         self.tourism.sort(function(a,b){return arySort(a.local, b.local, false);});
  39.       };
  41.       // 地方でソート：逆順
  42.       self.sortLocalReverse = function()
  43.       {
  44.         self.tourism.sort(function(a,b){return arySort(a.local, b.local, true);});
  45.       };
  46.       
  47.       // 地域でソート
  48.       self.sortArea = function()
  49.       {
  50.         self.tourism.sort(function(a,b){return arySort(a.area, b.area, false);});
  51.       };
  53.       // 地域でソート：逆順
  54.       self.sortAreaReverse = function()
  55.       {
  56.         self.tourism.sort(function(a,b){return arySort(a.area, b.area, true);});
  57.       };
  58.       
  59.       // 種別でソート
  60.       self.sortKind = function()
  61.       {
  62.         self.tourism.sort(function(a,b){return arySort(a.kind, b.kind, false);});
  63.       };
  65.       // 種別でソート：逆順
  66.       self.sortKindReverse = function()
  67.       {
  68.         self.tourism.sort(function(a,b){return arySort(a.kind, b.kind, true);});
  69.       };
  70.       
  71.       // 説明でソート
  72.       self.sortDescription = function()
  73.       {
  74.         self.tourism.sort(function(a,b){return arySort(a.description, b.description, false);});
  75.       };
  77.       // 説明でソート：逆順
  78.       self.sortDescriptionReverse = function()
  79.       {
  80.         self.tourism.sort(function(a,b){return arySort(a.description, b.description, true);});
  81.       };
  82.     }
  84.     // 連想配列のソート
  85.     function arySort(aKey, bKey, order)
  86.     {
  87.       if ((aKey < bKey && order == true) || (bKey < aKey && order == false))
  88.       {
  89.         return -1;
  90.       }
  91.       else if ((bKey < aKey && order == true) || (aKey < bKey && order == false))
  92.       {
  93.         return 1;
  94.       }
  95.       else
  96.       {
  97.         return 0;
  98.       }
  99.     }
  101.     ko.applyBindings(new viewModel());
  102.   });
  103. </script>
  105. <style type="text/css">
  106. tr:hover{
  107.   background-color:#ffffcc;
  108. }
  109. th, td{
  110.   border:1px solid #ccc;
  111.   font-size:small;
  112. }
  113. </style>
  115. </head>
  116. <body>
  117. <h1>クリックしたカラムでソート２</h1>
  119. <table>
  120. <thead>
  121. <tr>
  122. <th>地方
  123.   <a href="#" data-bind="text: '▼', click: $root.sortLocal"></a>
  124.   <a href="#" data-bind="text: '▲', click: $root.sortLocalReverse"></a>
  125. </th>
  126. <th>地域
  127.   <a href="#" data-bind="text: '▼', click: $root.sortArea"></a>
  128.   <a href="#" data-bind="text: '▲', click: $root.sortAreaReverse"></a>
  129. </th>
  130. <th>種別
  131.   <a href="#" data-bind="text: '▼', click: $root.sortKind"></a>
  132.   <a href="#" data-bind="text: '▲', click: $root.sortKindReverse"></a>
  133. </th>
  134. <th>説明
  135.   <a href="#" data-bind="text: '▼', click: $root.sortDescription"></a>
  136.   <a href="#" data-bind="text: '▲', click: $root.sortDescriptionReverse"></a>
  137. </th>
  138. </tr>
  139. </thead>
  140. <tbody data-bind="foreach: tourism">
  141. <tr>
  142. <td style="white-space:nowrap" data-bind="text: local"></td>
  143. <td style="white-space:nowrap" data-bind="text: area"></td>
  144. <td style="white-space:nowrap" data-bind="text: kind"></td>
  145. <td data-bind="text: description"></td>
  146. </tr>
  147. </tbody>
  148. </table>
  150. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  151. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  152. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  153. </div>
  155. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  156. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  157. </div>
  159. </body>
  160. </html>