「クリックしたカラムでソート」を別ウィンドウで開く
各種サンプルとソース一覧 | 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(
  39.           function(a,b)
  40.           {
  41.             var aChar = a.local;
  42.             var bChar = b.local;
  43.             if (aChar < bChar)
  44.             {
  45.               return -1;
  46.             }
  47.             else if (bChar < aChar)
  48.             {
  49.               return 1;
  50.             }
  51.             else
  52.             {
  53.               return 0;
  54.             }
  55.           }
  56.         );
  57.       };
  59.       // 地方でソート：逆順
  60.       self.sortLocalReverse = function()
  61.       {
  62.         self.tourism.sort(
  63.           function(a,b)
  64.           {
  65.             var aChar = a.local;
  66.             var bChar = b.local;
  67.             if (bChar < aChar)
  68.             {
  69.               return -1;
  70.             }
  71.             else if (aChar < bChar)
  72.             {
  73.               return 1;
  74.             }
  75.             else
  76.             {
  77.               return 0;
  78.             }
  79.           }
  80.         );
  81.       };
  82.     }
  84.     ko.applyBindings(new viewModel());
  85.   });
  86. </script>
  88. <style type="text/css">
  89. tr:hover{
  90.   background-color:#ffffcc;
  91. }
  92. th, td{
  93.   border:1px solid #ccc;
  94.   font-size:small;
  95. }
  96. </style>
  98. </head>
  99. <body>
  100. <h1>クリックしたカラムでソート</h1>
  102. <table>
  103. <thead>
  104. <tr>
  105. <th>地方
  106.   <a href="#" data-bind="text: '▼', click: $root.sortLocal"></a>
  107.   <a href="#" data-bind="text: '▲', click: $root.sortLocalReverse"></a>
  108. </th>
  109. <th>地域</th>
  110. <th>種別</th>
  111. <th>説明</th>
  112. </tr>
  113. </thead>
  114. <tbody data-bind="foreach: tourism">
  115. <tr>
  116. <td style="white-space:nowrap" data-bind="text: local"></td>
  117. <td style="white-space:nowrap" data-bind="text: area"></td>
  118. <td style="white-space:nowrap" data-bind="text: kind"></td>
  119. <td data-bind="text: description"></td>
  120. </tr>
  121. </tbody>
  122. </table>
  124. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  125. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  126. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  127. </div>
  129. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  130. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  131. </div>
  133. </body>
  134. </html>