사용자 상세보기 , 다중상세보기 _modal

- 사용자 상세보기

 --> 사용자가 그리드를 더블클릭 혹은 셀 선택후(선택한 사용자가 한명일 경우) 버튼을 누르면 실행 

// 사용자 상세보기 
 // 상세보기 버튼클릭 
$("#userDetaileView_Btn").click(function(){
    var rowid =$("#list2").getGridParam('selarrrow'); // 해당 rowid 에따른 데이터 추출
    if(rowid == ""){
        alert("수정할 데이터를 선택해주세요 ");
    }else if(rowid.length == 1){ 
        var row = JSON.stringify($("#list2").getRowData(rowid));
        var arr = JSON.parse(row);
        var dcode = arr.dcode;
        $("#userModal_GridBtn").click();
        userDetaileView(dcode);
    }else if(rowid.length >= 2){                    // 다중선택시
        alert("다중 상세보기 ");
        $("#userModal_GridBtn").click();
 
        var dcode = new Array();
        for (var i = 0; i < rowid.length; i++) {
            rows = JSON.stringify($("#list2").getRowData(rowid[i]));
            dcode.push(JSON.parse(rows).dcode);
        }
        userDetaileViewMult(rowid,dcode);
    }
});
 
// 상세보기 ajax                                                
function userDetaileView(dcode){
    $.ajax({
        type : "POST",
        url:"/library/userView.do",
        dataType:"html",
        async:true,
        data:{"dcode":dcode},
        contentType: "application/json",
        success: function (data){             // userUpdateSelect.do에서
                                                // return받은 emp 데이터
            var emp = data;
            var title = {}
                title.title = "사용자 상세정보 보기";
                title.formClass = "user_DetaileViewPopup";
            userDetaileViewShow(emp,title);
        },error:function(request,status,error){
            console.log("code:"+request.status+"\n"+"message:"
                    +request.responseText+"\n"+"error:"+error);
            alert("실패");
        }
    });
    
};
function userDetaileViewShow(emp,title){
    var modalTitle = title;
    var data = JSON.parse(emp);
    var dcode = data.dcode;
    if(data.note==null){data.note=""}; // 비고란이 null경우 공백으로 보여줌
    
    modalFormClean(); // 모델 초기화
    
    
    
    $("#modal_insertForm").attr("class",modalTitle.formClass);// form에 추가할 class
    
    $(".modal-title").html(
            "<strong>"+modalTitle.title+"</strong>"  // 타이틀 추가
    );
 
    //사원정보 상세보기 grid_list_modal 안에 내용을 채워넣음
    $("#grid_list_modal").html(
            "<li hidden>"+data.ucode+"</li>"+
            "<li>" +
            "<label>사원ID</label>"+"<span>"+data.ename+"</span>"+
            "<label>자택정보</label>"+"<span>"+data.address+"</span>"+
            "</li>"+
            "<li>" +
            "<label>이름</label>"+"<span>"+ data.name+"</span>"+
            "<label>사원번호</label>"+"<span>"+ data.dcode+"</span>"+
            "</li>"+
            "<li>" +
            "<label>부서</label>"+"<span>"+data.department+"</span>"+
            "<label>직급</label>"+"<span>"+data.position+"</span>"+
            "</li>"+
            "<li>" +
            "<label>생년월일</label>"+"<span>"+data.birthday +"</span>"+
            "<label>입사일</label>"+"<span>"+data.bireday +"</span>"+
            "</li>"+
            "<li>" +
            "<label>전화번호</label>"+"<span>"+data.phone +"</span>"+
            "<label>내선번호</label>"+"<span>"+data.exnum +"</span>"+
            "</li>"+
            "<li>" +
            "<label>이메일</label>"+"<span>"+data.email+"</span>"+
            "<label>사원상태</label>"+"<span>"+data.present+"</span>"+
            "</li>"+
            "<li>" +
            "<label>비고</label>"+"<span>"+data.note+"</span>"+
            "</li>"
    );
    listCss();
 
    //버튼추가
    $("#popup_btn").html(
            "<button type='button' id='close' class='btn btn-default' data-dismiss='modal'>닫기</button>"+
            "<button type='button' id='updataModal' class='btn btn-default' data-dismiss='' >수정하기</button>"
    );
    // 수정버튼 클릭시 실행 
    $("#updataModal").click(function(){
        userUpdateModalconfirm(dcode);
        
        });
}

