2013年10月12日土曜日

HTML リンクを表に纏めてブラウザで (2) 表の並び替え

前回 で表が表示できる様になりました。 でも、これだけじゃ ... ( アマリ ツカエナイ )
そうですね、早速、並び替えられる様にしましょうか。
ご自分で Javascript を書くのが本来でしょうが、Internet 上に公開されているものがあります。
今回は、それを流用させて戴きましょうか。


表はデータ件数が増えて来ると必要なものを見付け難くなりますね。
入力した順番で表示される表を、項目欄でソートすれば、見落としも少なくなり、発見までの時間も短縮できます。

手順は次の通りです。
  1. Internet 上のサイトから、表をソート可能にするファイルをダウンロード
  2. 圧縮ファイルなので展開 の上、必要ファイルを HTML のファイルと同じフォルダにコピー
  3. HTML ファイルに、ソートに必要な記述を追加

順に解説します。

1. Internet 上のサイトから、表をソート可能にするファイルをダウンロード
  実に様々な Script (機能拡張パーツ) が紹介されています。 以下は、その一例です。
  次のページにアクセスして、中ほどの ダウンロード リンクから入手します。
 
      HTMLテーブルソートJavaScriptライブラリ  とりさんのソフト屋さん by とりさん さま

2. 圧縮ファイルなので展開 の上、必要ファイルを HTML のファイルと同じフォルダにコピー
  ZIP ファイルを展開します。
  sorter フォルダの中の sorter-0.2.2.js というファイルが お目当て のファイルです。
  このファイルを 今回作成している HTML のファイルと 同じフォルダに コピーします。
  この時に、ファイル名を sorter.js に変更します。

3. HTML ファイルに、ソートに必要な記述を追加
  最後に、今回作成している HTML ファイル ( MyLinkList.html ) に、必要事項を 2 箇所に加筆して行きます。
  <!--sorter js Load -->   <!--Table Control--> と から始まる 箇所 です
  前回をご存知の方は、以下を参考に、手直しをして下さい。  
  
<!DOCTYPE html>
<html lang="jp" xmlns=http://www.w3.org/1999/xhtml>
<head>
   <meta charset="utf-8" />
   <title>MyLinkList Local</title>

  <!--sorter js Load -->
   <script type="text/javascript" src="sorter.js" charset="utf-8"></script>

   <body>
   My Link List<br />
   <br />

   <table class="table-z900" id="sample" >
     <thead>
     <th width= "60">分類</th>
     <th width="120">区分</th>
     <th width="220">内容</th>
     <th width="150">LINK</th>
     <th width="250">Memo</th>
     </thead>
     <tbody>
       <tr>
       <td>検索</td>
       <td>検索 Google</td>
       <td>Google ホーム</td>
       <td><a href="http://www.google.co.jp/">Google Home</a></td>
       <td></td>
       </tr>  
       <tr>
       <td>気象</td>
       <td>気象 台風</td>
       <td>台風情報</td>
       <td><a href="http://www.jma.go.jp/jp/typh/">台風情報 気象庁</a></td>
       <td>台風中心クリックで詳細</td>
       </tr>
       <!--*** 注: 説明の為、データ部分を一部省略しています。実際の変更は不要です。 ***-->
     </tbody>
   </table>

  <!--Table Control-->
   <script type="text/javascript">
   var sample=new table.sorter("sample");
   sample.init();
   </script>


  <style>
   .table-z900 {
    border-collapse: collapse; /*  枠線 collapse:1本 separate:2本分離 */
   }
   .table-z900 th {
    border: solid 1px #c1c1c1; /* 線種 solid:実線 dashed:破線 ... 線幅 線色 HTML16 進数 */
    padding: 0.3em; /* 余白 単位 em:文字 px:ピクセル */
   }
   .table-z900 td {
    border: solid 1px #cccccc;  /* 線種 solid:実線 dashed:破線 ... 線幅 線色 HTML16 進数 */
    padding: 0.3em; /* 余白  単位 em:文字 px:ピクセル */
   }
   </style>
   </body>
</html>

  緑色の部分 <!--  --> は、コメントを表します。 実行には影響しません。 省略可能です。
                                尚、上の例では、説明用に、データの一部を省きました。
  赤い部分が、付け加えた部分です。
  オレンジの部分は、今回の関連部分ですが、前回、既に、入っていました。


  これを上書き保存して、実行すると、表が項目の内容に応じてソート可能になります。
  但し、利用するブラウザの設定に因っては、最初に 実行制限を許可する為のポップアップが表示されます。
  これは、ブラウザによるセキュリティ保護の為の措置です。
  許可すると、表の該当項目欄(見出し)のクリックで ソートが出来る様になります。
  許可しないと、以前(前回)の表と同じで、操作を受け付けません。
  

 
注: リンクの文字色が違うのは、利用の有無によるものです。


取り敢えず、これで、少しは、使えるものになったでしょうか?
実際には、データをドンドン蓄積して使って下さい。
項目毎にソートが可能ですので、項目の組み方やデータの内容を ご自分で使い易い様に 変更されると良いでしょう。


0 件のコメント:

コメントを投稿