사용자 수정,검색.입력,상세보기창 하나의 모델로 바꾸기, jqgrid 더블클릭

사용자 수정,검색.입력,상세보기창 하나의 모델로만 팝업을 띄우기로 변경함

전에는 각각에 jsp파일로 팝업창을 띄웠음

1. 일단은 각각에 모델창을 inclue했던 방식을 하나에 모델창에 inclue하는 방식으로 변경

- 전  
                   <div class="USER_searchFormModal">
                        <button type="button" data-toggle="modal" data-target=""
                            onclick="userView()" class="btn" id="userView_Btn">상세보기</button>
                        <div class="modal fade" id="userView" role="dialog">
                            <div class="modal-dialog">
                                <jsp:include page="/WEB-INF/views/user/eco_userViewPopup.jsp" />
                            </div>
                        </div>
                        <button type="button" data-toggle="modal" data-target="#userInsert"
                            class="btn">입력</button>
                        <!-- Modal -->
                        <div class="modal fade" id="userInsert" role="dialog">
                            <div class="modal-dialog">
                                <!-- Modal content-->
                                <jsp:include page="/WEB-INF/views/user/eco_userFormPopup.jsp" />
                            </div>
                        </div>
                        <button type="button" data-toggle="modal" data-target=""
                            onclick="userUpdate()" class="btn" id="userUpdate_Btn">수정</button>
                        <div class="modal fade" id="userUpdate" role="dialog">
                            <div class="modal-dialog">
                                <jsp:include page="/WEB-INF/views/user/eco_userUpdatePopup.jsp" />
                            </div>
                        </div>
                    </div>

하나의 모델창으로 팝업을 띄운다. 

- 후
<div class="USER_searchFormModal user_menus user_skill_menu">
                  <div class="user_menus_inner">
                      <input type="hidden" data-toggle="modal" data-target="#insertModal"    id="userModal_GridBtn">
                      <input type="button"    id="userDetaileView_Btn" class="btn" value="상세보기">
                      <button onclick="userGridDelete()" id="userDelete" class="userGridDelete btn">삭제</button>
                      <input type="button" data-toggle="modal" data-target="#insertModal" id="userInsert_Btn" class="insertBtn_user btn" value="입력"> 
                      <input type="button"  id="userUpdate_Btn"    class="btn" value="수정"> 
                  </div>
</div><!-- USER_searchFormModal END -->
.
.
.
<!-- Modal -->
        <div class="modal fade" id="insertModal" role="dialog">
                <!-- Modal content-->
            <div class="modal-dialog">
                <jsp:include page="/WEB-INF/views/user/eco_userModal_Popup.jsp" />
            </div>
        </div>
</body>
 

- eco_userModal_Popup.jsp
 
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"> </h4>  // title을 넣을 곳
        </div> 
        <div class="modal-body">
            <form action="" method="post" class="" id="modal_insertForm">  // form  - class를 매번 각각 다르게 주기위해 비워놨음
                <ul id="grid_list_modal"> // 화면이 그려질곳
                </ul>
            </form>
        </div>
    <div class="modal-footer">
            <div id="popup_multSel">  // 다중선택시     이전(◀), 다음(▶) 버튼을 넣을 곳        
    </div>
            <div id="popup_btn">     // 버튼을 넣을 곳
<!-- <button type="button" class="btn btn-default"  data-dismiss="modal" >닫기</button>-->
            </div>    
     </div>
    </div><!-- modal-content -->

2. 사용자 정보 상세보기를 예로 들자.

  또 하나 바꾼게 jqgrid에서 셀을 더블클릭하면 사용자 상세정보창이 뜨도록 하였다. 

jqgrid js 하단에 아래 소스 추가 

ondblClickRow: function(rowid){
            var row = JSON.stringify($("#list2").getRowData(rowid));
            var arr = JSON.parse(row);
            var dcode = arr.dcode;
            $("#userModal_GridBtn").click(); // 그리드 더블클릭시 "#userModal_GridBtn" 클릭하게 하여 팝업창 생성 
            userDetaileView(dcode);
        }

  ※ondblClickRow: function(rowid){} -> 그리드를 더블클릭하면은 함수안에 인자를 받아서 로직구현 가능 (더 자세한건 검색 ㄱ)※

- 사용자 상세보기 

// 사용자 상세보기 
 // 상세보기 버튼클릭 
$("#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);
        
        });
}

3. 매번 modal창을 clear 해줄 modalFormClean() , 모델창 css listCss()

//modal 초기화
function modalFormClean(){
    $(".modal-title , #grid_list_modal, #popup_btn,#popup_multSel").html("");
    $("#modal_insertForm").attr("class","");
}
function listCss() {
    $("#grid_list_modal").css({"width": "80%","margin": "0 auto"});
    $("#grid_list_modal > li > label").css({
        "width" : "70px"
    });
    $("#grid_list_modal > li > span").css({
        "display":"inline-block",
        "width":"150px"
        
    });
    $("#grid_list_modal > li > input").css({
        "width":"150px"
        
    });
    $("#grid_list_modal > li > select").css({
        "width":"150px"
        
    });
    //다중이
    $("#popup_multSel > label").css({
        "color": "white"
            
    });
    
}