nkjmkzk.net

powered by Kazuki Nakajima

Archive for 12月, 2012

ドラッグ・ドロップでソートした並び順を永続化する方法 (jQuery UI Sortable + Force.com)

Webサイトをデザインをしていると、しばしばコンポーネントの表示順を変更する機能がほしくなることがあります。そしてそういう操作はドラッグ・ドロップが直感的です。

現代ではjQuery UIのSortableを利用することで、ドラッグ・ドロップで表示順をグリグリ変更するインターフェースは夕食の献立を考えながらでも作成できてしまいます。

jQuery UI Sortableデモ

下記はそのサンプルコードのミニマム版。jQueryおよびjQuery UIのライブラリは読み込んでいる前提です。

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

<div id="container">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
</div>

ただし、表示順を変更するのが一過性の設定ではなく、永続化する必要があればもう少しがんばる必要があります。ただしこれもそう難しい話しではありません。

例えば前述の例で、box1〜3はデータベース内のboxテーブルに格納されたレコードだとします。このWebページにアクセスする度にそれらのレコードが取得され、画面に表示されるという仕組みであると仮定します。データベースはForce.comであるとしておきましょう。

まずboxテーブルに表示順を示すsort_orderなるフィールドを追加しておきます。

このフィールドに数値を保存し、それを元にソートをおこなう、というわけです。

jQuery UI Sortableでコンポーネントの並び替えをおこなった際に、全boxレコードのsort_orderフィールドを適切な数値で更新すれば並び順を永続化することができます。

$(“#container”).sortable()でハンドラーを登録する際に、下記のようにオプションを渡してあげます。

$("#container").sortable({
    update: function(event, ui){
        var box_ids = $(this).sortable('toArray');
        myClass.sort_box(
            box_ids,
            function(event,result){},
            {escape:true}
        );
    }
});

すると並び替えがおこなわれた際にオプションで設定した処理を実行することができます。この処理部分に上記のmyClass.sort_box()ようにJavascript Remoting等を用いてデータベースを更新してあげるのです。

$(this).sortable(‘toArray’)を実行すると、並び変えられたboxのid値が、並び替えた状態の順序で配列化され、box_idsに格納されます。それを引数としてJavascript RemotingでApexコードに渡します。

最初にHTMLを生成する際、このid値にForce.comでの各boxレコードIdをセットしておくと便利です。受け側のApexコードではこのレコードIdを使ってレコードを特定し、sort_orderフィールドに順に値をセットしていきます。

下記は受け側のApexコードのサンプルです。Javascript Remotingのメソッドを定義しています。

@remoteAction
public static void sort_box(list<id> box_ids){
    list<box__c> boxes = [select id, sort_order__c from box__c];
    integer sort_order = 1;
    for (id box_id : box_ids){
        for (box__c box : boxes){
            if(box.id == box_id){
                box.sort_order__c = sort_order;
            }
        }
        sort_order++;
    }
    update boxes;
}

box_idsで渡されたレコードIdをもとに、boxレコードをデータベースから取り出す。そして渡されたbox_idsの配列順通り、boxレコードのsort_orderフィールドに1から番号をインクリメントしながら割り振ってレコードを更新すれば並び順の永続化が完了します。

Enjoy Sorting :)

without comments

Written by 中嶋 一樹

12月 18th, 2012 at 3:38 pm

Posted in Uncategorized

Tagged with , ,