코딩 공부/JS

[JS] - 상품관리 수정 (페이지 로드시 내용 집어넣기, 추가, 삭제)

hg_96 2022. 10. 28. 17:40

이전글에서 추가 기능은 동일하지만 삭제 기능은 ajax를 사용해서 삭제하고 html 해당 부분을 지워주는 처리를 했다.

그리고 지우는 옵션이 마지막 옵션일경우 옵션 박스를 지워주는 코드도 추가했다.

 
        if (result['contentsData'] == true ) { // 통신 성공했을떄
 
            let div = document.getElementById(result["resultClass"]); // 지울대상 가져오기 

            div.parentNode.removeChild(div); // 해당 대상 지우기

            if (result["resultParent"] != "N") {  // 옵션박스를 지우는건지 아닌지 체크  
                let parentDiv = document.getElementById("옵션담는박스+번호");

                if (parentDiv.childElementCount == 0 ) {
                    parentDiv = document.getElementById("옵션박스+번호");
                    parentDiv.parentNode.removeChild(parentDiv);
                }
            }


        } else {
            alert("삭제 실패했습니다.");
        }

 

선택 옵션의 데이터를 기준으로 데이터를 불러온다. 이렇게 부르면 이전글을 참고하면 카메라의 데이터가 각각의 0123의 데이터에 담긴채 하나의 배열로 들고온다.

저장된 옵션데이터를 조회해서 순차적으로 넣어주기만 하면된다고 생각했다 이미 앞전에서 데이터를 순차적으로 넣는게 가능했기 때문이다. 하지만 순차적으로 입력, 수정이 된다해도 삭제만하고 수정동작을 통해 정렬을 다시 해주지 않았다면 여기서 로직이 더 추가된다.

            let isOption = -1; // 옵션 구분
            let optionNum = -1; // 옵션 생성
                // 옵션 html추가
                if (isOption !== parseInt(data["저장한_순서_조회"])) {
                    optionAdd();
                    isOption = parseInt(data["저장한_순서_조회"])
                    optionNum++;
                }

isOption 변수는 다음 옵션박스로 넘어갔는지 체크한다 넘어갔으면 옵션박스를 그리고 넘어간 번호를 변수에 저장하고

생성할 옵션박스의 순서를 optionNum 에 저장한다.