Node.js , JQuery | 테이블 만들기 | 데이터 수정

수정하고자 하는 데이터 옆에 수정 버튼을 누르면 아래에 수정하고자 하는 내용이 생기고, 수정 버튼을 누르면

ajax로 백엔드에 필요한 데이터를 송신한다.

 

1. 전 글에서 만들어준 carlist_condition에서 수정버튼이 생성되는데, 이때 onclick으로 이어진 car_editone을 실행해준다.

 

carlist_condition

insertTr += "<a href='javascript:;' id = 'carid' onclick='car_editone(this);' data-type='show' name='"+ Object.array[i]._id +"' data-carnum='"+ Object.array[i].CN +"' class='btn btn-sm btn-primary width-60 m-r-2 edit-btn'>"+i18nconvert("modify")+"</a>";

 

 

car_editone

	// 차량 - 수정 나타내기
	function car_editone(obj) {
		var type = $(obj).data().type;
		var exCN = $(obj).data().carnum;
		console.log(exCN);
		$('.tr-edit').empty();
		$(obj).parents('tr').siblings().find('.edit-btn').text(i18nconvert("modify"));
		$(obj).parents('tr').siblings().find('.edit-btn').removeData().type;
		$(obj).parents('tr').siblings().find('.edit-btn').data('type', 'show');
		if(type == "show") {
			var car_id = $(obj).attr('name');
			if (car_id) {
				$.ajax({
					type: 'POST',
					url: '/car/ajax/car_list_edit1',
					dataType: 'json',
					data: {
						car_id: car_id
					}
				}).done(function(data) {
					if(data.result == 'success') {
						var carone = data.carone[0];
						var insertTr  = "";
						$(obj).text(i18nconvert("modify"));
						$(obj).removeData().type;
						$(obj).data('type', 'hide');
						insertTr += "<tr class='tr-edit'>";
						insertTr += "<td colspan='8'>";
					    insertTr += "<div class='panel-body'>";
						insertTr +=	"<form id='car-edit-form' action='' method='post' data-parsley-validate='true'>";
						insertTr +=	"<div class='form-group row m-b-15'>";
						insertTr +=	"<label class='col-md-4 col-sm-4 col-form-label' for='CN'>"+i18nconvert("CN")+" <span class='text-danger'>*</span> :</label>";
						insertTr +=	"<div class='col-md-8 col-sm-8'>";
						insertTr +=	"<input class='form-control' id='CN' type='text' name = 'CN' value='"+exCN+"'  placeholder='"+i18nconvert("CN")+"' data-parsley-required='true' />";
						insertTr += "<input type='hidden' name='exCN' value='"+exCN+"' />"
						insertTr +=	"</div>";
						insertTr +=	"</div>";
						insertTr +=	"<div class='form-group row m-b-15'>";
						insertTr +=	"<label class='col-md-4 col-sm-4 col-form-label' for='CN'>"+i18nconvert("CPN")+" :</label>";
						insertTr +=	"<div class='col-md-8 col-sm-8'>";
						insertTr +=	"<input class='form-control' id='CPN' type='text' name = 'CPN'  placeholder='"+i18nconvert("CPN")+"' />";
						insertTr +=	"<input class='form-control' id='car_id' type='hidden' name = 'car_id' value='"+carone._id+"'/>";
						insertTr +=	"</div>";
						insertTr +=	"</div>";
						insertTr +=	"<div class='d-flex justify-content-center align-items-center'>";
						insertTr +=	"<a href='javascript:;' onclick='carEdit(pagingObject);' class='btn btn-primary width-80 mx-2'>"+i18nconvert("modify")+"</a>";
						insertTr +=	"<button type='reset' class='btn btn-primary width-80 mx-2'>"+i18nconvert("reset")+"</button>";
						insertTr +=	"</div>";
						insertTr +=	"</form>";
						insertTr +=	"</div>";
						insertTr += "</td></tr>";
						$(obj).parents('tr').after(insertTr);
					}
					else {
						alert("{{__('modify_failed')}}");
					}
				});
			}
			else {
				alert("{{__('modify_failed')}}");
			}
		}
		else {
			$(obj).text(i18nconvert("modify"));
			$(obj).removeData().type;
			$(obj).data('type', 'show');
			$('.tr-edit').remove();
		}
	}
	
	// 차량 - 데이터 수정
	function carEdit(Object) {
		$.ajax({
			type: 'POST',
			url: '/car/ajax/car_list_edit2',
			dataType: 'json',
			data: {
				exCN : $('input[name=exCN]').val(),
				CN : $('#car-edit-form [name="CN"]').val(),
				CPN : $('#car-edit-form [name="CPN"]').val(),
				CNU : Object.CNU,
				car_id : $('#car-edit-form [name="car_id"]').val()
			}
		}).done(function(data) {
			if(data.result == 'success') {
				$('.tr-edit').remove();
				pagereload(Object);
				alert(i18nconvert("car_modify_success"));
			}
			else if(data.result == 'length') {
				alert(i18nconvert("car_length_error"));
			}
			else if(data.result == 'type') {
				alert(i18nconvert("car_type_error"));
			}
			else if(data.result == 'exist') {
				alert(i18nconvert("car_exist_error"));
			}
			else if(data.result == 'numErr') {
				alert(i18nconvert("register_digits_error"));
			}
			else {
				alert(i18nconvert("modify_failed"));
			}
		});
		
	}

 

 

