ブログTOP > Javascript > jQuery UI でテーブルタグをsortableに

2010年07月05日

jQuery UI でテーブルタグをsortableに

jQuery UI Sortableを使えば、直感的にマウスでドラッグアンドドロップしてアイテム(行)を入れ替えられるようなWebページが作成できます。

念のため説明しておくと、
jQuery UI Sortableは、jQuery UIのなかのひとつのフィーチャーです。
jQuery UIは、jQueryのプラグイン(ライブラリの一つ)です。

jQuery UI Sortableを使用するには、jQueryとjQuery UIを読み込むか、
以下のようにjquery.ui.sortable.jsが依存している「core」「widget」「mouse」だけを読み込めば軽くなります。
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>

さて、このjQuery UI Sortableは、オフィシャルサイトや解説サイトに公開されているサンプルでは<ul>タグにidをつけることで、中の<li>を入れ替えられる様になるよ、という具合に説明しています。

<script type="text/javascript">
$(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});
</script>

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

これを、そのまま<table>タグで使おうとすると、なぜか思った様に動かない。
idを指定したtableそのものがぐいっと動いてしまいます。
<table>タグではダメなのかなーと思っていたら・・・海外にこんな記事がありました。
http://setiabud.blogspot.com/2009/06/jquery-ui-sortable-with-table.html


この記事によると、<tbody>タグをいれてやるだけで正常に動作するらしい。
どれどれ。


<script type="text/javascript">
$(function() {
    $("#sortable tbody").sortable();
    $("#sortable tbody").disableSelection();
});
</script>

<table id="sortable">
    <tbody>
        <tr><td>Item 1</td></tr>
        <tr><td>Item 2</td></tr>
        <tr><td>Item 3</td></tr>
        <tr><td>Item 4</td></tr>
        <tr><td>Item 5</td></tr>
    </tbody>
</table>

たしかにうまく動く!
<tbody>にid指定/class指定はなくても大丈夫です。<tr>の なかの<td>の数もいくつでも問題ないようです。


さらに次のようにすると、テーブルの特定の列の値だけを、並べ替えた順番通りに取得することが可能です。

<script type="text/javascript">
    var option={
        stop : function(){
            var data=[];
            $("tr td.key","#sortable tbody").each(function(i,v){
                data.push(v.innerHTML);
            });
            $('#viewSortlist').html(data.toString()).css("background-color","#eee");
        }
    };
    $(function() {
        $("#sortable tbody").sortable(option);
        $("#sortable tbody").disableSelection();
    });
</script>

<table id="sortable">
     <tr><th>0</th><th>000</th></tr>
     <tbody>
        <tr><td class="key">1</td><td>AAA</td></tr>
        <tr><td class="key">2</td><td>BBB</td></tr>
        <tr><td class="key">3</td><td>CCC</td></tr>
        <tr><td class="key">4</td><td>DDD</td></tr>
    </tbody>
</table>

<div id="viewSortlist">ここへ並べ替えた順番を出力します</div>
(参考)http://allabout.co.jp/internet/javascript/closeup/CU20080130A/index2.htm

こうすると、<th>の行は、マウスでドラッグは出来るものの、自由にドロップして場所を変えることは抑止出来ます。

便利ですね!
このエントリーをはてなブックマークに追加
posted by taichistereo at 11:12 | Comment(2) | Javascript
はじめまして。
リストタグの解説が多い中、tr要素のsortableは大変参考になります。
一つ、質問です。overflow:scrollを設定したDiv要素内で、同様にsortableを行うとドラッグが表示範囲外になったときにDivのスクロールが行われません。
解決方法をご存知であれば、教えていただけないでしょうか?
Posted by D.N. at 2010年08月26日 17:18
1年前の記事へのコメントで恐縮ですが。。。
大変参考になりました。
thタグやドラッグしてほしい領域を限定したいと思い検証したところ、
idをtableタグではなくtbodyに振ったところ、tbodyで挟んだところのみドラッグできるようになりました。
Posted by kou at 2011年07月06日 08:18
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
カテゴリクラウド
トップページへ戻る
Blog Widget by LinkWithin