- controller

// 사용자 정보 상세보기
        @RequestMapping(value = "/userView.do", 
                    method = RequestMethod.POST, produces = "application/json; charset=UTF-8")
        public @ResponseBody
        EmployeeVO userView(@RequestBody String dcode) {
            logger.info("사용자 정보 상세보기");
            
            String DCODE = dcode.substring(6);
            EmployeeVO emp = employeeServiceimp.EmployeeList(DCODE);
            emp.setBIREDAY(emp.getBIREDAY().substring(0, 11));
            emp.setBIRTHDAY(emp.getBIRTHDAY().substring(0, 11));
            
            System.out.println(emp);
            
            return emp;
        }
 

- 사용자 다중 상세보기

 --> 사용자가 두개이상의 셀 선택후 버튼을 누르면 실행 

  맨 처음 다중선택 화면에서 이전버튼을 눌렀을시 알럿찻 맨 마지막 다중선택에서 다음버튼을 눌렀을시 알럿창

뒤에 내용을 보고 맨 앞까지 가서 이전 버튼을 눌렀을시 알럿창

// 사용자 상세보기 
 // 상세보기 버튼클릭 
$("#userDetaileView_Btn").click(function(){
    var rowid =$("#list2").getGridParam('selarrrow');
    if(rowid == ""){
        alert("수정할 데이터를 선택해주세요 ");
    }else if(rowid.length == 1){ 
        var row = JSON.stringify($("#list2").getRowData(rowid));
        var arr = JSON.parse(row);
        var dcode = arr.dcode;
        $("#userModal_GridBtn").click();
        userDetaileView(dcode);
    }else if(rowid.length >= 2){
        alert("다중 상세보기 ");
        $("#userModal_GridBtn").click();
 
        var dcode = new Array();
        for (var i = 0; i < rowid.length; i++) {
            rows = JSON.stringify($("#list2").getRowData(rowid[i]));
            dcode.push(JSON.parse(rows).dcode);
        }
        userDetaileViewMult(rowid,dcode);
    }
});
 
 
// 사용자 정보 상세보기 - 다중 ajax
function userDetaileViewMult(rowid,dcode){
    console.log("userDetaileViewMult "+dcode);
    $.ajax({
        type : "POST",
        url : "/library/userDetaileViewMult.do",
        dataType : "html",
        async : true,
        data : JSON.stringify(dcode),             // dcode의 코드값만늘 보낼것임 - 다중선택이기 떄문에 
        contentType : "application/json",         // 미디어타입을 맞추려고
        success : function(data) {
            //var list = {data};
            userDetaileViewMultShow(data,rowid);   // 넘어온 값을 rowid와 같이 보냄
        },
        error : function(request, status, error) {
            console.log("code:" + request.status + "\n" + "message:"
                    + request.responseText + "\n" + "error:" + error);
             alert("실패");
        }
    });
    
}
 
 
function userDetaileViewMultShow(data,rowid){
    
    
                // 배열을 한줄씩 추출하려다보니 JSON.parse 이용 ex) list[0] 이런식으로 한줄씩 꺼내려다보니..
    var list = JSON.parse(data);
    console.log(rowid.length+" , "+list.length);
    console.log("내용 "+JSON.stringify(list[0])); // 화면에서 확인해보려면 저렇게 해줘야함
    
    // 총 페이지 수  - rowid를 같이 넘긴 이유
    var selCount = rowid.length;
    console.log(selCount);
 
    var modalTitle = {}
    modalTitle.title = "사용자 상세정보 보기";
    modalTitle.formClass = "user_DetaileViewPopup";
    var dcode = list[0].dcode;
    //list기본 배열순서 값
    var i = 0;
    
    if(list[0].note==null){list[0].note=""};
    
    modalFormClean(); // 모델 초기화
    
    
    $("#modal_insertForm").attr("class",modalTitle.formClass);// form에 추가할 class
    
    $(".modal-title").html(
            "<strong>"+modalTitle.title+"</strong>" 
    );
    //사원정보 상세보기 
    $("#grid_list_modal").html(
            "<li hidden>"+list[i].ucode+"</li>"+
            "<li>" +
            "<label>사원ID</label>"+"<span>"+list[i].ename+"</span>"+
            "<label>자택정보</label>"+"<span>"+list[i].address+"</span>"+
            "</li>"+
            "<li>" +
            "<label>이름</label>"+"<span>"+ list[i].name+"</span>"+
            "<label>사원번호</label>"+"<span>"+ list[i].dcode+"</span>"+
            "</li>"+
            "<li>" +
            "<label>부서</label>"+"<span>"+list[i].department+"</span>"+
            "<label>직급</label>"+"<span>"+list[i].position+"</span>"+
            "</li>"+
            "<li>" +
            "<label>생년월일</label>"+"<span>"+list[i].birthday +"</span>"+ //style="background: white;" maxlength="11"
            "<label>입사일</label>"+"<span>"+list[i].bireday +"</span>"+
            "</li>"+
            "<li>" +
            "<label>전화번호</label>"+"<span>"+list[i].phone +"</span>"+
            "<label>내선번호</label>"+"<span>"+list[i].exnum +"</span>"+
            "</li>"+
            "<li>" +
            "<label>이메일</label>"+"<span>"+list[i].email+"</span>"+
            "<label>사원상태</label>"+"<span>"+list[i].present+"</span>"+
            "</li>"+
            "<li>" +
            "<label>비고</label>"+"<span>"+list[i].note+"</span>"+
            "</li>"
    );
    
    $("#popup_multSel").html(
            "<button type='button' id='beforeDetailView' class='btn btn-default' data-dismiss=''>◀</button>"+ //이전
            "<label>"+(i+1)+"</label>"+ // 배열은 0부터 시작하기 때문에 첫페이지인 것을 보여주기위해 +1을 해줌
            "<label>"+" / "+selCount+"</label>"+
            "<button type='button' id='nextDetailView' class='btn btn-default' data-dismiss=''>▶</button>" // 다음
    );
    
    $("#popup_btn").html(
            "<button type='button' id='close' class='btn btn-default' data-dismiss='modal'>닫기</button>"+
            "<button type='button' id='updataModal' class='btn btn-default' data-dismiss='' >수정하기</button>"
    );
    listCss();
    
    // 다음버튼 클릭시
    $("#nextDetailView").click(function (){
        //i를 1 증가함 (다음 배열을 보여주기 위해)
        var cnt = i+1;
        nextDetailView(list,modalTitle,cnt,selCount);
    });
    // 이번버튼 클릭시
    $("#beforeDetailView").click(function (){
        if(i==0){
            alert("맨 처음 화면입니다.");
        }
    });
    $("#updataModal").click(function(){
        userUpdateModalconfirm(dcode);
        });
}
 
