개발 기록용 블로그

//input value가 금액일때, 호출
function inputNumberFormat(obj) {
    obj.value = comma(uncomma(obj.value));
}
function comma(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
function uncomma(str) {
    str = String(str);
    return str.replace(/[^\d]+/g, '');
}

//print할 영역의 id값으로 해당 영역만 출력, 출력 후 새로고침 및 기존 영역으로 돌아간다.
function printFn(id) {
    //beforePrint, afterPrint 함수 에서의 변수를 초기화
    let div;
    let initBody;
    //goPrint 함수를 호출
    goPrint(id);

    function goPrint(id) {
        div = document.getElementById(id);

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;
        window.print();
    }

    function beforePrint() {
        initBody = document.body.innerHTML;
        document.body.innerHTML = div.innerHTML;
    }

    function afterPrint() {
        document.body.innerHTML = initBody;
        location.reload();
    }

//id값으로 동작하기때문에, 출력할 영역에 id값을 할당해준다.
                let id = document.getElementById("PAGE_BODY").id;
                printFn(id);

가격수정처리를 하려한다.

여러개의 input이 동일한 name을 가지는데, name의 값을 배열로 초기화하여 처리하는 프로세스이다

Js

$("#priceUpdateBtn").on("click", function () {
               
                let state = $("input[name='state']").val();
                let price = [];
            
                $("input[name='updatePrice']").each(function (i) {
                    price.push($(this).val().replaceAll(",",""));
                });
                

                $.ajax({
                    url     : "/priceUpdate",
                    type    : "post",
                    data    : {
                        state : state 
                        , price         : price
                    },
                    success : function (data) {
                        alert("수정되었습니다.");
                        location.reload();
                    }, error: function () {
                        alert("error");
                    }
                });
            });

HTML

<input type="hidden" th:value="${state}" name="state"/>
<tr>
    <td class="t_right" name="updatePriceInputTag">
        <input type="text" value="price" name="updatePrice"/>
    </td>
</tr>

Controller

@PostMapping({"/priceUpdate"})
@ResponseBody
public void priceUpdate(@RequestParam(value="state") String state,
                       @RequestParam(value="price[]") List<String> price) throws Exception{  
     priceService.priceUpdate(state, price);
}

Service

@Transactional
    public void priceUpdate(String state, List<String> price) throws Exception{
        //List로 받아온 price의 값을 담을 변수
        Integer priceItem = null;

        //key와 value로 담을 MAP 객체 초기화
        Map<String, Object> obj = new HashMap<String, Object>();
        
        //List로 받아온 price의 값을 반복
        for (int i = 0; i < price.size(); i++){

            /*System.out.print(state+",");
            System.out.println(price.get(i));
           */
            //price 하나의 값
            priceItem = Integer.parseInt(price.get(i));
            //초기화 한 obj에 담는다.
            obj.put("state", state);
            obj.put("priceItem", priceItem);
            //mapper로 보낸다. 
            //Mybatis에서는 #{obj에 담았던 key명} << 으로 파라미터를 전달
            //Mybatis ParameterType은 HashMap으로 선언한다.
            priceUpdateMapper.priceUpdate(obj);
        }
    }
}

 /*<![CDATA[*/
            let searchYear = /*[[ ${searchParam.searchYear} ]]*/ "";
            let searchMonth = /*[[ ${searchParam.searchMonth} ]]*/ "";
            let now = new Date();
            let nyear = now.getFullYear();
            let nmon = (now.getMonth()+1) > 9 ? ''+(now.getMonth()+1) : '0'+(now.getmonth()+1);

//기존코드
for(let sy = 2016 ; sy <= nyear ; sy++) {
                $('#fd_year').append('<option value="' + sy + '" ' +sy == searchYear ? "selected" : "" +' >' + sy + '년</option>');
            }
//괄호처리한 코드
for(let sy = 2016 ; sy <= nyear ; sy++) {
                $('#fd_year').append('<option value="' + sy + '" ' +( (sy == searchYear) ? "selected" : "")+' >' + sy + '년</option>');
            }

 /*]]*/

* 코드부분을 보면 HTML코드에서 사용하는 삼항연산자인데 처리가 안되었다

알고보니 append로 추가하는 HTML코드에서는 괄호처리를 해야한다고한다

괄호처리한 코드로 다시 리로드하니 검색후에도 selected가 유지된다

/*<![CDATA[*/

 let searchYear = /*[[ ${searchParam.searchYear} ]]*/ "";

/*]]*/

*​ 추가로 thymeleaf를 js안에서 사용할때는

thymeleaf코드를 사용할 수 있게 CDATA 선언부를 만들고 그안에서 코드처리를 해야한다

controller에서 model로 던진 데이터 값은 변수로 선언해 아래 처럼 가져오면되고

데이터값이 없을때를 대비해 코드뒤에 ""를 붙여처리한다

input을 나누어 받아 전화번호 유효성검사를 처리

//실제 코드는 아래와 같진않다. 간단하게 이해를 돕기위해 타이핑한것.
//오타가 있을수있으니 복붙한 후 확인하고 처리해야함.
//concat()함수는 문자를 연결해준다.  
<script>
$(function(){
   //전송버튼클릭이벤트
   $(".submit").on("click", function(){
      let phone = $("input[name='tel1']").val().concat('-', $("input[name='tel2']").val()).concat('-', $("input[name='tel3']").val());
      let email = $("input[name='tel1']").val();
      if(checkEmail(email)==false){
        alert("이메일을 다시 입력해주세요.")
        return false;
      }else{
         $.ajax({
           url : "/controllermappingurl",
           type: "post",
           data: {phone:phone, email:email}
           success: function(data){
              alert("성공");
           }, error: function(){
              alert("실패");
           }
         });
      }
    });
   
});
//입력받은 value를 0 ~ 9 값이 아니면 return false;
//연락처유효성검사
//input태그에 keydown이벤트가 발생하면 실행되는 function이다. key코드를 이용하여 처리했다.
//keycode : 키보드에 키를 개별로 코드를 준것. js내에 약속된 코드이다.
//input에 아래 지정된 키보드 키를 제외하고 입력하면 alert창을 띄우고 value를 없애주었다.
//공통 js파일 안에 function을 넣어 필요한 페이지마다 호출하는게 코드재사용성에좋을듯.
function checkNumber(event) {
    if(event.key >= 0 && event.key <= 9
        || event.keyCode == 8 //backspace
        || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 39//방향키 →, ←
        || event.keyCode == 46 //delete키
        || event.keyCode == 16 || event.keyCode == 17 || event.keyCode == 9) {
        return true;
    }else {
        alert("숫자만 입력하세요");
        $(this).value = "";
        return false;
    }
}
function checkEmail(email){
    let exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
    if(exptext.test(email)==true){
        return true;
    }else{
        //이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
        alert("이메일형식이 올바르지 않습니다.");
        $(this).value = "";
        return false;
    }
}
</script>
<body>
<form >
<table>
  <tr>
   <td>
    //checkNumber(event) 함수에서 유효성 검사를 진행한다. 
    <input type="text" classname="t_inp" name="tel1" onkeydown="return checkNumber(event);">
    <input type="text" classname="t_inp" name="tel2" onkeydown="return checkNumber(event);">
    <input type="text" classname="t_inp" name="tel3" onkeydown="return checkNumber(event);">
   </td> 
   <td>
   <input type="text" classname="t_inp" name="email">
   </td>
   <td>
   <input type="text" classname="t_inp" class="submit" value="전송">
   </td> 
  </tr>
</table>
</form>
</body>

$(function () {
            let orderCnt = parseInt($(".orderCnt").text());
            let rows = document.getElementById("tableset").getElementsByTagName('tr');
            let sum = 0;
            for (let i = 1; i <= rows.length; i++) {
                sum += parseInt(rows[i].cells[2].innerText) || parseInt(inputcnt) || 0;
                let excnt = orderCnt - sum;
                let exCnt = $(".exCnt")[i - 1];
                exCnt.innerText = excnt;
                //console.log(excnt);
            }
}

select box ID로 접근 한 선택값

- $("#셀렉트박스ID option:selected").val());

​select box Name로 접근 한 선택값

- $("select[name=셀렉트박스name]").val());

