[jQuery] vo리스트 가져와서 jsp에서 rowspan을 조정하여 테이블 열 합치기

[Controller]

@RequestMapping(value = "/List.do")
public @ResponseBody Map<String, Object> ajaxSelectList(@ModelAttribute("vo") votype vo,
HttpServletRequest request, HttpServletResponse response, ModelMap model) {
	Map<String, Object> result = new HashMap<String, Object>();
    try {

        result.put("fList", service.selectList(vo));
        System.out.println(result.toString());
    } catch(Exception e) {
        e.printStackTrace();
        result.put("fList", new ArrayList<votype>());
    }
    return result; 
}

보통 table에서 td로 뿌려줄때

자바단에서 

arraylist<vo> vo list로 뭉때기로 가져온다.

바로 저렇게..

 

그렇게 하면...

fList 안에 db에서 가져온 vo리스트 정보가 들어있다.

 

[jsp]

			
            
 function fnSelectFilterList() {
	$.ajax({
		url: "/List.do",
		type: 'POST',
		data: {
			"voName": $("#param").val()
		},
		success: function(data){
			var fList = data.fList;
			// 테이블 초기화
			$("#seList").html('');
			var draw = '';
			for(var i in fList) {
				
				draw +=	'<tr>';
				draw +=		'<td class="row01">'+fList[i].vo01+'</td>';
				draw +=		'<td class="row02">'+fList[i].vo02+'</td>';
				draw +=		'<td class="row03">'+fList[i].vo03+'</td>';
                draw +=		'<td class="row04">'+fList[i].vo04+'</td>';
				draw += '</tr>';
			}
			$("#seList").append(draw);

		}   
	});
}

반복문을 사용하여

fList 안에 있는 vo를 하나씩 빼서 table로 만들어준다.

 

 

이렇게 하면

 

과일	딸기	a브랜드	한국
과일	딸기	a브랜드	미국
채소	상추	b브랜드	태국

 

이런식으로 만들어질것이다.

 

 

여기서 첫번째 '과일'에 맞춰서 rowspan을 바꾸고 싶을때

자바스크립트로 고쳐주면된다.

 

 

function fnRows(){
	
	$(".row01").each(function() {
    	//row01의 text값이 같은 놈을 변수선언한다.
		var row01 = $(".row01:contains('" + $(this).text() + "')");
		var row02 = row01.siblings(".row02");
		var row03 = row01.siblings(".row03");
		
        //똑같은 값이 1개이상일 경우
		if(row01.length > 1) {
			//같은 놈끼리 rowspan 속성이 합쳐질수 있도록 length 설정한다.
			row01.eq(0).attr("rowspan", row01.length);
			row02.eq(0).attr("rowspan", row01.length);
			row03.eq(0).attr("rowspan", row01.length);
            //첫번째 칸이 아닌놈을 삭제한다.
			row01.not(":eq(0)").remove();
			row02.not(":eq(0)").remove();
			row03.not(":eq(0)").remove();
			
		}
	});
	
}

이런식으로 변환된다.

 

row01                                      row02                                       row03                                      row04

과일	딸기	a브랜드	한국
			미국
채소	상추	b브랜드	태국

 

자바스크립트에 따라

row01.length에 맞춰서 rowspan을 변경했다~!

** 주의사항 : 만약 깨질경우, 쿼리에서 가져올때 order by가 있는지 꼭! 확인한다.

order by 가 없을경우 정렬이 되지않아서 엉뚱한 것끼리 합쳐질 수도 있기 때문에

반드시 list를 가져올때 data가 정렬되어있는지 확인해줄것!

왜 깨지지? 하고 찾아봤는데 정렬이 안되어있었다...

 

끝.

 

 

+내용추가

 

이 자바스크립트의 치명적인 오류가있다

바로 contains 때문에 만약에 데이터가 겹칠경우 깨진다....(!!!!)

왜 깨지지하고 찾았는데.. ㅜㅜcontains때문이었다. text()가 포함되어있는것을 찾기 때문이다.

저 함수 말고 제대로 된것을 찾아왔다.

 

$.fn.rowspan = function(colIdx, isStats) {       
	return this.each(function(){      
		var that;     
		$('tr', this).each(function(row) {      
			$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
				
				if ($(this).html() == $(that).html()
					&& (!isStats 
							|| isStats && $(this).prev().html() == $(that).prev().html()
							)
					) {            
					rowspan = $(that).attr("rowspan") || 1;
					rowspan = Number(rowspan)+1;
					$(that).attr("rowspan",rowspan);
					$(this).hide();
				} else {            
					that = this;         
				}          
				that = (that == null) ? this : that;      
			});     
		});    
	});  
};

이 함수를 이용한다.

 

 

그리고 사용하는법은

 

$('#테이블아이디').rowspan(0);

$('#테이블아이디').rowspan(1);

$('#테이블아이디').rowspan(2);

$('#테이블아이디').rowspan(3);

 

 

이런식으로 사용하면된다.

저 0,1,2,3의 숫자는 바로 열 숫자이다.

테이블안의 합치고 싶은 열을 안에 넣어주면 된다!

 

 

해결완료하였다..ㅎㅎ