Sortable | serialize() を data[B][0][id]=1 の形式で出力する

[custar]

scriptaculous の Sortable で並べ替え後の出力を

data[B][0][id]=1&data[B][0][id]=2&...

のような形式で出力させる。

<?php echo $form->create('B', array('action' => 'reorder')); ?>
<ul id="sortable_1">
<?php foreach ($bs as $id => $content): ?>
<li id="item_<?php echo $id; ?>">

<?php echo $html->tag('span', $content); ?>

<input type="hidden"
id="id_<?php echo $id; ?>"
value="<?php echo $id; ?>"
name="data[B][id]"
class="id" /> ............................... (1)

<?php //echo $form->hidden('id', array(
'value' => $id,
'id' => 'id_'. $id,
'class' => 'id' ................................. (2)
)); ?>
</li>
<?php endforeach; ?>
</ul>
<div id="query"></div>
<?php echo $form->end(); ?>

(2) のように class option を使いたいところだが、$form->hidde() では
class option は使えないので、(1) のように直接書く。

serialize() で抜き出される value は element.id の '_' 以後の数値なので、
element.id に B.id を指定する。

Sortable.create('sortable_1', {
onUpdate: function(list)
{
var backup = Object.clone(Sortable.options(list)); ..... (3)
{
var query = Sortable.serialize(list, {
tag : 'input', .................................... (4)
tree : true, ....................................... (5)
only : 'id', ....................................... (6)
name : 'data[B]' ................................... (7)
});

$('query').update(
decodeURIComponent(query).gsub('&', '&<br/>'));
}
Sortable.sortables[list.id] = backup;
}
});


(4) tag
抜き出したい element の tagName を指定。

(5) tree
子要素も抜き出しの対象とするので true。

(6) only
抜き出す input が複数ある場合に備えて className を指定。

(7) name
key に当たる文字列を指定。

(3) で options を退避させているのは、tag, tree をデフォルトと異ならせて
いる場合、serialize() 内部で Sortable 本体の options が上書きされてしま
うのを回避するため。


これで、以下のような結果が得られる。

* b1
* b4
* b3
* b2
* b5

data[B][0][id]=1&
data[B][1][id]=4&
data[B][2][id]=3&
data[B][3][id]=2&
data[B][4][id]=5

[custar]

element.id が value として使われるのならば、わざわざ tree:true とする必要はない。
抜き出す id を <li>.id に付加して使えばよい。