아래는 셀렉트박스에서 선택한 값에 따라 헤더의 값이 바뀌는 예제이다.
만약 셀렉트박스에서 'A제품'을 선택하면 헤더에도 'A제품'이 표시된다.
소스 보기
$("#grid").jqGrid({ sortable: true, datatype: 'local', colNames:['날짜','A Col', 'B Col', 'C Col'], colModel:[ {name:'date', index:'date', width:210, align:"center", formatter:'date', sorttype:'text', formatoptions:{srcformat:"Y-m-d", newformat:"Y-m-d"}}, {name:'ACol', index:'ACol', width:205, align:"right", sorttype:'int', sortable:true, formatter:'integer', formatoptions:{thousandsSeparator:","}}, {name:'BCol', index:'BCol', width:205, align:"right", sorttype:'int', sortable:true, formatter:'integer', formatoptions:{thousandsSeparator:","}}, {name:'CCol', index:'CCol', width:205, align:"right", sorttype:'int', sortable:true, formatter:'integer', summaryType:'sum', formatoptions:{thousandsSeparator:","}} ], rowNum:100, sortname: 'date', sortorder: "desc", height: 'auto', viewrecords: true, caption: '-', loadonce : true, loadui: false, loadComplete : function(){ } }); $("#grid").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'ACol', numberOfColumns: 3, titleText: productName } ] }); var productName = ""; $("#productType").bind("change", function() { $("#productType option:selected").each(function () { productName = $(this).text(); var colModel = $("#grid").jqGrid('getGridParam', 'colModel'); // 컬럼명을 배열형태로 가져온다. $("#grid").jqGrid("setLabel", colModel[1]['name'], productName); // setLabel 함수로 1번째 컬럼명을 productName로 변경 $("#grid").jqGrid('destroyGroupHeader'); $("#grid").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'ACol', numberOfColumns: 3, titleText: crateName } ] }); }); }); $("#searchButton").bind("click", function() { if($('#startDate').val() == '' || $('#endDate').val() == ''){ alertShow(AlertType.NO_SEARCHDATE); return false; } var searchDate= $('#searchDate').val().replace(/-/gi,''); var productCode = $("#productType").val(); $("#grid").jqGrid('setGridParam',{ datatype:'json', url:"${pageContext.request.contextPath}/ajax/product/product.json?searchDate="+searchDate +"&productCode=" + productCode }).trigger("reloadGrid"); });
. .(생략) . </head> <body> <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> </select>
. .(생략) . <table id="grid" style="width:100%;"></table> <div id="pager"></div>
.
.
.
( 참조사이트(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 }
]
});
});
});
'jqGrid > 소스코드' 카테고리의 다른 글
| jqGrid caption font size 변경 하기 (0) | 2015.11.27 |
|---|---|
| [jQuery] jqGrid - colModel에 cellattr 옵션을 이용한 Row Style 변경하기 (셀병합,색상,폰트) (0) | 2015.11.27 |
| jqGrid Header(column) Setting, colspan 컬럼 합치기, 다중컬럼 (0) | 2015.11.27 |
| jqgrid rowspan / row합치기 / col합치기 / column 합치기 / rowspan / colspan (1) | 2015.11.27 |
| [JavaScript] jqgrid 이용한 그리드 활용하기 (0) | 2015.11.27 |
| jqgrid 자주 쓰는 것들 (0) | 2015.11.03 |
| [jQuery] jqGrid - loadColplete 옵션을 이용한 특정 Row Color 변경하기 (0) | 2015.10.22 |
| [jQuery] jqGrid - colModel에 cellattr 옵션을 이용한 Row Style 변경하기 (셀병합,색상,폰트) (0) | 2015.10.22 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!