선택값의 index

- var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

select box option값

- $("#셀렉트박스ID").append("<option value='1'>1번</option>");

select box option의 0번째

- $("#셀렉트박스ID").prepend("<option value='0'>0번</option>");

select box html

- $("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");

select box의 index에 replace : option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.

- $("#셀렉트박스ID option:eq(1)").replaceWith("1차");</option value='1'>​);

index 값을 주어 selected 속성 주기

- $("#셀렉트ID option:eq(1)").attr("selected", "selected");

​text 값으로 selected 속성 주기

- $("#셀렉트ID")val("1번").attr("selected", "selected");

value 값으로 selected 속성 주기

- $("#셀렉트ID").val("1");  or  $("#id").val("1").prop("selected", true);

해당 index item 삭제

- $("#셀렉트ID option:eq(0)").remove();

첫번째 item 삭제

- $("#셀렉트ID option:first").remove();

마지막 item 삭제

- $("#셀렉트ID option:last").remove();

선택된 옵션의 text, value 구하기

- $("#셀렉트ID option:selected").text();

- $("#셀렉트ID option:selected").val();

선택된 옵션의 index 구하기

- $("#셀렉트ID option").index($("#셀렉트ID option:selected"));

셀렉트박스의 아이템 갯수 구하기

- $("#셀렉트ID option").size();

