ClownWiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== sortable - 並び替えられるテーブル  ======


===== サンプルコード  =====
<code>
<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>
</code>

===== 並び替えられるテーブル  =====
jQuery - [[http://jqueryui.com/demos/sortable/|Sortable]] はオブジェクトの id を指定して sortable と書くだけで簡単にリストを並べ替えることができる。
しかし、テーブルはそれだけでは意図した動作をしない。
テーブルの行を並べ替えるには、tbody タグを入れる。

<code>
       $("#sortable tbody").sortable(option);
</code>

<code>
<table id="sortable">
    <tr><th>0</th><th>000</th></tr>
    <tbody>
       <tr><td class="key">1</td><td>AAA</td></tr>
</code>

===== タイトル行は動かしたくない  =====
tbody タグ内の要素を動かすように指定しているので、タイトル行を tbody の外に出せばいい

<code>
<table id="sortable">
    <tr><th>0</th><th>000</th></tr>
    <tbody>
</code>

===== 並び替えた結果を取得  =====
テーブルに id など一意の数字を振っておいて、並び替え後に結果を取得する

<code>
   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");
       }
   };
</code>

<code>
       $("#sortable tbody").sortable(option);
</code>

<code>
<div id="viewSortlist">ここへ並べ替えた順番を出力</div>
</code>