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

  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>
  8. <script type="text/javascript">
  9.   $(document).ready(function () {
  10.     function viewModel() {
  11.       var self = this;
  12.       // 表示するデータ群をいれる変数(?)
  13.       self.tourism = ko.observableArray();
  14.       // 表示するデータ
  15.       self.tourism([
  16.         { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
  17.         { local: '東北地方', area: '大仙市', kind: '文化・自然・温泉', description: '大曲花火大会、秋ノ宮温泉郷など。', },
  18.         { local: '北海道', area: '七飯', kind: '自然・保養', description: '大沼・小沼などの大沼国定公園、流山温泉。', },
  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.       ]);
  31.       // 地方でソート
  32.       self.sortLocal = function()
  33.       {
  34.         self.tourism.sort(
  35.           function(a,b)
  36.           {
  37.             var aChar = a.local;
  38.             var bChar = b.local;
  39.             if (aChar < bChar)
  40.             {
  41.               return -1;
  42.             }
  43.             else if (bChar < aChar)
  44.             {
  45.               return 1;
  46.             }
  47.             else
  48.             {
  49.               return 0;
  50.             }
  51.           }
  52.         );
  53.       };
  54.       // 地方でソート:逆順
  55.       self.sortLocalReverse = function()
  56.       {
  57.         self.tourism.sort(
  58.           function(a,b)
  59.           {
  60.             var aChar = a.local;
  61.             var bChar = b.local;
  62.             if (bChar < aChar)
  63.             {
  64.               return -1;
  65.             }
  66.             else if (aChar < bChar)
  67.             {
  68.               return 1;
  69.             }
  70.             else
  71.             {
  72.               return 0;
  73.             }
  74.           }
  75.         );
  76.       };
  77.     }
  78.     ko.applyBindings(new viewModel());
  79.   });
  80. </script>
  81. <style type="text/css">
  82. tr:hover{
  83.   background-color:#ffffcc;
  84. }
  85. th, td{
  86.   border:1px solid #ccc;
  87.   font-size:small;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <h1>クリックしたカラムでソート</h1>
  93. <table>
  94. <thead>
  95. <tr>
  96. <th>地方
  97.   <a href="#" data-bind="text: '▼', click: $root.sortLocal"></a>
  98.   <a href="#" data-bind="text: '▲', click: $root.sortLocalReverse"></a>
  99. </th>
  100. <th>地域</th>
  101. <th>種別</th>
  102. <th>説明</th>
  103. </tr>
  104. </thead>
  105. <tbody data-bind="foreach: tourism">
  106. <tr>
  107. <td style="white-space:nowrap" data-bind="text: local"></td>
  108. <td style="white-space:nowrap" data-bind="text: area"></td>
  109. <td style="white-space:nowrap" data-bind="text: kind"></td>
  110. <td data-bind="text: description"></td>
  111. </tr>
  112. </tbody>
  113. </table>
  114. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  115. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  116. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  117. </div>
  118. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  119. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  120. </div>
  121. </body>
  122. </html>