728x90
반응형
#SBGrid 사용법
SBGrid Lib 구조
- SBGrid2.5 라이브러리는 "SBGrid" 라는 이름을 가진 디렉토리 형태로 제공됩니다.
SBGrid Lib IMPORT
- SBGrid2.5 라이브러리인 "SBGrid" 디렉토리의 경로를 설정 해야합니다.
- "SBGrid/css" 디렉토리 안에있는 "SBGrid.css", "SBGrid_default.css" 파일을 순서대로 링크 합니다
- "SBGrid" 디렉토리 안에 있는 "SBGrid_Lib.js","SBGrid_min.js" 파일들을 순서대로 등록해야 합니다.
<head>
//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>
부모 컨테이너 지정
- 그리드가 위치 할 부모 컨테이너를 지정합니다.
- 부모 컨테이너는 반드시 <div>를 사용해야 하며, "width", "height"를 명시적으로 설정해야 합니다.
- 그리드의 크기는 부모 컨터이너의 크기에 종속적 입니다.
- width는 퍼센트(%)표기가 가능하지만, height는픽셀(px)로 지정해 주셔야 합니다.
<body>
<div id="SBGridArea" style="width:100%; height:300px;"></div>
</body>
그리드 속성 설정
- 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]열의 속성 설정
#선택
emptyrecords
-
extendlastcol
-
width
-
height
-
rowheader
-
rowheaderwidth
-
rowheadercaption
-
그리드 객체 생성
- 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);
};
전체 그리드 생성
- 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>
728x90
반응형
'IT > SBGrid' 카테고리의 다른 글
| [SBGrid] - SBGrid insert 문법 (0) | 2020.09.23 |
|---|---|
| [SBGrid] - 5. SBGrid 엑셀파일 업로드/다운로드 (0) | 2020.09.17 |
| [SBGrid] - 4. SBGRID 그리드 기능 및 속성 (0) | 2020.09.17 |
| [SBGrid] - 3. SBGRID 전역함수 사용 방법 (0) | 2020.09.17 |
| [SBGrid] - 2. SBGRID 테마 추가하는 방법 (0) | 2020.09.17 |
댓글