jquery table merge(rowspan, colspan)

그리드에 대한 작업을 하다보면 같은 값에 대한 머지를 요청하는 곳이 많습니다.
저도 예전에 이런 일이 있어 폭풍 구글링을 하여 해결하였는데, 요구사항이 동일한 값에대한 무조건적인 머지가 아닌 앞의 값(parent key)에 대한 머지로 요구사항을 변경하였던 것입니다.ㅠ

이럴때는 어떻게 할까요? 하여 오늘은 jquery table merge(rowspan, colspan)에 관해서 알아볼까 합니다.




table merge로 인터넷을 검색하면 아래와 같이 무조건 머지에 대한 답이 나옵니다.

$.fn.tableRowspan = 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);

     // do your action for the colspan cell here         
     $(this).hide();

     //$(this).remove();
     // do your action for the old cell here
    } else {
     that = this;
    }

    // set the that if not already set
    that = (that == null) ? this : that;
   });
  });
 });
};

함수를 만들었으면 사용을 해야 하겠지요. 사용 방법은 아래와 같습니다.
$('#gridID').rowspan(1); 그리드의 아이디를 호출하여 함수를 붙여주기만 하면 됩니다.

이것만으로는 현업의 요구사항을 만족시키지 못합니다. 그래서 아래와 같이 바꿨습니다.




function fnGridMerger() {
var Year_nextThat;
var Year_mergeThat;
var Year_rowspan = 1;
var Year_nextValue;
var Year_thisValue;

var UserId_nextThat;
var UserId_mergeThat;
var UserId_rowspan = 1;
var UserId_nextValue;
var UserId_thisValue;

var Per_nextThat;
var Per_mergeThat;
var Per_rowspan = 1;
var Per_nextValue;
var Per_thisValue;

$('#gvList').find("tr").each(function () {
$(this).next().find("td").each(function () {
var id = $(this).attr("id");

// 년도
if (id == "tdYear") {
Year_nextValue = $(this).html();

Year_nextThat = $(this);
}

// 담당자
if (id == "tdUserId") {
UserId_nextValue = $(this).html();

UserId_nextThat = $(this);
}

// 달성율
if (id == "tdPer") {
Per_nextValue = $(this).html();

Per_nextThat = $(this);
}
});

$(this).find("td").each(function () {
var id = $(this).attr("id");

// 년도
if (id == "tdYear") {
Year_thisValue = $(this).html();

if ($(this).is(":visible")) {
if (Year_nextValue == Year_thisValue) {
Year_rowspan += 1;

Year_mergeThat = $(this);

$(Year_nextThat).hide();
}
else {
Year_mergeThat = null;
Year_rowspan = 1;
}
}
else {
if (Year_nextValue == Year_thisValue) {
Year_rowspan += 1;

$(Year_mergeThat).attr("rowspan", Year_rowspan - 1);

$(Year_nextThat).hide();
}
else {
$(Year_mergeThat).attr("rowspan", Year_rowspan);
Year_mergeThat = null;
Year_rowspan = 1;
}
}
}

// 영업담당자
if (id == "tdUserId") {
UserId_thisValue = $(this).html();

if ($(this).is(":visible")) {
if (UserId_nextValue == UserId_thisValue && Year_nextValue == Year_thisValue) {
UserId_rowspan += 1;

UserId_mergeThat = $(this);

$(UserId_nextThat).hide();
}
else {
UserId_mergeThat = null;
UserId_rowspan = 1;
}
}
else {
if (UserId_nextValue == UserId_thisValue && Year_nextValue == Year_thisValue) {
UserId_rowspan += 1;

$(UserId_mergeThat).attr("rowspan", UserId_rowspan - 1);

$(UserId_nextThat).hide();
}
else {
$(UserId_mergeThat).attr("rowspan", UserId_rowspan);
UserId_mergeThat = null;
UserId_rowspan = 1;
}
}
}

// 달성율
if (id == "tdPer") {
Per_thisValue = $(this).html();

if ($(this).is(":visible")) {
if (Per_nextValue == Per_thisValue && UserId_nextValue == UserId_thisValue && Year_nextValue == Year_thisValue) {
Per_rowspan += 1;

Per_mergeThat = $(this);

$(Per_nextThat).hide();
}
else {
Per_mergeThat = null;
Per_rowspan = 1;
}
}
else {
if (Per_nextValue == Per_thisValue && UserId_nextValue == UserId_thisValue && Year_nextValue == Year_thisValue) {
Per_rowspan += 1;

$(Per_mergeThat).attr("rowspan", Per_rowspan - 1);

$(Per_nextThat).hide();
}
else {
$(Per_mergeThat).attr("rowspan", Per_rowspan);
Per_mergeThat = null;
Per_rowspan = 1;
}
}
}
});
});
}




앞의(parent key) 값에 해당하는 년도를 추출하고 다음으로 담당자, 다음으로 달성율을 추출하여 머지를 시키는데 같은 년도에 같은 담당자에 대한 달성율을 머지시키는 함수 입니다.

이상으로 jquery table merge(rowspan, colspan)에 대해서 알아보았습니다.
필요하신 분들에게 도움이 되었으면 좋겠네요...ㅎ