선택된 옵션 전까지의 item 갯수 구하기

- $("#셀렉트ID option:selected").prevAll().size();

선택된 옵션 후의 item 갯수 구하기

- $("#셀렉트ID option:selected").nextAll().size();

option item 추가 하기

- $("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");

index item 전에 option item 추가하기

- $("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");

해당 셀렉트 박스에 change event binding 하기

$("#selectID").change(function() {

alert($(this).val());

alert($(this).children("option:selected").text());

});

​

리스트에 인덱스마다 파일을 추가할 수 있는 화면을 구현해보았다.

 

<td>
      <span th:text="|${list.filename}|"></span>
      <!--label for="fileUpload">추가</label-->
      <label th:for="|fileUpload_${index.count}|" >추가</label>
      <input type="file" th:id="|fileUpload_${index.count}|" class="btn" name="file" 
	th:attr="data-oidx=${list.od_no},data-ridx=${list.rt_id},data-cpno=${cmId}" style="display: none"/>
</td>
<form id="file_form" action="/file_form" method="post"></form>

 

* 코드설명을 하자면 <label>은 <input>을 감싸고 있고 같은 id를 가진다 묶어준다는 개념으로 이해하면 된다

또, ${index.count} 라는 값으로 버튼마다 index을 값을 갖도록 처리한다 (|String_String| 은 문자연결을 의미한다)

list의 인덱스 마다 파일 첨부를 할때 list[0]번째 데이터 + file[0]번째 데이터를 매칭시켜서 저장할 것이기 때문에

fileTag에 attr 속성을 이용하여 데이터를 함께 전송한다

 

$(".btn").on("change",function(event){

        let index = $(".btn").index(this);
        let oidx = $(".btn:eq(" + index + ")").attr("data-oidx");
        let ridx = $(".btn:eq(" + index + ")").attr("data-ridx");
        let cpno = $(".btn:eq(" + index + ")").attr("data-cpno");

        console.log($(".btn").index(this));
        console.log(ridx);

        $('#file_form').append("<input type=\"hidden\" value=\""+oidx+"\" name=\"odNo\"/>");
        $('#file_form').append("<input type=\"hidden\" value=\""+ridx+"\" name=\"rtId\"/>");
        $('#file_form').append("<input type=\"hidden\" value=\""+cpno+"\" name=\"cmId\"/>");
        $(this).clone(true).appendTo('#file_form');
        $('#file_form').submit();
});

*Js를 보면 fileTag가 변할때 동작하도록 처리하였고 clone을 사용하여 fileTag의 파일 자체를 가져와

form에 전송할 수 있도록 처리하였다.