jquery ui sortable で並び順を取得する(serialize)

Pocket
LINEで送る

参考:http://api.jqueryui.com/sortable/#method-serialize

ここで、item_1、item_2といった感じで連番ふるよといいましたが、どちらかというと並び替えの場合、並び替え対象でDBのIDで管理しないといけないと思いますので、item_idという感じにした方がよかったです。

cakePHPだと、下記のような感じにするといいのではないでしょうか。

item_<?php echo h($item['Item']['id'])?>

$(this).sortable(‘serialize’);で下記のようなデータが得られます。

item[]=2&item[]=1

2と1がIDであれば、これをそのままAjaxでsortアクションなんかに渡します。
以下は例です。

function save_sort(sort_data){
	$.ajax({
		type:'post',
		url: '<?php echo $this->Html->url(array( 'controller' => 'hogehoge', 'action' => 'sort'))?>',
		data: sort_data,
		dataType: 'html',
		async: true,
		success: function(data){
			alert('sort ok!');
		}
	});
}

$(function(){
	$('#sortable').sortable({
		cursor: 'move',
		opacity: 0.7,
		placeholder: "placeholder",
		forcePlaceholderSize: true,
		cancel:false,
		handle:'.move_btn',
		update: function(event, ui){
			save_sort($(this).sortable('serialize'));
		}
	});
});

これでhogehogeコントローラーのsortアクションにアクセスしてくれて、$this->request->dataの中にソートデータが下記のように入っております。Formのシリアライズと一緒です。便利です。

スクリーンショット 2014-06-25 0.49.26

Pocket
LINEで送る

jquery ui sortable で並び順を取得する(serialize)” への1件のフィードバック

  1. いつも拝見させていただいております。
    わかりやすく知見を公開してくださってありがとうございます。

    この通りにやってみたのですが、どうもうまくいきません。cakephpで実行したいのですが、サンプルファイルか何かを挙げていただけないでしょうか。お時間がありましたら、どうかよろしくお願い致します。よろしくお願いします。

コメントください