Softbowl Demo Site

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


-87.988	43.301	119 Reservoir	Milwaukee	Lake
-77.026	38.970	122nd New York Volunteer Mounment	Washington D.C.	Park
-122.681	45.253	13th Avenue City Park	Portland	Park
-77.026	38.970	150th Ohio National Guard Monument	Washington D.C.	Park
-95.195	29.540	1776 Park	Houston	Park
-90.122	30.011	17th Street Canal	New Orleans	Other
-74.034	40.206	Alberta Lake	New York City	Lake
-121.794	37.234	Albertson Park	San Francisco	Park
-112.103	33.562	Alicia Park	Phoenix	Park
-77.036	38.919	Alighieri Dan`te Statue	Washington D.C.	Park
-93.248	44.748	Alimagnet Lake	Minneapolis	Lake
-77.193	38.807	Backlick Stream Valley Park	Washington D.C.	Park
-76.996	38.954	Backus Recreation Center	Washington D.C.	Park
-71.899	41.984	Backwater Brook	Hartford	Stream
-117.310	34.182	Badger Percolation Basin	Los Angeles	Lake
-75.133	40.109	Baederwood Park	Philadelphia	Park
-74.426	40.523	Baird Field	New York City	Park
-73.114	41.275	Baird Millpond	New York City	Lake
-86.284	36.196	Baird Municipal Park	Nashville	Park
-80.088	40.407	Campbells Run	Pittsburgh	Stream
-73.809	41.170	Campfire Lake	New York City	Lake
-116.366	32.677	Campo Indian Reservation	San Diego	Other
-88.416	41.930	Campton County Forest Preserve	Chicago	Park
-121.303	38.687	Crosswoods Park	Sacramento	Park
-72.192	41.715	Crotch of the River	Hartford	Other
-71.475	41.614	Davisville Historic District	Providence	Park
-88.150	42.237	Davlins Pond	Chicago	Lake
-72.437	41.840	Gages Brook	Hartford	Stream
-87.995	42.350	Gages Lake	Chicago	Lake
-70.963	42.195	Gagnon Park	Boston	Park
-76.435	39.094	James Pond	Washington D.C.	Other
-71.841	42.553	James Pond	Boston	Lake
-75.024	40.049	James Ramp Memorial Recreation Center	Philadelphia	Park
-83.021	42.436	Lipke Playground	Detroit	Park
-88.161	42.401	Lippincott Point	Chicago	Other
-71.525	41.721	Lippitt Brook	Providence	Stream
-94.227	39.002	Minter Hill	Kansas City	Summit
-122.624	45.441	Minthorn North Natural Area	Portland	Park
-95.355	29.758	Minute Maid Park	Houston	Park
-97.121	32.744	Pirie Park	Dallas	Park
-83.789	43.038	Pirnie Creek	Detroit	Stream
-72.872	41.292	Pirot Pond	New York City	Lake
-118.785	34.398	Piru Creek	Los Angeles	Stream
-96.772	32.724	Sargent Park	Dallas	Park
-71.916	42.245	Sargent Pond	Boston	Lake
-71.127	42.320	Sargent Pond	Boston	Lake
-72.976	41.375	Sargent River	New York City	Stream
-72.712	41.602	Saw Island	Hartford	Other
-86.860	35.911	Saw Mill Creek	Nashville	Stream
-87.797	41.799	Stars and Stripes Park	Chicago	Park
-82.506	28.124	Starvation Lake	Tampa	Lake
-71.374	41.780	Starve Goat Island (historical)	Providence	Other
-94.813	39.008	Starwood Park	Kansas City	Park
-70.668	41.766	State Bogs	Boston	Other
-86.236	39.708	State Ditch	Indianapolis	Other
-88.010	43.021	State Fair Park	Milwaukee	Park
-70.679	42.607	State Fort Park	Boston	Park
-75.307	40.401	State Game Lands Number 139	Philadelphia	Park
-75.566	40.191	State Game Lands Number 234	Philadelphia	Park
-79.946	40.532	State Game Lands Number 77	Pittsburgh	Park
-71.537	43.207	State House Plaza	Boston	Park
-71.510	42.008	State Park Beach	Providence	Other
-81.716	41.391	State Road Park	Cleveland	Park
-85.825	38.290	State Run	Louisville	Stream
-72.905	41.316	State Street Bridge	New York City	Other
-87.516	41.618	State Street Commercial Historic District	Chicago	Park
-118.212	34.052	State Street Playground	Los Angeles	Park
-118.212	34.053	State Street Recreation Center	Los Angeles	Park
-72.908	41.316	State Street Triangle	New York City	Park
-74.149	40.583	Staten Island	New York City	Other
-122.438	37.763	States Playground	San Francisco	Park
-71.053	42.372	USS Cassin Young	Boston	Park
-71.057	42.372	USS Constitution	Boston	Park
-122.511	37.782	USS San Francisco Memorial	San Francisco	Park
-111.949	40.547	Utah and Salt Lake Canal	Salt Lake	Other
-111.969	40.524	Utah Lake Distributing Canal	Salt Lake	Other
-82.956	42.623	Utica Drain	Detroit	Stream
-82.604	39.696	Utica Park	Columbus	Park
-84.517	33.727	Utoy Park	Atlanta	Park
-117.832	33.739	Utt Park	Los Angeles	Park
-79.928	36.040	Uwharrie Lake	Greensboro	Lake
-71.630	42.077	Uxbridge Common District	Boston	Park
-73.845	41.030	V Everit Macy Park	New York City	Park
-71.494	42.581	V F W FIeld	Boston	Park
-98.566	29.452	V J Keefe Stadium	San Antonio	Park
-122.106	38.400	Vaca Mountains	San Francisco	Other
-121.982	38.334	Vaca Valley	San Francisco	Other
-117.236	32.774	Vacation Isle	San Diego	Other
-93.091	45.051	Vadnais Lake	Minneapolis	Lake
-117.701	34.127	Vail Park	Los Angeles	Park
-74.628	40.399	Van Horn Brook	New York City	Stream
-81.606	41.501	Van Horn Field	Cleveland	Park
-87.881	41.508	Van Horne Woods Forest Preserve	Chicago	Park
-81.611	41.031	Van Hyning Run	Cleveland	Stream
-83.228	42.171	Van Kleef Drain	Detroit	Stream
-118.318	33.989	Van Ness Playground	Los Angeles	Park
-111.877	40.751	Van Ness Tot Lot Park	Salt Lake	Park
-73.865	40.843	Van Nest Memorial Square	New York City	Park
-118.486	34.292	Van Norman Bypass Reservoir	Los Angeles	Lake
-83.411	42.705	Van Norman Lake	Detroit	Lake

Longitude	Latitude	Name	City Code	classification

Longitude

Latitude

Name

City Code

classification

요약

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

입력값

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>

Header Style

요약

입력값

상세설명