jqGrid] 동적으로 그리드 나타내기

아래처럼 main그리드가 존재한다. 

맨 오른쪽 버튼을 누를 때, 그 행에 대한 서브그리드가 나타나도록 할 것이다.

이 것을 구현하고 실행해보면, 처음엔 아래에 서브그리드가 잘 나타나지만 

다른 버튼을 누르면 동작하지 않는다.

그 이유는 jqGrid 특성상 그리드가 한번 그려지고 나면 더이상 새로 그려지지 않기 때문이다.

그래서 꼼수를 써야하는데, 방법은 아래와 같다.

(2번과 3번이 핵심)

1. main Grid의 complete 함수 추가

메인그리드가 다 그려지고 난 뒤, 

서브그리드를 호출할 버튼을 만드는 것이다.

gridComplete:function(){ var ids = jQuery("#t").jqGrid('getDataIDs'); for(var i=0; i<ids.length; i++){ var id = ids[i]; btn = "<input name=\"btn\" style='height:22px; width:22px;' type='button' onclick=\"childGrid("+id+")\")\">"; jQuery("#t").jqgrid('setRowData', ids[i], {select:btn}); } }

2. 템플릿 영역 (테이블)

<!-- 첫번째 테이블 --> <table id="t"></table> <div id="pager"></div> <br/><br/> <!-- 두번째 테이블 --> <div id="t1area"> <table id="t1"></table> </div> <div id="pager1"></div>

동적으로 그려질 테이블 영역을 div로 한번 감싼다.

이미 한번 그려진 영역에는 Grid가 다시 그려지지 않으므로

div 속에 서브그리드를 넣고, 

새로 그려야할 때 div에 있는 내용을 모두 비워버리고(empty함수), 다시 그리기 위함이다.

3. 서브그리드가 호출될 때

function childGrid(id){ $("#t1area").empty();   // 두번째 테이블을 감싸고있는 div의 내용을 비운다. var a = $("<table>").attr("id", "#t1");  // div(t1area) 안에 테이블을 새로 그리기 위함..  $("#t1area").append(a); a.jqGrid({ url:'/user/jsonMapper?id='+id, // id를 파라미터로 보내서 select문에서 id가 같은 데이터를 찾아온다 datatype:'json', rowNum:10,       // 아래 내용은 생략! }); }