2013/10/01
【jQuery】nestedSortable jQuery Plugin
前から気になっていたですが、ついてにLaunchCartに実装を実現できました。
nestedSortableのjQueryプラグインです。
レイアウト
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ol class="sortable"> <li> <div>親カテゴリ</div> <ol> <li> <div>子カテゴリ</div> <ol> <li> <div>孫カテゴリ</div> </li> </ol> </li> </ol> </li> ... </ol> |
さすがネストであることで、親カテゴリ>子カテゴリ>孫カテゴリのような階層を作るのに、上記なものを作る必要あります。
プログラムを組むのは難しそうなので、辛抱強くtwig関数を作って対応しました。
serializeなどの関数を使うために
サンプルでは、
1 2 3 4 | $('#serialize').click(function(){ serialized = $('ol.sortable').nestedSortable('serialize'); $('#serializeOutput').text(serialized+'\n\n'); }) |
で書くと、
id = “serializeOutput” のブロックに、
1 | list[1]=null&list[2]=1&list[3]=2&list[4]=null&list[5]=null&list[6]=5&list[7]=5&list[8]=7&list[9]=null&list[10]=null |
のようなものが出てくるハズですが。。
実は、裏条件があります。
liタグのidを、”list_” + category.id にすることです!
どこにも書いていないから、原因を特定し、探し出すのに時間かかりました。
Doctrine2 NestedSetと連動するには
細かく書かないですが、編集した順番と階層をDBに入れる作業がります。
Doctrine2 NestedSetでは、順番に対応していない仕様なので、一回Doctrine2 NestedSetを使って階層だけを更新して、あとで手動で順番を更新するようにしました。
仕様を確認しスクリプトを書いてテストするのに、一苦労でしたが、とりあえず実用できるレベルに達したかと思います。
Author Profile
スターフィールド編集部
SHARE