본문 바로가기
개발/개인

사내도서대여시스템 - 수정하기

by areumtb 2016. 10. 28.

1.db에 저장된 데이터 불러와서 화면에 뿌리기

2. 수정된 정보를 db에 저장하고 그리드 리로드하기






1.db에 저장된 데이터 불러와서 화면에 뿌리기


1-1. 선택한 셀의 데이터를 불러온다.

   (다중선택,선택된것이 없을때 거를 코딩포함)


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
-eco_user.js
// 사용자 정보 수정 - db데이터 가져오기
function userUpdate(){
    //alert("userUpdate()");
    
    
    var sel = $("#list2").getGridParam('selarrrow'); // selarrrow 배열 , selrow 하나만 선택
    
    if(sel.length>1){
        alert("수정할 데이터를 하나만 선택해주세요");
        //modal닫기
         /*$("#userUpdate").hide(); // 콘텐츠 레이어 감추기
            $("#userUpdate"+"_overlay").hide();// 배경 레이어 감추기
*/        
    }else if(sel.length == ""){
        alert("수정할 데이터를 선택해주세요");
        //modal닫기
        
    }else if(sel.length>=1){

        /* 처음에 위에 배열로 받아서 당연히 리스트로 controller에 보내야겟지? 라고 생각하고 for문돌려서 배열에 담음...
         * var arr = new Array();
         * for (var i = 0; i < sel.length; i++) {
         * rows = JSON.stringify($("#list2").getRowData(sel[i]));
         * arr.push(JSON.parse(rows));
         *     }
         * console.log(arr);
         * console.log(JSON.stringify(arr));
         * 
         * 문제 1. 400번 에러 발생.
         *  문제해결 - 바보같이 dcode 배열로 받을때 처럼 controller에서 String[]이런식으로 받음 .. 그래서 에러가남...
         *  //@RequestBody List<EmployeeVO> vo 이렇게 바꿔주니까 거지같은 400번에러가 해결됨 
         *  아마 주는곳에선 json형태의 리스트인데 받는곳은 그냥 string[] 이거여서 에러난듯함 ㅜㅜㅜㅜㅜ짜잉나!!!!
         *   게다가 리스트로 주면은 필요한 dcoed를 추출하기 힘듬                                      
         *       //2016/10/28 중간정리 - 음.. dcode값만 추출해서 보내도 괜찮았을텐데 그떈 방법을 몰랐던거같다. 사용자조회 참고
         *   
         *   
         * ====> 그래서 리스트로 받을 필요가 없음. 한 행에대한 정보면 오키 그래서 for문을 안함(배열로 담을 필요가 없다...)
         */ 
        
        var row = JSON.stringify($("#list2").getRowData(sel)); // 선택한 셀의 데이터를 다 담아 보냄
        var arr = JSON.parse(row)
        console.log("row : "+row);
        console.log("arr : "+arr);
        
        // 위에서 사용자 DCODE추출 후 에이작스를 통해 CONTROLLER에 전달해 사용자 삭제 후 JQGRID 리로드
        $.ajax({
            type : "POST",
            url:"/library/userUpdateSelect.do",
            dataType:"html",
            async:true,
            data:JSON.stringify(arr),
            contentType: "application/json",
            success: function (data){             // userUpdateSelect.do에서 return받은 emp 데이터
                var emp = data; // controller에서 데이터를 리턴받아 userSelect로 보냄
                userSelect(emp);
                console.log("10/26 emp :"+JSON.stringify(emp)); //JSON형태로 넘어옴  emp :{"dcode":"963","position":"신입".....}
                console.log("10/26 emp :"+JSON.parse(emp).ename); //10/26 emp :희란  이런식으로 형태를 바꿔서 출력 ㅇㅇ
                //alert("userUpdate 성공");
                
                
            },error:function(request,status,error){
                console.log("code:"+request.status+"\n"+"message:"
                        +request.responseText+"\n"+"error:"+error);
                alert("실패");
                alert(JSON.stringify(arr));
            }
        });    
    }
}//userUpdate()
 

cs




