すでに入力されたデータをDBから取り出し、フロントにリストで表示させるまでは良しとして、自分の好きなCSSフレームワーク「UIKit」で構築したリストをSortableで順番入れ替えたときのことでした。
上下にぐりぐり動かして順番入れ替えたのは良かったものの、それらを登録し、再度DBから取り出してみると順番は前のまま。
そらそうか、順番が入れ替わっても順位を示すデータも変化させなきゃダメですよね。
そこで、今後のためにデータの順を決めるためにkeyの部分に値をいれるjsのソースを記録します。
利用した関数は「substr()」と「indexOf()」でした。
まずは以下のようなulで作ったリストを作るとします。
<ul>
<li><input type="text" name="sample[1][first_name]" value="a"><input type="text" name="sample[1][last_name]" value="b"></li>
<li><input type="text" name="sample[2][first_name]" value="c"><input type="text" name="sample[2][last_name]" value="d"></li>
<li><input type="text" name="sample[3][first_name]" value="e"><input type="text" name="sample[3][last_name]" value="f"></li>
<li><input type="text" name="sample[4][first_name]" value="g"><input type="text" name="sample[4][last_name]" value="h"></li>
</ul>
これを送信し受け取る側にはデータは以下のような配列データとなっていると思います。例はPHP。
var_dump($_POST)
sample[
"1" => [
"first_name" => "a",
"last_name" => "b",
],
"2" => [
"first_name" => "c",
"last_name" => "d",
],
"3" => [
"first_name" => "e",
"last_name" => "f",
],
"4" => [
"first_name" => "g",
"last_name" => "h",
],
]
そして、例えばSortableでグリっと2番目と3番目を入れ替え操作したとすると、希望としては入れ替わった順でPOSTしたいですが、nameのkeyが変わってないために、データはもとのままで保存されます。
そのため、nameのキー部分に順の値を入れ替えるソースを組みたいと思います。
一応UIKitで用意されているJSの機能も利用する形で記録。
// Sortableを組み込んだタグ内で移動のイベントがあった場合
UIkit.util.on('ul', 'moved', function (e) {
// liごと繰り返す
$('ul li').each(function(index, element) {
// li内のinputごと繰り返す
$("*[name*='sample']", element).each(function(rank, form) {
// formのname文字列を取得
var name_str = $(form).attr("name");
// "]["の文字がある場所を数値で取得し、指定した位置以降の文字を取得
var back_str = name_str.substr(name_str.indexOf(']['));
// 決まった文字列と順位と残りの文字を連結
var replace_name = "entry_player["+rank+back_str;
// formのnameに再設定
$(form).attr("name", replace_name);
})
});
});
これで順位となるkeyの値を入れ替えたnameを設定してPOSTすると、配列が入れ替わった状態で届くと思います。