checkbox 선택 참고
vue.js N sprintboot로 작업하기 중에
- 리스트에서 체크박스로 다중 선택해서 삭제하기
1.****\pages\List.vue : 화면
....
<input type="checkbox" :value="eachdata.key" :id="eachdata.key" v-model="checkedRows" @change="getCheckedItem(eachdata.key)">
....
export default Vue.extend({
.... 선언
data(){
return {
contentObject: {} as Content
, checkedRows: [] as string[]
, nodata: false
}
},
....
methods:{
....
async delBasBid(){
console.log(this.checkedRows)
if (sessionStorage.getItem('login')) {
try{
await this.$axios.post('/***/del', { key: this.checkedRows }); // 선언된 변수에 추가
location.reload();
} catch(error) {
console.error('delBasBid:', error);
}
}else{
alert('로그인이 필요합니다.')
this.$router.push('/auth/login')
}
},
getCheckedItem(pro_cd){
console.log(pro_cd)
console.log(this.checkedRows);
},
....
}
2.***/***Controller.java
@PostMapping("/del")
public ReturnCode delBasBid(@RequestBody Map<String, Object> checkedRows) {
Integer code = 0;
String msg = "";
List<String> key_list = (List<String>)checkedRows.get("key");
System.out.println( key_list .toString());
try {
for (String key : key_list ) {
if(key.length() > 0 ) {
code = ***Service.delete(key);
}
}
msg = "삭제되었습니다.";
}
catch(Exception ex) {
code = null;
msg = ex.getMessage();
ex.printStackTrace();
}
return (code);
}
3.***Service.java
// deleteBasInf
public Integer deleteBasInf(String pro_cd) {
return bidCal.deleteBasInf(pro_cd);
}
//deleteBidPriPre
public Integer deleteBidPriPre(String pro_cd) {
return bidCal.deleteBasInf(pro_cd);
}
4.mybatis설정.java
Integer delete(String key);
5.mapper/***.xml
<select id="delete" parameterType="***" resultType="Integer">
DELETE FROM tbl WHERE key= #{key};
</select>
======================================================
자바스크립트보다 수월하게 작업한 듯 해서 정리했다.