jqGrid에서 멀티 헤더(Multi Header)을 만들어 보자!!

               -----------------------
Level 1 - >    | Application         |
               -----------------------  Level 2 - >    |Code    | Name       |  
               -----------------------
               | 0002827| Mobile Phone1
               | 0202827| Mobile Phone2
               | 0042827| Mobile Phon3e
               | 0005827| Mobile Phone4
               | 0002627| Mobile Phon5e
               | 0002877| Mobile Phone6
               | 0002828| Mobile Phone7

2011-10-27 추가 사항
jqGrid 4.2.0에서 공식적으로 HeaderGrouping을 지원
구버전을 계속 쓰실 부분만 참고하시기 바랍니다.

위와 같은 칼럼 헤더를 만들려는 jqGird에서는 아직 지원하질 않는다.

그래서 구글링을 해보니 역시 세상에는 같은 고민을 하는 사람들이 많다!!

멀티 칼럼을 만들려고 보니 이미 stackoverflow에 질문이 등록되어 있었다.

거기에 Oleg가 해결법까지 이미 등록.

여기서 찾아낸 소스는 아래와 같다.

Level1이 Colspan인 경우
http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridHeaders2.htm


mygrid = $("#list"),
colModel, i, cmi, skip = 0, ths, $tr;

colModel = mygrid[0].p.colModel;
ths = mygrid[0].grid.headers;
var gview = mygrid.closest("div.ui-jqgrid-view");
var thead = gview.find("table.ui-jqgrid-htable > thead");
mygrid.prepend(thead);
$tr = $("<tr>");
for(i=0;i<colModel.length;i++) {
    cmi = colModel[i];
    if (cmi.name !== 'amount') {
        var width = ths[i].width;
        if (skip === 0) {
            $(ths[i].el).attr("rowspan", "2");
        } else {
        $tr.append(ths[i].el);
            skip--;
        }
    } else {
        var colHeader = $('<th class="ui-state-default ui-th-ltr" colspan="3"                 role="columnheader">Information about the Price</th>');
        colHeader.width(ths[i].width + ths[i+1].width + ths[i+2].width+10); // 2*
        $(ths[i].el).before(colHeader);
        $tr.append(ths[i].el);
        skip = 2;
    }
}
var theadInTable = mygrid.children("thead");
theadInTable.append($tr[0]);
gview.find("table.ui-jqgrid-htable").append(theadInTable);

Level2가 Colspan인 경우
http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridHeaders0.htm



mygrid = $("#list"),
colModel, i, cmi, tr = "<tr>", skip = 0, ths;

colModel = mygrid[0].p.colModel;
ths = mygrid[0].grid.headers;
    for(i=0;i<colModel.length;i++) {
        cmi = colModel[i];
        if (cmi.name !== 'amount') {
            if (skip === 0) {
                $(ths[i].el).attr("rowspan", "2");
            } else {
                skip--;
            }
        } else {
            tr += '<th class="ui-state-default ui-th-ltr" colspan="3"         role="columnheader">Information about the Price</th>';
            skip = 2; // because we make colspan="3" the next 2 columns should not receive the rowspan="2" attribute
        }
    }
tr += "</tr>";
mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr);