TopJavaScriptjQueryjQuery UI > 2013年4月
2013年4月16日

jQuery UI Soatableでソートしたテーブルの並びを保存する方法

April 16,2013 12:03 AM
Tag:[, , ]
Permalink

jQuery UI Soatableでソートしたテーブルの並びを保存する方法を紹介します。

jQuery UI

先日「jQuery UIを使ってテーブルをドラッグ&ドロップでソートできるようにする」をエントリーしましたが、実際には並び替えた順序を保持して使いたいケースも少なくないと思います。

ネットで検索するとjQuery UI Soatableの解説はヒットしますが、cookieに保存するまでの記事はみつかりませんでした。

ということで、ここではcookieを利用して並びを保存する方法を紹介します。

1.サンプル

まず、cookieで並び順を保存するテーブルのサンプルを示します。

サンプル
サンプル

テーブルを並び替えたあと、リロードすれば並び順が保持されていることが分かります。

2.解説

サンプルのコード(抜粋)は次のとおりです。赤色部分が「jQuery UIを使ってテーブルをドラッグ&ドロップでソートできるようにする」からの追加箇所になります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="jquery.cookie.js"></script>
<script>
$(function(){
    $('tbody').sortable({
        stop: function( event, ui ) {
            var id = $(this).parent().attr('id');
            var i = 0;
            var cookie = new Array;
            $('#' + id +' tbody tr').each(function(){
                var number = $(this).attr('id');
                cookie[i] = number + ":" + i;
                i++;
            });
            $.cookie(id, cookie.join(','));
        }
    });
    $('tbody').disableSelection();
    var table_name = 'foo';
    var index_cookie = $.cookie(table_name);
    if (index_cookie) {
        var index_hash = new Array();
        $('#' + table_name + ' tbody tr').each(function(){
            var html = $(this).html();
            var number = $(this).attr('id');
            index_hash[number] = html;
        });
        var list = index_cookie.split(',');
        var i = 0;
        $('#' + table_name + ' tbody tr').each(function(){
            var val = (list[i].split(':'))[0];
            $(this).html(index_hash[val]);
            $(this).attr('id', val);
            i++;
        });
    }
});
</script>
<table id="foo">
  <thead>
    <tr>
      <th>Name</th><th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr id="0"><td>Bloggs, Fred</td><td>$12000.00</td></tr>
    <tr id="1"><td>Turvey, Kevin</td><td>$191200.00</td></tr>
    <tr id="2"><td>Mbogo, Arnold</td><td>$32010.12</td></tr>
    <tr id="3"><td>Shakespeare, Bill</td><td>$122000.00</td></tr>
    <tr id="4"><td>Shakespeare, Hamnet</td><td>$9000</td></tr>
    <tr id="5"><td>Fitz, Marvin</td><td>$3300</td></tr>
  </tbody>
</table>

このサンプルではjQuery Cookieを使用します。詳細は「jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ」を参考にしてください。

またHTMLで追加したid属性値は、数字から開始するのはたしか禁止的ですが、記事を書く時間がないのと、処理を分かりやすくするためにこのようにしています。

サンプルプログラムですが、まず、stopイベントでcookieに保存する処理から解説します。

        stop: function( event, ui ) {
            var id = $(this).parent().attr('id');
            var i = 0;
            var cookie = new Array;
            $('#' + id +' tbody tr').each(function(){
                var number = $(this).attr('id');
                cookie[i] = number + ":" + i;
                i++;
            });
            $.cookie(id, cookie.join(','));
        }

stopイベントで、ソートが完了した要素の親要素、つまりtable要素のid属性を取得します(cookieのキーにします)。

            var id = $(this).parent().attr('id');

そして並び替えたあとの、tr要素のid属性値を配列に保存します。

            $('#' + id +' tbody tr').each(function(){
                var number = $(this).attr('id');
                cookie[i] = number + ":" + i;
                i++;
            });

保存した配列をカンマ区切りの文字列にしてcookieに保存します。

            $.cookie(id, cookie.join(','));