2. 백엔드에서 받아온 데이터로 DB쿼리문을 실행한다.

// 수정 - 브라우저 나타내기
router.post('/ajax/car_list_edit1', isNotLoggedIn, async(req, res, next) => {
  const { car_id } = req.body;
  
  var ObjectId = Mongoose.Types.ObjectId;
  const carone = await modelQuery(QUERY.Find,COLLECTION_NAME.Car,{ _id : ObjectId(car_id) },{});
  
  res.send({ result : "success", carone : carone });
});

// 수정 - 데이터 수정
router.post('/ajax/car_list_edit2', isNotLoggedIn, async(req, res, next) => {
  const { exCN, CN, CPN, CNU, car_id } = req.body;
  
  const exCar = await modelQuery(QUERY.Findone,COLLECTION_NAME.Car,{ "CNU" : CNU, "CN" :  CN },{});
  const check = /^[0-9]{2,3}[가-힣]{1}[0-9]{4}/gi;
  const numCheck = /^[0-9]*$/;
  const CUA = moment().format('YYYY-MM-DD hh:mm:ss');
  try{
    if (CN.length >= 7 && CN.length <= 8) {
      check.lastIndex = 0;
      if (check.test(CN) == true) {
        
        if(!exCar) {
          if(numCheck.test(CPN) == true) {
              await modelQuery(QUERY.Update,COLLECTION_NAME.Car, {where : { "_id" : car_id } , update : {
                "CNU" : CNU,
                "CN" : CN,
                "CPN" : CPN,
              }},{});
              await modelQuery(QUERY.Update,COLLECTION_NAME.Company,{where : { "CNU" : CNU }, update : {"CUA" : CUA}},{});
              
            return res.send({ result : "success" });
          }
          else {
            return res.send({ result : "numErr" });
          }
        }
        else {
          if(exCN == CN) {
            await modelQuery(QUERY.Update,COLLECTION_NAME.Car, {where : { "_id" : car_id } , update : {
              "CNU" : CNU,
              "CN" : CN,
              "CPN" : CPN,
            }},{});
            await modelQuery(QUERY.Update,COLLECTION_NAME.Company,{where : { "CNU" : CNU }, update : {"CUA" : CUA}},{});
            
            return res.send({ result : "success" });
          }
          else {
            return res.send({ result : 'exist' });
          }
        }
      }
      else {
        return res.send({ result : 'type' });
      }
    }
    else {
      return res.send({ result : 'length' });
    }
  }catch(err) {
    res.send({ result : "fail" });
    console.error(err);
    next(err);
  }
});