메뉴 DB화 하기(2)

이제 저번포스팅에 이어서

본격적으로 DB에서 메뉴를 불러오자

먼저 jsp에서 스크립트단에 ajaxCl 이라는 변수를 만들고

그안에 프로퍼티를 만들어주자

var ajaxCl = {
        
        ajaxCallFn : function(options) {
            
            var that = this;
            
            var settings = {
                    url : "mainMenuList.do",
                    FCGubun : "F",
                    
            }
            
            settings = $.extend({}, settings, options);

5line that 값에 this를 주는데 that 에 ajaxCl을 준것이다

다음 settings 라는 변수에 url 과 FCGubun을 저장했다

13line은 jQuery에서 사용하는데

두개 이상의 객체를 합칠때 쓴다.

자세한건 링크에서 확인할수있다.

http://api.jquery.com/jQuery.extend/

다음 위와같이 ajax를 사용하는데 POST방식으로

ajaxcl에서 만든 url인 mainMenuList.do로 값을

보낸다는 뜻이다.

beforeSend는 ajax로 많은 양의 데이터를 불러오다보면

가끔 페이지 로딩은 끝났는데 데이터가 안보일 때가 있다.

로딩중 화면이 보인다면 페이지 로딩이 끝나지

않았음을 알수 있다.이때 사용하는것이 beforeSend이며

success 이전에 데이터가 들어갈 자리에 로딩화면 gif 같은

파일을 하나 넣어줄수 있다.

다음 success 이다.

success    : function(result) {
                       
                    var jsonRes = JSON.parse(result); 
                          
                    $.each(jsonRes, function (i, item) {
                        
                        if(item.collapseYn == 'Y') {
                            
                              var strSubMenu = "";
                                         
                              strSubMenu = that.ajaxSubCallFn({url: "subMenuList.do", FCGubun: "C", menuId: item.menuId});
                                 
                              var strMenu2 = "";
                              
                              strMenu2 += '<li prop="menu">'
                                         + '<a data-toggle="collapse" href="#' +  item.menuUrl + '">'
                                            + '<i class="' + item.menuClass + '"></i>'
                                            + '<p>' + item.menuNm 
                                               + '<b class="caret"></b>'
                                            + '</p>'
                                         + '</a>'
                                         + '<div class="collapse" id="'+item.menuUrl+'">'
                                            + '<ul class="nav" id="subMenu' + item.menuId +'">'
                                               + strSubMenu
                                              + '</ul>'
                                         + '</div>'
                                        + '</li>';
                                                      
                               $("#targetMenu").append(strMenu2);
                            
                        } else {
                            var strMenu = "";
                            
                            strMenu += '<li prop="menu" class="active" id="menu' + item.menuId + '">'
                                            + '<a href="#" onclick="javascript:left.pageSubmitFn(\'menu' + item.menuId + '\',\'' + item.menuUrl + '\')">'
                                                + '<i class="' + item.menuClass + '"></i>'
                                                    + '<p>' + item.menuNm + '</p>'
                                            + '</a>'
                                    + '</li>';
                                        
                         $("#targetMenu").append(strMenu);
                         
                        }                                                                                                                                          
                    });
                },

3line에서 json 스트링을 json으로 파싱한다

5line에서 i 는 0,1,2,3,4,... 의 값이 들어가고 item에는

한 row가 들어가진다

다음 11line은 서브메뉴를 가져온다.

13line 은 하위메뉴를 가져오기 위한 로직들이다.

15line 부터는 아래에서의 소스들을 위처럼

직접 넣어준다고 생각하면 된다. 

+++++++++++++ 2018/09/10 이미지 수정 +++++++++++++

 

다음 서브메뉴를 위한 ajaxSubCallFn을 만들어준다

방법은 위에 먼저 했던 방법과 같다.

ajaxSubCallFn : function(options) {
 
            var settings = {
 
                url : "mainMenuList.do",
                FCGubun : "F",
                menuId: ""
            }
 
            settings = $.extend({}, settings, options);
 
            var subMenu = "";
 
            $.ajax({
 
                    type       : "POST",
                    url        : settings.url,
                    data       : {"menuId" : settings.menuId},
                    async      : false,
                    beforeSend : function(xhr) {        
 
                    },
                    success    : function(result) {
                           var jsonRes = JSON.parse(result); 
                           
                           $.each(jsonRes, function (i, item) {
                                subMenu += '<li id="menu' + item.menuId + '">'
                                               + '<a href="#" onclick="javascript:left.pageSubmitFn(\'menu' + item.menuId + '\',\'' + item.menuUrl + '\')">'
                                                 + item.menuNm
                                             + '</a>'
                                          + '</li>';
                                
                           });
                    },
                    error      : function() {
                    
                        alert("sub menu 조회시 Error 발생");
                    }
                }); 
            
                return subMenu;
            }

위 소스와 아래의 이미지를 비교하여 쉽게 이해할수 있을것이다.

다음 컨트롤러를 보자

사용에 필요한 JsonUtil 클래시는 cmmn에 넣자.

JsonUtil.java

@RequestMapping(value = "/mainMenuList.do")
       public void mainMenuList(HttpServletResponse response) throws Exception {
    
          PrintWriter out = null;
          
          response.setCharacterEncoding("UTF-8");
    
          List<?> menuList = leftService.selectMainMenu();
                
          out = response.getWriter();
    
          out.write(JsonUtil.ListToJson(menuList));
       }
    
    @RequestMapping(value = "/subMenuList.do")
       public void subMenuList(HttpServletResponse response, @RequestParam String menuId) throws Exception {
    
          PrintWriter out = null;
          
          response.setCharacterEncoding("UTF-8");
    
          List<?> menuList = leftService.selectSubMenu(menuId);
                
          out = response.getWriter();
    
          out.write(JsonUtil.ListToJson(menuList));
       }

먼저 위에서 사용한 ajax의 url 값인

mainMenuList 와 subMenuList를 만들어준다.

8line에서 List<?>는 어떤 타입이든 허용한다는 의미로

생각하면 되겠다.

그리고 서비스와 임플 맵퍼는 알아서 채우자.

<select id ="selectMainMenu" resultType="egovMap">
      SELECT   MENU_ID 
           , MENU_NM
           , MENU_URL
           , MENU_CLASS
           , COLLAPSE_YN
           , USE_YN
           , SORT_NO
           , DEPTH
           , PARENT_ID
      FROM DB_MENU
      WHERE 1 =1 
         AND USE_YN ='Y'
         AND DEPTH = 1
      ORDER BY SORT_NO
   </select>
   
   <select id ="selectSubMenu" parameterType="String" resultType="egovMap">
      SELECT   MENU_ID 
           , MENU_NM
           , MENU_URL
           , MENU_CLASS
           , COLLAPSE_YN
           , USE_YN
           , SORT_NO
           , DEPTH
           , PARENT_ID
      FROM DB_MENU
      WHERE 1 =1 
         AND USE_YN ='Y'
         AND PARENT_ID = #{_parameter}
      ORDER BY SORT_NO
   </select>

마지막으로 SQL쿼리문이다

DB에서 만든 컬럼 값들을 모두 SELECT한다

다음 14line에서 DEPTH=1 을 줘서

상위 메뉴를 가져온다

31line 에서 #{_parameter}값에는

mapper에서 매개변수로받은 menuId

값이 들어가게 됩니다.