// 다음버튼클릭(▶) - 첫 화면(userDetaileViewMultShow)과 별개로 이전(◀)과 다음(▶)을 보여줌
function nextDetailView(list,modalTitle,cnt,selCount){
    modalFormClean(); // 모델 초기화
    var dcode = list[cnt].dcode;
    if(list[cnt].note==null){list[cnt].note=""};
    $("#modal_insertForm").attr("class",modalTitle.formClass);// form에 추가할 class
    
    $(".modal-title").html(
            "<strong>"+modalTitle.title+"</strong>" 
    );
    //사원정보 상세보기 
    $("#grid_list_modal").html(
            "<li hidden>"+list[cnt].ucode+"</li>"+
            "<li>" +
            "<label>사원ID</label>"+"<span>"+list[cnt].ename+"</span>"+
            "<label>자택정보</label>"+"<span>"+list[cnt].address+"</span>"+
            "</li>"+
            "<li>" +
            "<label>이름</label>"+"<span>"+ list[cnt].name+"</span>"+
            "<label>사원번호</label>"+"<span>"+ list[cnt].dcode+"</span>"+
            "</li>"+
            "<li>" +
            "<label>부서</label>"+"<span>"+list[cnt].department+"</span>"+
            "<label>직급</label>"+"<span>"+list[cnt].position+"</span>"+
            "</li>"+
            "<li>" +
            "<label>생년월일</label>"+"<span>"+list[cnt].birthday +"</span>"+
            "<label>입사일</label>"+"<span>"+list[cnt].bireday +"</span>"+
            "</li>"+
            "<li>" +
            "<label>전화번호</label>"+"<span>"+list[cnt].phone +"</span>"+
            "<label>내선번호</label>"+"<span>"+list[cnt].exnum +"</span>"+
            "</li>"+
            "<li>" +
            "<label>이메일</label>"+"<span>"+list[cnt].email+"</span>"+
            "<label>사원상태</label>"+"<span>"+list[cnt].present+"</span>"+
            "</li>"+
            "<li>" +
            "<label>비고</label>"+"<span>"+list[cnt].note+"</span>"+
            "</li>"
    );
    
    $("#popup_multSel").html(
            "<button type='button' id='beforeDetailView' class='btn btn-default' data-dismiss=''>◀</button>"+
            "<label>"+(cnt+1)+"</label>"+
            "<label>"+" / "+selCount+"</label>"+
            "<button type='button' id='nextDetailView' class='btn btn-default' data-dismiss=''>▶</button>"
    );
    
    $("#popup_btn").html(
            "<button type='button' id='close' class='btn btn-default' data-dismiss='modal'>닫기</button>"+
            "<button type='button' id='updataModal' class='btn btn-default' data-dismiss='' >수정하기</button>"
    );
    
    listCss();
    
 
    $("#nextDetailView").click(function() {
        cnt = cnt + 1;
        if (cnt < selCount) { //총 페이지 수보다 작을때까지 반복
            reNextDetailView(list, modalTitle, cnt, selCount);
        } else {
            alert("선택하신 데이터에 마지막입니다.");
        }
    });
    $("#beforeDetailView").click(function (){
        var bcnt = cnt; // 원래 cnt 값
        cnt = cnt - 1;  // 이전 버튼을 눌렀을때 바뀐 cnt 값
        
        if(cnt<=-1){ // cnt 가 맨 앞장까지 이동했는데도 이전버튼 클릭시 알럿창 발생
            alert("선택하신 데이터에 처음입니다.");
        
        }else if (bcnt > cnt ){
            console.log("cnt 값 "+bcnt)
            console.log("cnt-1 값 "+cnt)
            reNextDetailView(list, modalTitle, cnt, selCount);
        }
    });
    $("#updataModal").click(function(){
        userUpdateModalconfirm(dcode);
        });
}
// nextDetailView을 반복하기위한 함수
function reNextDetailView(list,modalTitle,cnt,selCount){
    nextDetailView(list,modalTitle,cnt,selCount);
    }

- controller

    // 사용자 상세보기 - 다중
    @RequestMapping(value = "/userDetaileViewMult.do", method = RequestMethod.POST,
                                           produces = "application/json; charset=UTF-8")
    public @ResponseBody
    List<EmployeeVO> userDetaileViewMult(EmployeeVO vo, Model model,@RequestBody String[] dcode) {
                                                                    // dcode만 배열로 받을것이기 때문에 이렇게 받음
        logger.info("사용자 상세보기 - 다중");
 
    //    System.out.println(Arrays.toString(dcode));
        
        List<EmployeeVO> list = new ArrayList<>(); // 배열 list선언 후 
        for (String data : dcode) {
            vo = employeeServiceimp.userDetaileViewMult(data); // 반복문으로 결과값 하나씩 vo에 결과값 받아
            list.add(vo);  // 배열 list에 하나씩 담는다 
        }
        return list; // 위에서 담은 배열 list 
    }