jQgrid 사용하기(3)

이번 포스팅에선 저장기능과 다른 몇가지를

수정 후 마무리하겠다.

일단 아래 소스를 jsp 스크립트단에 추가하자

var CommonJsUtil = 
{
    
    isNumeric : function(val) {
 
        if (/[^0-9]/.test(val)) {
            
            return false;
        } else {
            
            return true;
        }
    }
}

조건문 안에는 정규식이다 ^는 부정의 의미이다.

즉 숫자가 없으면 이라는 의미이다. 

gridValid : function() {
        
        var trObj = $("#jqGrid").find("tr");
        
        for(var i = 0; i < trObj.length; i++) {
                
            var $this = $(trObj[i]);
            
             if($this.hasClass("edited")) {
                 
                 var rowId = $this.prop("id");
                 var phone = $("#jqGrid").getCell(rowId, "phone");   
                 
                if(!CommonJsUtil.isNumeric(phone)) {
                    
                    alert(rowId+"째 행 전화번호는 숫자만 입력가능합니다.");
                    
                    return false;
                    
                    break;
                 }
             }
         }
        
        return true;
    }

gridValid를 추가하자. 이곳은 valid 기능으로

개발자 마음대로 만드는 곳이다.

위처럼 만든다면 전화전호 부분에 숫자가 없다면

다음 이벤트를 실행시키지 못한다.

이제 저장 기능을 보자

saveData : function() {
        
        // 저장 전 validation 체크
        if(!this.gridValid()) return false;
        
        var param1 = this.selectData('save');
        
        this.ajaxFn(param1, '저장');
    },

selectData에서 문자열을 받아 저장인지 삭제인지

구분한다. 저장 삭제가 하나의 함수에서 이루어지게 한다.

ajaxFn은 파라미터로 json이 들어있는 배열과 저장 또는 삭제인지

구분하는 텍스트가 넘어간다.

ajaxFn : function(param1, gubun) {
 
        $.ajax({
            
            type       : "POST",
            url        : "saveJqgrid.do",
            data       : {"param1" : param1},
            async      : false,
            beforeSend : function(xhr) {
                
                // 전송 전 Code
            },
            success    : function(result) {
                
                if(result == "SUCCESS") {
                    
                    alert("성공적으로 "+gubun+"하였습니다.");
 
                    
                    
                        jqgridTable.goSearch();
                    
                }
            },
            error      : function() {
                
                alert("+gubun+"+"시 Error 발생");
            }
        });
    },

ajax이다. type은 post로 보낸다. 이것은 바로컨트롤러를 만들어서

맵핑시켜줄 것이다. data는 param1로 json배열을 넣는다.

async는 기본값은 true인데 비동기적으로 처리하지않고

ajax 이후 다른 코드가 실행 될것이 있다면 false 동기로 해준다.

beforeSend는 request 전 호출되는 이벤트다. 이안에 return false를 주게되면

ajax이벤트가 취소된다. success는 통신이 성공하면 호출되는 함수이다.

이제 selectData를 보자

selectData : function(gubun) {
            
        var gubunText = gubun == 'save' ? '저장' : '삭제';     
        
        var checkData = $("#jqGrid").getGridParam("selarrrow"); //체크된 로우들을 담음
 
        if(checkData.length == 0) {
            
            alert(gubunText+"할 데이터를 선택하여 주십시오.");
            
            return;
        }
        
        
        if (confirm("선택한 데이터를 "+gubunText+" 하시겠습니까?") == false) {
            
            return false;
        }
        
        var iCnt = 0;
        var jsonArray1 = new Array();
 
        for(var i = 0; i < checkData.length; i++) {
            
            var jsonObj = {}; //jsonObject 생성
            
            var seq = $("#jqGrid").getCell(checkData[i], "seq");
            
            var editType = "";
            
                  if(!CommonJsUtil.isEmpty(seq)) { //행추가가 아니면
                      
                      editType = "D"; //삭제
                  } else {
                      
                      editType = "I"; //행추가라면 삽입
                  }
                  
            jsonObj.editType = editType;
            jsonObj.seq = seq;
            
            jsonObj.name =         $("#jqGrid").getCell(checkData[i], "name");  
            jsonObj.phone =     $("#jqGrid").getCell(checkData[i], "phone"); 
            jsonObj.address =     $("#jqGrid").getCell(checkData[i], "address");
            jsonObj.etcc =         $("#jqGrid").getCell(checkData[i], "etcc");
            jsonObj.gender =     $("#jqGrid").getCell(checkData[i], "gender");
            
            jsonArray1[iCnt] = jsonObj; //배열에 json 넣는다 
            
            iCnt++;
        }
    
        var param1 = JSON.stringify(jsonArray1);
        
        return param1;
    },