続いてcookieを読み出して並び替える処理です。これはページ読み込み時に実行される処理です。

    var table_name = 'foo';
    var index_cookie = $.cookie(table_name);
    if (index_cookie) {
        var index_hash = new Array();
        $('#' + table_name + ' tbody tr').each(function(){
            var html = $(this).html();
            var number = $(this).attr('id');
            index_hash[number] = html;
        });
        var list = index_cookie.split(',');
        var i = 0;
        $('#' + table_name + ' tbody tr').each(function(){
            var val = (list[i].split(':'))[0];
            $(this).html(index_hash[val]);
            $(this).attr('id', val);
            i++;
        });
    }

table要素のid属性値をcookieのキーにして、cookieを取得します。

    var table_name = 'foo';
    var index_cookie = $.cookie(table_name);

該当のcookieが存在すれば、現在のtr要素の中身(td要素)とtr要素のid属性値を取得し、tr要素のid属性値をキーにしてハッシュにtd要素を設定します。

    if (index_cookie) {
        var index_hash = new Array();
        $('#' + table_name + ' tbody tr').each(function(){
            var html = $(this).html();
            var number = $(this).attr('id');
            index_hash[number] = html;
        });

さきほど取得したcookieをカンマで分割し、配列listに保存します。

        var list = index_cookie.split(',');

もう一度現在のtr要素を探索し、今度はtr要素の内容に対し、配列listから取得した、並び替えられたtd要素を設定します。また、次の並び替えに対応できるよう、tr要素のid属性値も書き換えておきます。

        var i = 0;
        $('#' + table_name + ' tbody tr').each(function(){
            var val = (list[i].split(':'))[0];
            $(this).html(index_hash[val]);
            $(this).attr('id', val);
            i++;
        });

もっとエレガントな実装方法があると思いますので色々試してみてください。

また、テーブルの行が増減する場合はもうひと工夫必要になると思います。

2013.04.22
サンプルのリンク先が間違っていたので修正しました。

Comments [0] | Trackbacks [0]
2013年4月11日

jQuery UIを使ってテーブルをドラッグ&ドロップでソートできるようにする

April 11,2013 12:55 AM
Tag:[, ]
Permalink

jQuery UIを使ってテーブルをドラッグ&ドロップでソートできるようにする方法を紹介します。

jQuery UI

テーブルをソートするには、jQuery UI Soatableを利用します。

1.基本

まず、jQueryのsoatable()を使ったテーブルのサンプルを示します。

サンプル
サンプル

サンプルのコード(抜粋)は次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
    $('tbody').sortable();
});
</script>
<table>
  <thead>
    <tr>
      <th>Name</th><th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Bloggs, Fred</td><td>$12000.00</td></tr>
    <tr><td>Turvey, Kevin</td><td>$191200.00</td></tr>
    <tr><td>Mbogo, Arnold</td><td>$32010.12</td></tr>
    <tr><td>Shakespeare, Bill</td><td>$122000.00</td></tr>
    <tr><td>Shakespeare, Hamnet</td><td>$9000</td></tr>
    <tr><td>Fitz, Marvin</td><td>$3300</td></tr>
  </tbody>
</table>

jQueryおよびjQuery UIのライブラリを読み出し、あとはソートしたいテーブルの親要素または親要素のid属性やclass属性を指定して、sortable()を実行するだけです。

$(function(){
    $('tbody').sortable();
});

テーブル以外の要素もソートできます。ul/li要素はもちろん、divの組み合わせでもOKです。

2.ドラッグ&ドロップ中にテキストを選択できないようにする

ドラッグ&ドロップ中にテキストを選択できないようにするには、disableSelection()を追加します。

$(function(){
    $('tbody').sortable();
    $('tbody').disableSelection();
});

3.オプション

jQuery UI Soatableで用意されているオプションをいくつか紹介します。

cursor

ドラッグ&ドロップ中のカーソルのスタイルを指定します。

$(function(){
    $('tbody').sortable({
        cursor: "move"
    });
});

distance

ドラッグ&ドロップを開始するまでに移動距離を設定します。値が少ない方がドラッグ&ドロップが早く開始します。

$(function(){
    $('tbody').sortable({
        distance: 5
    });
});

grid

ドラッグ&ドロップをグリッドにあわせて移動します。x方向とy方向のグリッド幅を配列で設定します。

$(function(){
    $('tbody').sortable({
        grid: [ 20, 10 ]
    });
});

