Header Style

특정 컬럼에 스타일을 지정합니다.


요약

특정 헤더에 스타일을 지정합니다.

입력값

Number : 스타일 변경할 열

String : 어떤 스타일을 지정할지 설정

String : fixed - 캡션 부분만 변경 / data - 데이터 부분만 변경 / all - 캡션과 데이터부분 모두 변경



예) datagrid1.setColStyles(0, "background-color:orange", "fixed");

상세설명

Caption 영역에 스타일을 변경합니다. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java"   contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
	<meta content="IE=9" http-equiv="X-UA-Compatible">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SoftBowl SBGrid Example</title>
	<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json-minified.js"></script>
	<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json2.js"></script>
		
	<script type="text/javascript" src="../../kr/co/softbowl/SBGrid.js"></script>
	
	<script type="text/javascript" src="../../js/DATA_JSON_POI_100.js"></script>
		
	<script type="text/javascript">			
		SBGrid.DEF.DOMAIN = "../../";
	<script>
	
	<script type="text/javascript">
		var datagrid1;
		
		$(document).ready(function(){
			__createElements();
		});
		
		function __createElements (){
			var GridInitInfo = {
							"strParentId" : "sbGridArea",
							"strId": "datagrid1",
							"strCaption": "Longitude^Latitude^Name^City Code^classification",
							"strColWidth": "150, 150, 300, 150, 150",
							"strDataHeight":"29",
							"strJsonRef": "grid_data",
							"strStyle": "width:100%; height:480px; ",
							
						 };
			var SBGridColumnInitInfo =	[
								{ "id": "col1", "type": "input", "ref": "x", "style" : "text-align:center" },
								{ "id": "col2", "type": "input", "ref": "y", "style" : "text-align:center" },
								{ "id": "col3", "type": "input", "ref": "name" },
								{ "id": "col4", "type": "combo", "ref": "city", "strJsonNodeSet": "combo_city", "strLabelRef": "label", "strValueRef": "value" },
								{ "id": "col5", "type": "combo", "ref": "code", "strJsonNodeSet": "combo_code", "strLabelRef": "label", "strValueRef": "value", "style" : "text-align:center" }
							];
			if(SBGrid.getGrid('datagrid1') != null){
				datagrid1.destroy();
				datagrid1 = null;				
			}
			
			datagrid1 = createSBGrid(GridInitInfo,SBGridColumnInitInfo);
			
		    
			
			
		}	
		
		function createSBGrid(SBGridInitInfo, SBGridColumnInitInfo){
			var objJSONdata = new Object();
			objJSONdata.objSBGridInitInfo = SBGridInitInfo;
			objJSONdata.arSBGridColumnInitInfo = SBGridColumnInitInfo;
			return SBGrid.DEF.createSBGrid(objJSONdata);
		};
		function setColStyles1(){
			datagrid1.setColStyles(0, "background-color:orange;", "fixed");
		}		
		function setColStyles2(){
			datagrid1.setColStyles(2, "font-color:red;", "fixed");
		};
                                    
        function setColStyles3() {
            datagrid1.setCellStyle('background-color', 0, 0, 0, datagrid1.getCols(), '#696969');
            datagrid1.setCellStyle('color', 0, 0, 0, datagrid1.getCols(), '#ffffff');
            datagrid1.setCellStyle('font-weight', 0, 0, 0, datagrid1.getCols(), 'bold');
        };
		
	</script>
</head>
<body>

		
		<div id="button_group">
			<input type="button" class="sbgrid_demo_button" style="width:33%;height:30px;" value="Caption 0번째 열에 'background-color' : 'orange' 설정" onclick="setColStyles1();" />
			<input type="button" class="sbgrid_demo_button" style="width:33%;height:30px;" value="Caption 2번째 열에 'color' : 'red' 설정" onclick="setColStyles2();" />
			<input type="button" class="sbgrid_demo_button" style="width:33%;height:30px;" value="Caption 전체 변경" onclick="setColStyles3();" />
		</div>
		<div id="sbGridArea"></div>
			
</body>
</html>