jqGrid에서 rowspan 하는 방법 - cellattr, gridComplete

 

 

 

방법1. cellattr 사용

• cellattr은 특정 셀(td)에 속성을 추가할 때 사용
•  jqGrid가 테이블을 렌더링할 때 개별적으로 td를 생성하기 때문에 직접적으로 rowspan을 부여하는 것은 어려우나, colModel에 cellattr을 설정하여 동적으로 속성을 부여할 수 있다.

 

방법2. gridComplete 사용

• 그리드가 렌더링된 후 실행되는 이벤트

 

 

 

 

병합 전

 

 

 

 

병합 후

 

 

 

---

 

 

 

 

 

 

cellattr - 2줄 병합하기

colModel: [
    {
        name: 'chk', align: 'center', hidden: false, width: 50, 
        edittype: 'checkbox', formatter: 'checkbox', 
        editoptions: { value: '1:0', defaultValue: '0' },
        cellattr: function (rowId, tv, rowObject, cm, rdata) {
            if (Number(rowId) % 2 == 0) {
                return 'rowspan="2"';
            } else {
                return 'style="display: none;"';  // 두 번째 행 숨김
            }
        }
    }
]

 

 

2의 배수 단위로 묶어서, 2의 배수의 첫 번째 로우만 rowspan 한다.

 

이후 나머지 row는 숨김 처리한다.

 

배수 단위로 묶지 않고 그냥 rowspan=2를 해버리면 셀의 데이터가 오른쪽으로 한 칸씩 밀려나게 된다.

 

 

 

 

 

 

cellattr - 3줄 병합하기

colModel: [
    {
        name: 'chk', align: 'center', hidden: false, width: 50, 
        edittype: 'checkbox', formatter: 'checkbox', 
        editoptions: { value: '1:0', defaultValue: '0' },
        cellattr: function (rowId, tv, rowObject, cm, rdata) {
            if (Number(rowId) % 3 == 1) {  // 1번째 행만 rowspan 적용
                return 'rowspan="3"';
            } else {
                return 'style="display: none;"';  // 나머지 두 개 행 숨김
            }
        }
    }
]

 

 

 

 

 

 

gridComplete - 2줄 병합하기

, gridComplete : function (){     
    var $dataRow = $("tr.ui-widget-content.jqgrow.ui-row-ltr");

    $dataRow.each(function (iRow) {
        var $tdElements = $(this).find("td");

        if (iRow % 2 == 0) {
            $tdElements.eq(0).attr("rowspan", "2");	// 첫 번째 row 체크박스
        } else {
            $tdElements.eq(0).hide();	// 나머지 체크박스 숨김
        }
    });
}

 

$("tr.ui-widget-content.jqgrow.ui-row-ltr")

• jqGrid에서 실제 데이터를 표시하는 tr 태그(즉, 데이터 행들)를 선택
• jqgrow 클래스는 jqGrid에서 각 데이터 행에 적용되는 기본 클래스

 

(this).find("td")는 현재 행(tr)의 모든 td(셀)를 가져온다.