사원번호 또는 이름으로 사원을 검색
1. select박스 설정
1 2 3 4 5 6 7 8 9 10 | eco_userSearch.jsp <p> <input type="text" id="userSearchInput"> // 입력받 input </p> <p> <select name="userSearch" id="userSearch"> <option value="DCODE">사원번호</option> <option value="NAME">이름</option> </select> </p> | cs |
2. 선택한 selelct과 입력받은 input 가져와 각각 Ajax로 보내기
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 | // 사용자 조회 function userSearch() { // input에 무결성검사걸기 사원번호 선택했으면 숫자만 입력하라고 , 이름 선택시 문자만 입력 ㄱㄱ // input에서 받은 값 var userSearchInput = $("#userSearchInput").val(); // 사원번호, 이름 select var userSearch = $("#userSearch option:selected").val(); if(userSearchInput==""){ alert("검색할 값을 입력해주세요"); }else{ if (userSearch == "DCODE") { var DCODE = userSearchInput; // select값 = input값 //alert("DCODE :"+DCODE); } else if(userSearch == "NAME"){ var NAME = userSearchInput; //alert("NAME :"+NAME); }//if userSearchGrid(DCODE, NAME); }//else }//userSearch() | cs |
3. 넘어온 DCODE or NAME을 CONTROLLER로 보내기
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 | function userSearchGrid(DCODE, NAME) { //alert("DCODE :" + DCODE + " NAME: " + NAME); // 둘중 하나는 무도건 undifiend로 넘어옴 if (DCODE == undefined) { //alert("name으로 검색"); $.ajax({ url : '/library/userSearchName.do', type : 'POST', data : {"NAME":NAME}, // 키:값 dataType : 'html', success : function(data) { // 조회된 조건으로 그리드 리로드 var emp = data; // json 형태로 리턴됨
if(emp=="[]"){
alert("이름에 맞는 데이터가 없습니다.");
}else{
console.log(data);
reGrid(emp);
} }, error : function(request, status, error) { console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error); alert("실패"); } }); } else if(NAME == undefined) { //alert("dcode로 검색"); $.ajax({ url : '/library/userSearchDcode.do', type : 'POST', data : {"DCODE":DCODE}, dataType : 'html', success : function(data) { // 조회된 조건으로 그리드 리로드 var emp = data; // json 형태로 리턴됨 if(emp=="[]"){
alert("사원번호에 맞는 데이터가 없습니다.");
}else{
console.log(data);
reGrid(emp);
} }, error : function(request, status, error) { console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error); alert("실패"); } }); } } | cs |
4. 넘어온 값들로 로직을 실행
===> 여기서 두가지 문제가 발생했음
문제 1. 한글깨짐현상발생
문제 2. 넘어온 값을 로직에 넣었을때 java.lang.NullPointerException 발생 (Ajax에선 리턴받은 값이 null이니 500에러발생)
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 | // 사용자검색 // -이름 @RequestMapping(value = "/userSearchName.do", method = RequestMethod.POST) public @ResponseBody EmployeeVO userSearchName(HttpServletRequest req, @RequestBody String NAME) throws IOException { /*문제 1. 한글깨짐현상발생 * 이름 : NAME=%E3%84 이런식으로 한글이 깨져서 넘어옴 * - 문제해결 * String a = URLDecoder.decode(NAME,"UTF-8"); // URLDecoder로 형식을 바꿈 * * 문제 2. 넘어온 값을 로직에 넣었을때 java.lang.NullPointerException 발생 (Ajax에선 리턴받은 값이 null이니 500에러발생) * - 문제해결 * 알고보니 Ajax에서 KEY=VALUE 이런형식으로 데이터값을 전달하는데 받을때 넘어온것을 데이터를 KEY=VALUE 그래도 로직에 넣어서 에러가 났던것!! * System.out.println("이름 : "+a); 이름 : NAME=이름 이런식으로 키=값 형식으로 들어옴 (Ajax에서 보낼때 키:값 으로 보냈으니) * * 그래서 HttpServletRequest req을 선언해주고 req.getParameter("NAME") 해서 값만 뺴서 로직에 넣어주니 문제해결!~! * (@RequestBody앞에 해줌 , 뒤에해주니 에러가 난다..) */ String name = req.getParameter("NAME"); System.out.println(name); System.out.println("이름 : "+NAME); //NAME=sss EmployeeVO emp = new EmployeeVO(); emp = employeeServiceimp.userSearchName(name); System.out.println("이름검색 : "+emp.toString()); return emp; } // -사원번호 @RequestMapping(value = "/userSearchDcode.do", method = RequestMethod.POST) public @ResponseBody EmployeeVO userSearchDcode(HttpServletRequest req, @RequestBody String DCODE) { System.out.println("사원번호 : "+DCODE); //DCODE=123 String dcode = req.getParameter("DCODE"); EmployeeVO emp = new EmployeeVO(); emp = employeeServiceimp.userSearchDcode(dcode); System.out.println("사원번호검색 : "+emp.toString()); return emp; } | cs |
4. 받아온 값들로 그리드 재구성 ===> 어찌해야하나..?
--> 11/08 까지 시도해본 것
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function reGrid(emp){ // 데이터 삭제 후 리로드 //var aa=emp; //$.jgrid.gridUnload("list2"); console.log("reGrid "+emp); $("#list2").clearGridData(); $("#list2").setGridParam({ url:'/library/userSearchDcode.do', datatype : "json", postData : emp , loadComplete: function(postData){alert("2번 "+emp);} }).trigger("reloadGrid"); } | cs |
받아온 emp값은 잘 뿌리는데 계속 초기값을 뿌림...
그래서 아에 다른방법으로 시도해보기로 함
http://www.trirand.com/blog/jqgrid/jqgrid.html
이 방법으로
http://areumtb.tistory.com/33
'개발 > 개인' 카테고리의 다른 글
사용자 정보 수정, 상세보기 - modal창 제어(선택된데이터가 있을때 없을때) (0) | 2016.11.02 |
---|---|
사용자 정보 입력하기 - 유효성검사 추가,입력폼 reset (0) | 2016.11.02 |
사용자 정보 상세조회 (0) | 2016.11.01 |
사내도서대여시스템 - 수정하기 (0) | 2016.10.28 |
사내도서대여시스템 - db값 조회해 jqGrid 뿌리기,입력,삭제 (0) | 2016.10.28 |
댓글