2013年7月7日日曜日

twitter bootstrapのbtn-groupで定義されたチェックボックスの値をSymfony2で扱う

覚え書き。

twitter bootstrapではチェックボックス、ラジオボタンのような選択型で
普通のinputタグの書き方ではなくて btn-groupというクラスのdivの中に
選択肢の要素を書くようなコードになる。


<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="hoge btn">選択肢1</button>
<button type="button" class="hoge btn">選択肢2</button>
<button type="button" class="hoge btn">選択肢3</button>
:
:
</div>


これでそのままフォームをsubmitしても何もとれないので、
submitのタイミングなどでjavaScriptでactive(btn-groupの子要素内で押下したボタンのclassにはactiveがつく)を拾って値を整形しなおすようにしている。

var selected =  $('.btn-group button.btn.active').val();

これでradioなら1つスカラー値が、checkboxならカンマ区切りで選択した値がまとめてとれる感じだったと思います。

で、このselectedの値を別に用意したinput hiddenタグなどに入れなおして、submitと。

ここまではstackoverflowに書いてあった。


それでそのhiddenで渡す値をSymfony2でどうするか、なのですが、


[1. submit側]

formTypeで定義した名前を使ってパラメタにしないとバインド時に値を取得してくれないので、

<input type=hidden name="{フォームタイプ名}[hoge]" >

formTypeの中のbuildFormでhogeがaddで指定されていて、フォームタイプ名はgetName()の戻り値として指定してある感じで。

のように、ちょっと手作業的な書き方をしてるのですが、どうなんだか。


[2.出力側]
ちなみにフォーム値から書き出すときは本当はフォーム出力のテンプレート側で定義すべきなんでしょうけど、出力ページによってフォーマットが微妙に異なったりするので、出力側のtwigには


<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="hoge btn{%if (hogeval == 1)%} active{%endif%}">選択肢1</button>
<button type="button" class="hoge btn{%if (hogeval == 2)%} active{%endif%}">選択肢2</button>
<button type="button" class="hoge btn{%if (hogeval ==31)%} active{%endif%}">選択肢3</button>
:
:
</div>

hogevalはコントローラ側から渡している値…
もうちょっとエレガントに書きたいですが、実際結構こうなってしまったりする…


- by Mizuk

0 コメント:

コメントを投稿