usuilog-プログラミングメモ: [JavaScript][Ext]ソート可能なテーブルを実装する

普通のテーブルタグに対して、ヘッダ部分はtheadタグとthタグで作るだけでいい。データ部分は全体をtbodyタグで囲んで、tdタグで記述するだけだ。

Extを使っても同様の方法でソート可能なテーブルを実装できます。
以下のサンプルからExt.grid.TableGridクラスをもらってきて使うだけです。

From Markup Grid Example

Script

var grid = new Ext.grid.TableGrid('the-table');
grid.render();

ロード時にページ内のテーブル全てに適用したければ下記のような感じでＯＫです。

Ext.onReady(function() {
    Ext.select('table').each(function (e) {
        var grid = new Ext.grid.TableGrid(e);
        grid.render();
    } )
});

このGridはかなり高機能で、列クリックによるソートだけではなく、ドラッグによる列の入れ替えや、
ポップアップメニューでの表示列の切り替え、列の固定なども行えます。
インクルードファイルの数やリソースの数など設置は若干大変ですが、それさえ乗り越えればかなり手軽でよいと思います。

参考

usuilog-プログラミングメモ