주석처리 부분을 보면 이해할수 있다.

31line 에서 seq를 볼수있는데 seq는

그리드의 id로 아래의 빨간 부분이다.

53line 에서 param1에 만들어진 이 배열을

stringify 한다. stringify 는 js객체를 json형태의

문자열로 변환한다. 이를 이용해 js객체를

브라우저 에서 다른 앱으로 전송 가능하다

JSON.parse()는 json객체를 브라우저가 사용가능한

js객체로 변환한다. 

selectData를 호출한 쪽은 saveData이다. this.selectData('save')의 리턴값으로

param1을 넣는다

이제 deleteData를 만들자

간단하게 만들어줄수 있다.

deleteData : function() {
        
        var param1 = this.selectData('del');
        
        this.ajaxFn(param1, '삭제');
    },

이제 컨트롤러를 보자.

@RequestMapping(value = "/saveJqgrid.do")    
    public @ResponseBody String saveJqgrid(@RequestParam String param1) throws Exception {
 
        String result = "";
        
        try {
            param1 = param1.replaceAll(""", "\"");
            
            JSONArray jsonArray = new JSONArray(param1);
            
            jqgridService.saveJqgridTx(jsonArray);

            result = "SUCCESS";

        } catch (Exception e) {
            
            result = "FAIL";
        }

        return result;
    }

@ResponseBody는 @RequestParam의 param1이 json이기

때문에 설정해줬다. jackson라이브러리를

메이븐에 넣어서 할 수 있지만

스프링 4.0부터는 기본적으로 jackson라이브러리가

포함되어 있다. 그래서 기존의 jackson라이브러리를 메이븐에

추가해주는 작업을 하지 않아도 된다.

4.0부터는 @RestController를 사용할수 있다 @Responsebody를 안써도

알아서 json방식으로 파싱된다.

result 변수는 스크립트쪽에 넣어줄 문자열이다

jqgridService.saveJqgridTx(jsonArray)에서 Tx는 트랜잭션을 담당한다.

서비스쪽에 void saveBrandTx(JSONArray jsonArray) throws Exception;

있어야한다. 물론 임플과 맵퍼에도 존재해야한다

@Override
    public void saveJqgridTx(JSONArray jsonArray) throws Exception {
 
        int iLength1 = jsonArray.length();
        
        try {
            
            for(int i = 0; i < iLength1; i++) {
                
                JSONObject jsonObject = jsonArray.getJSONObject(i);
 
                Map<String, Object> param = JsonUtil.JsonToMap(jsonObject.toString());
                
                if("I".equals(param.get("editType"))) {
                    
                    jqgridMapper.insertJqgridList(param);
                }else if("D".equals(param.get("editType"))) {
                    
                    jqgridMapper.deleteJqgridList(param);
                }
            }
        } catch (Exception ex) {
            
            throw ex;
        }
    }

임플쪽에서 위처럼 jsonArray의 길이를 구하고

for문을 돌린다. json배열에서 jsonObject들을 하나씩 뽑는다

12line은 sql에서 parametertype이 map 이기 떄문에

json을 맵으로 변환시켜준다. 

다음 sql쿼리문을 보자

<insert id="insertJqgridList" parameterType="map">
    <selectKey resultType="String" keyProperty="seq" order="BEFORE">
        SELECT NVL(MAX(SEQ),0)+1    AS seqNo
        FROM jqgrid_start
    </selectKey>
        INSERT INTO jqgrid_start
                (SEQ
                 ,NAME
                 ,PHONE
                 ,ADDRESS
                 ,ETCC
                 ,GENDER)
        VALUES
        (#{seq},
        #{name},
        #{phone},
        #{address},
        #{etcc},
        #{gender})
    </insert>

parameterType이 map 이다. 다음 selectKey 라는

태그가 생겼다 keyProperty가 생겼는데 안쪽의

쿼리를 수행하고 저 이름으로 담겠다라는 뜻이다.

타입은 string 이고 order는 before인데 이것은 밑의 쿼리보다

먼저 수행되어야 하기때문에 before를 설정한것이다.

3line NVL은 max(seq)가 null이면 (초기상태)

0으로 설정하라는 것이다 여기다가 1을 더해야 다음 seq가

구해질 것이다 max최댓값으로 끝번호을 찾아서 1을 더한다.

삭제 쿼리이다. seq를 delete 시키면된다