1-2 Ajax로 던진 데이터를 controller에서 받아 로직수행 후 결과값 리턴



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- controller
  
  //사용자 정보 수정 - 데이터 불러오기
    @RequestMapping(value = "/userUpdateSelect.do", method = RequestMethod.POST,
            produces = "application/json; charset=UTF-8")
    public @ResponseBody EmployeeVO userUpdateSelect(
            @RequestBody EmployeeVO vo) {
            // 데이터를 전부 다 보냈기 때문에 vo에 담음
 
        /* userUpdate() 에서 리스트로 던져줬을 경우
         *@RequestBody List<EmployeeVO> vo 이렇게 바꿔주니까 거지같은 400번에러가 해결됨
         *  아마 주는곳에선 json형태의 리스트인데 받는곳은 그냥 string[] 이거여서 에러난듯함 ㅜㅜㅜㅜㅜ짜잉나!!!!
         * 그런데 리스트로 받으면 필요한 dcode를 추출하기 힘듬 생각해보니 한 행에 정보만 필요한거니까 
         * js 에서 for문 안돌리고 한줄에 대한 정보만 전송해서 emp로 받아 dcode 출력*/
            
 
         System.out.println(vo.toString());            // 데이터를 전부 다 보냈기 때문에 vo에 담음
        
        EmployeeVO emp = employeeServiceimp.EmployeeList(vo.getDCODE());
        System.out.println("emp :"+emp.toString());
        
        
        return emp; // 결과갑 리턴
    }
    
cs





1-3. 리턴받은 데이터를 뷰 화면에 뿌린다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function userSelect(emp){
    
    var user ={}; // user란 배열에 리턴받은 값들을 모두 담는다.
        user.UCODE = JSON.parse(emp).ucode;
        user.DCODE = JSON.parse(emp).dcode;
        user.ENAME = JSON.parse(emp).ename;
        user.NAME  = JSON.parse(emp).name;
        user.BIRTHDAY = JSON.parse(emp).birthday;
        user.PHONE = JSON.parse(emp).phone;
        user.EXNUM = JSON.parse(emp).exnum;
        user.POSITION = JSON.parse(emp).position;
        user.EMAIL = JSON.parse(emp).email;
        user.ADDRESS = JSON.parse(emp).address;
        user.BIREDAY = JSON.parse(emp).bireday;
        user.PRESENT = JSON.parse(emp).present;
        user.NOTE = JSON.parse(emp).note;
        user.DEPARTMENT = JSON.parse(emp).department;
        
        
        //alert(typeof user.BIREDAY); // String
        
        
        // eco_userUpdatePopup.jsp에 넣기 // 하나하나 수동으로 넣기
        $("#UCODE").val(user.UCODE)
        $("#DCODE").val(user.DCODE);
        $("#ENAME").val(user.ENAME);
        $("#NAME").val(user.NAME);
        $(".BIRTHDAY_user").val(user.BIRTHDAY).daterangepicker({   //daterangepicker 날짜포멧
            singleDatePicker:true,  //날짜포멧하기 귀찮 + 어차피 달력도 수정받아야 하니까~
            locale : { // 기본형태설정
                format : 'YYYY-MM-DD'
            },
            showDropdowns: true,
        });
        
        $("#PHONE").val(user.PHONE);
        $("#EXNUM").val(user.EXNUM);
        $("#POSITION").val(user.POSITION);
        $("#EMAIL").val(user.EMAIL);
        $("#ADDRESS").val(user.ENAME);
        $(".BIREDAY_user").val(user.BIREDAY).daterangepicker({
            singleDatePicker:true,
            locale : { // 기본형태설정
                format : 'YYYY-MM-DD'
            },
            showDropdowns: true,
        });
        
        $("#PRESENT").val(user.PRESENT);
        $("#NOTE").val(user.NOTE);
        $("#DEPARTMENT").val(user.DEPARTMENT);
    
//userSelect(emp)
 

cs





2. 수정된 정보를 db에 저장하고 그리드 리로드하기



2-1. 수정창에 수정된 정보들 가져오기.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form action="userUpdate.do" method="post" class="USER_update" id="USER_update">~~</form>
 
function userUpdateReload(){
    
     var params = jQuery("#USER_update").serialize(); // serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.
        console.log(params);
     $.ajax({
            url: '/library/userUpdate.do',
            type: 'POST',
            data:params,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
            dataType: 'html',
            success: function(){
                //alert("성공");
        $("#list2").jqGrid({  // jqGrid 리로드
                     url : '/library/gridView.do'
                     datatype : 'json'}).trigger("reloadGrid"); 
                
            },error:function(request,status,error){
              console.log("code:"+request.status+"\n"+"message:"
                      +request.responseText+"\n"+"error:"+error);
            alert("실패");
            }
        });
}
 
cs



2-2 전달받은 정보를 저장하기.



1
2
3
4
5
6
7
8
9
10
@RequestMapping(value = "/userUpdate.do", method = RequestMethod.POST)
    public String userUpdate(EmployeeVO vo,Model model) {
        System.out.println("사용자정보수정 -post");
        System.out.println("userUpdate 잘온다잉 dcode :"+vo.toString());
        
        employeeServiceimp.userUpdate(vo);
        
        // 저장완료 후 그리드 리로드
        return null;
    }
cs




댓글