DoubleListTweetこんにちは。今日はsymfonyで簡単にDoubleListのフォームを実装する、sfWidgetFormSelectDoubleListを使ってみます。DoubleListとは、左右に表示されるセレクトボックス間で要素を移動させることで必要な要素だけを絞り込むための仕組みです。symfonyにこれをまるごと作成できるプラグインが用意されているため、これを使用して作成します。これを使えば下の画像のようなフォームを一瞬で作成してくれます。DoubleListを作成するには、sfFormExtraPluginを導入する必要があります。下記のURLからダウンロードし、プロジェクト直下のpluginsディレクトリに設置しておきます。}・・・これで下準備は完了です。次に、DoubleListを使用するためのFormを用意します。modelには表示したいテーブルのモデル名を記述してください。}}このFormをactionで呼び出し、テンプレートで描画します。</form></div>これで描画は出来るのですが、sfWidgetFormSelectDoubleListを使用するには専用のJavaScriptを読み込んでおく必要があります。sfWidgetクラスを継承しているwidgetには、getJavascripts()メソッドが実装されており、これを使用するとそれぞれのwidgetFormで必要なjavascriptを知ることができるようになっています。ヘルパーを使えば、formのgetJavascripts()で取得できるjsをすべて読み込んでくれるので、これを使ってしまいましょう。存在するファイルとなるはずなので、web以下にsfFormExtraPluginへのシンボリックリンクを貼るなどして対応してください。表示すると画像の状態になっているはずです。セレクトボックス内の要素を選択し中央の矢印をクリックすると、選択した要素を左右に移動させることができるようになっています。表示するだけであればこれだけで完成ですが、せっかくなので少しカスタマイズしてみます。基本的にはsfWidgetFormDoctrineChoiceに渡すオプションを変更することでほとんどが対応可能です。見あまり変わってませんが、最終的に次の画像のような状態を目指します。■候補リストに表示されるオブジェクトをクエリで選択する今のままではStaffが全員表示されてしまうので、表示したい人だけ表示するように変更します。具体的にはDoctrine_Queryを渡すことでクエリの結果のStaffだけを表示することができます。下記のように記述すれば、TestFormのコンストラクタで渡したユーザーを除外してリストを表示できます。),));■リストを左右入れ替える初期状態では左が選択済みリスト、右が候補リストになっていますがこれを逆にします。renderer_optionsの"associated_first"にfalseを渡すことで可能です。unassociateにタグを直接記入します。),));■リストをTableタグで描画するこのDoubleList、divタグとfloatを駆使してデザインされているため、IE6ではしっかりと崩れます。ーしてもIE6に対応したい!しなきゃいけないんだよちくしょう!という人は、tableタグで無理やり対応しちゃいましょう。オプションを使用して実装します。template指定すると無意味。),));%から%で囲まれた文字列が必要な要素に置き換えられます。何が何に置き換えられるかはsfWidgetFormSelectDoubleListのソースを読んでみましょう。■初期状態で選択されている要素を設定する編集画面等、すでに設定されている要素を選択済リストに入れて表示させたいことがあります。オプションで設定できてもいいような気もするのですが、やり方がわからなかったのでjsで作ってみました。長くなってきたので省略しつつ書いて行きます。セレクトボックスにclassを指定し、jsから指定できるようにしておきます。これで候補リストのセレクトボックスのclassが「staff-list」、選択済みリストのclassが「staff-list-selected」となります。}}次に、jqueryファイルと下記のjsファイルを読み込ませます。上記のようにgetJavaScripts()を実装することで勝手に読み込まれるファイルが増えるはずです。あとはshow_default.js.phpに初期表示のidリストを渡し、なんやかんやしてshow_default.js.phpのdefault_id_listを作成してください。$(".staff-list-selected").html(options);}これで/staff/get_default_json部分もちゃんと作られていれば、初期選択されている画面が作成できるはず。基本実装はとっても簡単なので、ぜひ機会があれば使ってみてください。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。