아래는 셀렉트박스에서 선택한 값에 따라 헤더의 값이 바뀌는 예제이다.
만약 셀렉트박스에서 'A제품'을 선택하면 헤더에도 'A제품'이 표시된다.
( 참조사이트(jqGrid Wiki): http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar )
* 헤더 병합
1. 헤더 만들기
ex) colNames:['날짜','A Co;', 'B Col', 'C Col']
2. 병합할 헤더 지정하기
ex) $("#grid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{ startColumnName: 'ACol', numberOfColumns: 3, titleText: crateName }
]
});
=> startColumnName: 병합할 시작 컬럼명
numberOfColumns: 병합할 컬럼 수
titleText: 병합될 컬럼명 ( titleText : "A 제품" 이렇게 값을 직접 텍스트로 줘도 되고, 위처럼 문자형 데이터(변수)로 줘도 됨)
* 셀렉트박스 선택된 값에 따라 헤더명 바꾸기
1. 셀렉트박스 만들기
<select id="productType" class="text ui-widget-content ui-corner-all">
<c:forEach items="${productList}" var="productList">
<option value="${productList.productCode}">${productList.productName}</option>
</c:forEach>
<!--
<option value="productA">A 제품</option>
<option value="productB">B 제품</option>
<option value="productC">C 제품</option>
-->
</select>
2. 헤더명 바꾸기
var productName = "";
$("#productType").bind("change", function() {
$("#productType option:selected").each(function () {
productName = $(this).text(); //선택된 셀렉트의 텍스트명 저장(A 제품, B제품, C제품)
var colModel = $("#grid").jqGrid('getGridParam', 'colModel');
// ↑기존 헤더컬럼명을 배열형태로 가져온다
$("#grid").jqGrid("setLabel", colModel[1]['name'], productName);
// ↑ setLabel 함수로 [1]번째 컬럼명을 productName로 변경
/*여기서 colModel[0]['name'] 은 '날짜'이고,
colModel[2]['name']은 'A Col',
colModel[3]['name']은 'B Col',
colModel[4]['name']은 'C Col' 이다.
*/
$("#grid").jqGrid('destroyGroupHeader'); //헤더 삭제(초기화 같은..)
//다시 병합할 헤더를 세팅해 준다.
$("#grid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'ACol', numberOfColumns: 3, titleText: productName }
]
});
});
});
'Language & Library > jqGrid' 카테고리의 다른 글
| jqGrid 헤더 클릭 시 정렬 (jqGrid header sort) (0) | 2013.12.31 |
|---|---|
| jqGrid 날짜(date: yyyymmdd) 관련 (0) | 2013.12.30 |
| jqGrid footer 그리고 footer sum 예제 (1) | 2013.12.26 |
| jqGrid 설정 (0) | 2013.12.05 |
| jqGrid 참조 사이트 정리 (0) | 2013.12.04 |