opacity

ドラッグの透過度を設定します。

$(function(){
    $('tbody').sortable({
        opacity: 0.5
    });
});

revert

ドロップしたときにアニメーションでスムーズな動きにします。

$(function(){
    $('tbody').sortable({
        revert: true
    });
});

4.イベント

jQuery UI Soatableで用意されているイベントを2つだけ紹介します。

start

ソートが開始したときに実行します。

$(function(){
    $('tbody').sortable({
        start: function( event, ui ) {
            // ...
        }
    });
});

stop

ソートが終了したときに実行します。ソート状態をcookieに保持するときなどに使えると思います。

$(function(){
    $('tbody').sortable({
        stop: function( event, ui ) {
            // ...
        }
    });
});

他にも色々あるので試してみてください。

5.CSS

サンプルではソートするときのポインタを次のように指定しています。

tr:hover {
    cursor: move;
}

オプションのcursor指定ではドラッグを開始したときにしかカーソルの表示が変わりませんが、このようにしておけばマウスでポイントしたときにソートできることが分かります。

Comments [0] | Trackbacks [0]
2013年4月 4日

jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法

April 4,2013 12:03 AM
Tag:[, , ]
Permalink

jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。

jQuery UI

ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()(またはslideUp()とslideDown())がよく知られていると思います。

が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたところ、jQuery UIのtoggle()で期待する動作になることが分かりました。

jQuery UIのtoggle()については、公式ドキュメントのAPIで公開されているのですが、本エントリーで紹介するような詳細な指定方法が書かれていないので、備忘録で本エントリーに残しておきます。

1.jQueryのslideToggle()でスライドさせる

まず、jQueryのslideToggle()と使ったスライドのサンプルを示します。

サンプル1
サンプル1

サンプルのHTMLは次のとおりです(CSSは割愛)。

<input type="button" id="test" value="..." />
<div id="box">...</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $('#test').click(function(){
        $('#box').slideToggle('slow');
    });
});
</script>

サンプルの動作でお分かりのとおり、slideToggle()を使った場合、コンテンツがボックスと同期して動かない点が不満です。

このような動作は、ボックスを折りたたんだときにコンテンツがそこに残っているような印象を受けます。例えるなら「幕を上げ下げしている」といったところでしょうか。

そうではなく、コンテンツを親ボックスごとスライドさせたいのですが、slideToggle()では実現できないようです。

2.jQuery UIのtoggle()でスライドさせる

ということで、jQuery UIのtoggle()でコンテンツごとスライドさせる方法を紹介します。

サンプル2
サンプル1

サンプルのHTMLは次のとおりです(CSSは割愛)。赤色部分が前のサンプルとの差分です。

<input type="button" id="test" value="..." />
<div id="box">...</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
    $('#test').click(function(){
        $('#box').toggle('slide', { direction: 'up' } );
    });
});
</script>

toggle()の設定方法は次のとおりです。

$('#box').toggle('slide', { direction: 'up' } );

オプションの第1パラメータにエフェクトを指定します、「slide」を指定することでslideToggle()と同じ動作になります。

エフェクトの種類については、公式APIの「Effects」に記載されている「XXX Effect」の「XXX」の部分を小文字で設定できます(どこかに一覧があったと思いますが失念)。

第2パラメータはハッシュ形式で「direction(折りたたみ方向)」を指定します。ここでは"up"を指定しているので上方向に折りたたまれます。他に"down"、"left"、 "right"を指定できます。

その他、slideエフェクトの第2パラメータには「distance(移動距離)」を指定することができます。

例えば、

$('#box').toggle('slide', { direction: 'up', distance: 200 } );

とすれば、上方向に200px動きます。数値に単位を指定するとエラーになるので気をつけましょう。

3.その他

jQuery UIのtoggle()は、jQueryのtoggle()を拡張したもので、前項以外のパラメータ(durationやcompleteなど)については同じようです。

例えば、次のようにdurationを設定すれば、1秒かけて動作するようになります。

$('#box').toggle('slide', { direction: 'up' }, 1000 );


また、jQuery UIが読み込まれなかった場合は、jQueryのtoggle()として動作します(ただし独自パラメータが指定されている場合は動作しない模様)。

4.参考サイト

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3