« マウスオーバーした行をハイライト表示するテーブル | トップページ | Movable Type の再構築時にエラーになる… »

2008.04.16

テーブルの列をソートできるようにする

テーブルをもっと便利に使いやすく2|TableKit

前回に引き続き、Web Designing4月号「Ajaxハジメマシタ」の“テーブルをもっと便利に使いやすく”からもう1つのスクリプトを紹介してみます。

TableKit(僕好みのシンプルでキレイなサイトです)というスクリプトなんですが、各列ごとにソートができるようになります。まさに静から動へのテーブルに変化してしまいます。
使い方によっては非常に便利なデータテーブルが作れそうです。

サンプルはこちら

※08.04.09〜08.04.15までのアクセスが多かったページBEST5

↑このサンプルはこちらからダウンロードできます。

こちらも設定の仕方もいたって簡単です。
prototype.js、fastinit.js、tablekit.jsの3つのJavaScriptを読み込み、
反映させるテーブルに"sortable"という名称をclass属性値に追加するだけです。
デザインの調整はcssで行うことになります。
細かな所はサンプルのソースをよく見てもらうか、Web Designing4月号を読んでください。

また、Web Designing4月号の紙面では、「列幅のリサイズ機能」や「文字列の編集機能」も紹介されていましたが、「列幅のリサイズ機能」はウチのIE6,IE7環境では機能しませんでした。
「文字列の編集機能」も必要性を感じなかったので設定してありませんが、それぞれ"resizable"、"editable"とclass属性値に追加するだけのようです。

|

« マウスオーバーした行をハイライト表示するテーブル | トップページ | Movable Type の再構築時にエラーになる… »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/40896750

この記事へのトラックバック一覧です: テーブルの列をソートできるようにする:

» Ajax - TableKit - テーブルで任意の列をソート [ウェブサイトの技術っておもしろいよね]
ウェブサイト上でデータを一覧表示する場合は、よくテーブルを使います。 商品の基本情報や価格情報等を綺麗に見せる事ができるテーブル構成は、xhtml+cssの方向へ進んでいる今でも普通に使われています。 商品情報一覧を見る際にあると便利なのは価格順に並べ替えたりす..... [続きを読む]

受信: 2008.05.29 13:41

« マウスオーバーした行をハイライト表示するテーブル | トップページ | Movable Type の再構築時にエラーになる… »