個人メモ。
環境
- Laravel 10.4.1
- PHP 8.2.4
やること
一覧画面の一覧の各データにチェックボックスが付いている状態で、複数のチェックボックスにチェックを付け、「まとめて削除」リンクをクリックすることで、jQueryで非同期（Ajax）で、テーブルデータをまとめて削除する。
設定内容
- viewファイルの中身、jQuery部分。
viewファイルのコード（簡略化したもの）。同じチェックボックスのname値（chk_todo）で、foreachで回して、valueが違うソースを作る。この$item->idはテーブルの主キーです。
viewファイル
@foreach ($items as $item)
<input type="checkbox" name="chk_todo" value="{{ $item->id }}"> {{ $item->title }}
@endforeach
- 出来上がったページのブラウザソースを簡略化したものが下記。
nameが同じ"chk_todo"でvalueが違うチェックボックスができあがる。このvalue値はテーブルの主キーです。
ブラウザソース
<input type="checkbox" name="chk_todo" value="10"> todoメモその1
<input type="checkbox" name="chk_todo" value="11"> todoメモその2
<input type="checkbox" name="chk_todo" value="12"> todoメモその3
<input type="checkbox" name="chk_todo" value="13"> todoメモその4
<input type="checkbox" name="chk_todo" value="14"> todoメモその5
- viewファイルの「まとめて削除」リンク。この
id="chkdel"のクリックでjQueryを呼び出す。
viewファイル
<a id="chkdel" href="javascript:void(0);" class="black">まとめて削除</a>
- viewファイルのjQuery部分。
chkdelのクリックイベントで動作。
チェックが付いたチェックボックス要素を$('input[name=chk_todo]:checked')で取得し、これを、mapメソッドを使って value属性値の配列として変換して、変数（配列）valsに取得。
if(vals.length == 0) {でチェックが0かどうかを判定し、0なら処理終了。
その後は
var deleteConfirm = confirm('チェックをまとめて削除してよろしいですか？');で確認メッセージを出し、OKならjQuery通信に配列valsを送る。
ajaxの送信設定は
type: "POST",
url: "/todo/del_multi",
dataType: "text",
data: {
id: vals,
},
とする。
viewファイルのjQuery部分
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function() {
$("#chkdel").click(function() {
/// チェックされたvalue値を配列として取得
var vals = $('input[name=chk_todo]:checked').map(function(){
return $(this).val();
}).get();
console.log(vals);
console.log(vals.length)
if(vals.length == 0) {
alert('チェックされていません');
return false; //処理中断
}
var deleteConfirm = confirm('チェックをまとめて削除してよろしいですか？');
if(deleteConfirm == true) {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),},
});
$.ajax({
//POST通信
type: "POST",
//ここでデータの送信先URLを指定します。
url: "/todo/del_multi",
dataType: "text",
data: {
id: vals,
},
})
// 成功
.done(function (results){
// alert('成功');
// 通信成功時の処理
console.log("results : " + results);
window.location.href = "/todo"; //削除後に画面を遷移
})
// 失敗
.fail(function(jqXHR, textStatus, errorThrown){
alert('失敗');
console.log("ajax通信に失敗しました");
console.log("jqXHR : " + jqXHR.status); // HTTPステータスが取得
console.log("textStatus : " + textStatus); // タイムアウト、パースエラー
console.log("errorThrown : " + errorThrown.message); // 例外情報
console.log("URL : " + url);
});
}
});
});
</script>
- routeの設定
'/todo/del_multi'がjQueryでPOSTで呼び出された場合、TodoControllerのremove_multi関数を呼び出すようにする。
web.php
Route::post('todo/del_multi', 'App\Http\Controllers\TodoController@remove_multi');
- TodoControllerのremove_multi関数
呼び出されるTodoControllerのremove_multi関数。
$request->id(配列)で渡された複数の主キーの、todoテーブルの複数レコードを削除する。
TodoController.php
use Illuminate\Http\Request;
use App\Models\Todo;
class TodoController extends Controller
{
public function remove_multi(Request $request){
// eloquentによる複数削除
Todo::destroy($request->id); //複数データ削除（IDは配列で複数）
} //end funtion
}
Eloquentのdestroyメソッドは、主キーの配列を削除することができます。
destroyメソッドは、単一の主キーを受け入れることに加えて、複数の主キー、主キーの配列、または主キーのコレクションを引数に取ります。
Flight::destroy(1);
Flight::destroy(1, 2, 3);
Flight::destroy([1, 2, 3]);
Flight::destroy(collect([1, 2, 3]));
Laravel 10.x Eloquentの準備 - 主キーによる既存のモデルの削除
これで、複数のチェックボックスに対して、複数チェック時に一括削除の動作確認ができました。
関連
Laravel、jQueryで非同期（Ajax）でレコードを削除する