맨위로가기
 

SBGRID

닫기

그리드 생성하기

SBGrid를 생성하기 (부모컨테이너 지정, 그리드 속성 설정, 그리드 객체 설정) 위한 가이드이며, 그리드 라이브러리 IMPORT와 이어지는 부분 입니다.

STEP 3

부모 컨테이너 지정

  • 그리드가 위치 할 부모 컨테이너를 지정합니다.
  • 부모 컨테이너는 반드시 <div>를 사용해야 하며, "width", "height"를 명시적으로 설정해야 합니다.
  • 그리드의 크기는 부모 컨터이너의 크기에 종속적 입니다.
  • width는 퍼센트(%)표기가 가능하지만, height는픽셀(px)로 지정해 주셔야 합니다.

					<body>
						<div id="SBGridArea" style="width:100%; height:300px;"></div>
					</body>

STEP 4

그리드 속성 설정

  • JSON 객체 형식으로 다양한 속성을 설정 할 수 있습니다.
  • 그리드 속성중 "parentid","id","jsonref","columns"는 반드시 설정해야하는 필수 속성 입니다.

    • 					
					function createGrid(){
						SBGridProperties.parentid = 'SBGridArea';
						SBGridProperties.id = 'datagrid';
						SBGridProperties.jsonref = 'ct_data.resources';
						SBGridProperties.columns = [
							{caption : [''],               ref : 'check',		 width : '30px',	style : 'text-align:center',    type : 'checkbox'},
							{caption : ['학원명'],          ref : 'academy',	   width : '168px',	  style : 'text-align:center',    type : 'input'},
							{caption : ['설립자(성명)'],	   ref : 'name',		 width : '163px',	style : 'text-align:center',    type : 'output'},
							{caption : ['전화번호'],		ref : 'phone',		  width : '120px',	 style : 'text-align:center',	 type : 'input'},
							{caption : ['바로가기'],	    ref : 'link',		  width : '100px',	 style : 'text-align:center',	 type : 'outputbutton'}
						];
						datagrid = _SBGrid.create(SBGridProperties);
					};
  • parentid : [string]문자열 형식으로부터 부모 컨테이너의 id를 설정
  • id    : [string]그리드 객체 변수명 설정
  • jsonref : [string]jsonData의 변수명 설정
  • columns : [array]열의 속성 설정

STEP 5

그리드 객체 생성

  • SBGrid 라이브러리를 추가(IMPORT)하면, 그리드 객체를 생성할 수 있는 "_SBGrid.create()" 메소드를 사용할 수 있습니다.
				function createGrid(){
					SBGridProperties.parentid = 'SBGridArea';
					SBGridProperties.id = 'datagrid';
					SBGridProperties.jsonref = 'grid_data';
					SBGridProperties.columns = [
						{caption : [''],               ref : 'check',		 width : '30px',	style : 'text-align:center',    type : 'checkbox'},
						{caption : ['학원명'],          ref : 'academy',	   width : '168px',	  style : 'text-align:center',    type : 'input'},
						{caption : ['설립자(성명)'],	   ref : 'name',		 width : '163px',	style : 'text-align:center',    type : 'output'},
						{caption : ['전화번호'],		ref : 'phone',		  width : '120px',	 style : 'text-align:center',	 type : 'input'},
						{caption : ['바로가기'],	    ref : 'link',		  width : '100px',	 style : 'text-align:center',	 type : 'outputbutton'}
					];
					datagrid = _SBGrid.create(SBGridProperties);
				};

STEP 6

전체 그리드 생성

  • STEP1~STEP4 까지의 과정을 소스로 나타낸 예제입니다.
				<!DOCTYPE html>
					<html>
						<head>
						<title>그리드 생성하기</title>

							//SBGrid v2.5 라이브러리("SBGrid"폴더)의 경로
							<script language="javascript">
								var SBpath = "./";		
							</script>	
			
							//SBGrid v2.5에서 사용하는 SBGrid.css, SBGrid_Default.css 파일 링크
							<link href="./SBGrid/css/SBGrid.css" rel="stylesheet" type="text/css">
							<link href="./SBGrid/css/SBGrid_Default.css" rel="stylesheet" type="text/css">
			
							//SBGrid v2.5를 사용하기 위한 SBGrid_Lib.js, SBGrid_min.js ( ※반드시 등록 전에 SBPath를 먼저 설정해야 합니다. )
							<script src="./SBGrid/SBGrid_Lib.js" type="text/javascript"></script>
							<script src="./SBGrid/SBGrid_min.js" type="text/javascript"></script>
							
							//특정 JQuery 버전 사용 시 추가등록 ( ※반드시 SBGrid v2.5 라이브러리를 먼저 등록해야합니다. )
							<script src="/jquery-1.11.1.min.js"></script>

						</head>
						<script>
						
							var datagrid;
							var SBGridProperties = {};
							
							//임의의 jsonData
							var grid_data = [
								{"check":"true", "academy":"대성학원", "name":"이현수", "phone":"010-5555-1548","link":"a"},
								{"check":"false","academy":"노량진학원","name":"이기승","phone":"010-4861-0321","link":"b"}];

							$(document).ready(function(){
								createGrid();
							});
							
							//그리드 선언
							function createGrid(){
								SBGridProperties.parentid = 'SBGridArea';
								SBGridProperties.id = 'datagrid';
								SBGridProperties.jsonref = 'grid_data';
								SBGridProperties.columns = [
									{caption : [''],               ref : 'check',		 width : '30px',	style : 'text-align:center',    type : 'checkbox'},
									{caption : ['학원명'],          ref : 'academy',	   width : '168px',	  style : 'text-align:center',    type : 'input'},
									{caption : ['설립자(성명)'],	   ref : 'name',		 width : '163px',	style : 'text-align:center',    type : 'output'},
									{caption : ['전화번호'],		ref : 'phone',		  width : '120px',	 style : 'text-align:center',	 type : 'input'},
									{caption : ['바로가기'],	    ref : 'link',		  width : '100px',	 style : 'text-align:center',	 type : 'outputbutton'}
								];
								datagrid = _SBGrid.create(SBGridProperties);
							};
						</script>
						<body>
							//그리드 생성
							<div id="SBGridArea" style="width:100%;height:300px;"></div>
						</body>
					</html>

주의사항

  • 특정 JQuery 버전 사용 시, SBGrid2.5 라이브러리를 모두 IMPORT한 후에 특정 JQuery 버전을 IMPORT 해주셔야 합니다.
  • SBGrid제품은 웹 표준을 준수하기 때문에, 호환성 보기에 대해서는 지원하고 있지 않습니다. ( 호환성 보기시 강제로 브라우저를 IE8 이하로 낮춤 )
  • SBGrid 제품은 css를 전역으로 적용시 ex) body, tr, td ...
    그리드 CSS 와 적용한 CSS의 충돌이 날 우려가 있으므로, 클래스를 통해 스타일을 선언해 주시기바랍니다.