🔥 TIL - Day 41

📌 複数のチェックボックスを選択して削除

AWS Lambdaでは、掲示板実装中に覚えておきたい機能があるので、メモしておきます.
投稿、商品リストなどのリスト項目がある場合、一度に複数の項目を選択して削除する機能.1つずつ選択するのではなく、チェックボックスで複数のイベントを一度に選択するのが有効です.
下図のように、掲示板には複数の文章があり、タイトルの横にチェックボックスが置かれています.
削除するチェックボックスを押して削除ボタンを押すと、選択した投稿を削除する必要があります.

📌 クライアント処理

この機能を実現するには、削除ボタンを押したときに選択したチェックボックスの値を取得する必要があります.
このセクションはjqueryを使用して実装されます.
まず、チェックボックスは次のようになります.

<td>
   <input class="form-check-input" type="checkbox" name="idxs" value="${data['idx']}">
</td>

選択したチェックボックスの値を取得
すなわち、nameがidxsであるinputフラグに対してcheckedの対象を導入する.
インポートされたチェックボックスオブジェクトは、valueとしてidx値を持つため、listを構成します.

var check_list = []
$.each($("input[name='idxs']:checked"), function() {
  check_list.push($(this).val())
})

チェックした値をサーバに送信する必要があります.
最初のアイデアはcheck_listの中で1つ1つ削除するべきですか?と思ったのですが、すぐに諦めてしまいました.非効率すぎる...
リスト全体をサーバに送信しましょう.

$.ajax({
  url: `${url}?type=deleteAll&idxs=${check_list}`,
  method: "DELETE",
  success: function (res) {
    getList()
  },
})

このようにサーバに送信すると、check_listの値が1,2,3であれば、次のような要求uriが生成される.localhost:5000/api?type=deleteAll&idxs=1,2,3サーバがQuery Stringとして受信した値はStringです.idxsの値で文字列1,2,3を超えます.

📌サーバ側処理

SQL inクエリを使用してサーバ側削除処理を実現します.

[ idxs = '1,2,3' ]
delete from table where idx in (idxs);

上記のクエリを実行すると、idxが1または2または3の行が削除されます.
クエリー文字列の特徴をよく使用した部分です.
Pythonコードで使用する場合、in節は以下のようになります.

conn = db_ops()
cursor = conn.cursor()
result = cursor.execute("delete from bbs where idx in("+idxs+")")
conn.commit()            

📌 結果