SMART datagrid v1.4 > Concepts
SMART datagrid를 실행하기 위해서는 "smart-datagrid-lic.js", "smart-datagrid.min.js" 파일들이 경로 상에 존재해야 합니다. 평가판인 경우에는 "smart-datagrid-eval-lic.js", "smart-datagrid-eval.min.js" 입니다. 또, 내부적으로 사용되는 이미지파일들이 필요합니다. 보통 SMARTdatagrid-1.x.x.zip 형식으로 릴리즈되는 제품 패키지에 이미지들이 포함됩니다.
별도로 전달된 라이센스 파일과 제품 패키지에 포함된 스크립트 파일을 아래와 같은 코드처럼 순서대로 include 하면 됩니다.
<script src='smart-datagrid-lic.js'></script>
<script src='smart-datagrid.min.js'></script>
// 평가판이라면
<script src='smart-datagrid-eval-lic.js'></script>
<script src='smart-datagrid-eval.min.js'></script>
// 엑셀 내보내기 시 파일 압축을 위해 배포판에 같이 포함된 jszip이 필요합니다.
// jszip은 javascript로 구현된 zip 압축 오픈소스 라이브러리입니다.
<script src='jszip.min.js'></script>
// jquery 등의 스크립트가 필요할 수 있습니다.
<script src='jquery-1.8.3.min.js'></script>
// 언어를 변경해야할 경우에만 사용합니다.
<!--<script src='smart-datagrid-locale.js'></script> --!>
SMART datagrid는 내부에서 사용하는 아이콘 이미지가 특정한 위치에 있다고 가정합니다. 기본적으로 그리드가 포함된 html 경로의 "assets"라는 하위 폴더에 리소스들이 존재해야 합니다. 기본 위치가 아닌 경우, 아래 코드의 여러 방법들 중 선택해서 그 위치를 지정할 수 있습니다.
// /dataludi
DataLudi.setRootContext('/dataludi');
DataLudi.setAssetRoot('');
// ./dataludi
DataLudi.setRootContext('dataludi');
DataLudi.setAssetRoot('');
// ./dataludi/resource
DataLudi.setRootContext('dataludi');
DataLudi.setAssetRoot('resource');
// ./dataludi/resource
DataLudi.setRootContext('dataludi/resource');
DataLudi.setAssetRoot('');
// ./dataludi/resource
DataLudi.setAssetRoot('dataludi/resource');
이제 그리드 개발을 시작할 수 있습니다.
Hello Grid 예제 부터 시작하십시오. 더 많은 예제는 Examples에서 확인할 수 있습니다.
SMART datagrid는 기본적으로 Html5 Canvas 위에서 그려지므로 Canvas를 지원하는 IE11 이상에서만 동작합니다. DOM 버전도 제공되고 있지만 역시 IE8 이하는 테스트하지 않고 지원하지도 않습니다. IE11 등 최신 브라우저 사용을 권장합니다. 현재, 크롬 브라우저에서 가장 원할하게 실행되고 있습니다.
이 곳이나 W3C School에서 브라우저별 지원 버전을 확인하십시오.
브라우저에서 사용중인 언어로 기본언어로 셋팅이됩니다. SMARTdatagrid에는 영어,한국어가 내포되어있습니다.
이외에 별도의 언어를 사용하고자 할때 아래의 가이드를 참고하시면됩니다.
제공되는 언어는 아래와 같습니다.
| key | message |
|---|---|
| year | 년 |
| months | ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] |
| shortMonths | ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] |
| weekDays | ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'] |
| shortWeekDays | ['일', '월', '화', '수', '목', '금', '토'] |
| thousandSep | , |
| decimalSep | . |
| dateSep | / |
| timeSep | : |
| am | 오전 |
| pm | 오후 |
| halfs | ['전반기', '후반기'] |
| quarters | ['1사분기', '2사분기', '3사분기', '4사분기'] |
| dateFormat | yyyy-MM-dd HH:mm:ss |
| shortDateFormat | yyyy-MM-dd |
| minuteFormat | yyyy-MM-dd HH:mm |
| hourFormat | yyyy-MM-dd HH |
| monthFormat | yyyy-MM |
| yearFormat | yyyy |
| untermintatedExpression | 종결되지 않은 수식입니다 |
| invalidToken | 잘못된 token 입니다 |
| untermintatedString | 종결되지 않은 문자열입니다 |
| unknownOperator | 알 수 없는 연산자입니다 |
| notExpectedTokenKind | 기대하지 않은 토큰 종류입니다 |
| invalidIsOperand | is 연산자의 피연산자는 defined, null, empty 중 하나여야 합니다 |
| unknownToken | 알 수 없는 토큰입니다 |
| invalidIdentifierToken | 토큰이 식별자가 아닙니다 |
| invalidIdentifierKey | 잘못된 식별자 키입니다 |
| invalidIdentifierIndexer | 잘못된 인덱서 식별자입니다 |
| invalidDateTimeFormat | 잘못된 날짜 형식입니다 |
| invalidDateTimeText | 잘못된 날짜 값입니다 |
| invalidDateTimeOutputFormat | 잘못된 날짜 출력 형식입니다 |
| invalidDateTimeFormat2 | 잘못된 날짜 형식 - 'H'와 'a'가 같이 존재할 수 없습니다 |
| invalidDateTimeFormat3 | 잘못된 날짜 형식 - 'h'가 있으면 'a'가 반드시 있어야 합니다 |
| invalidDateTimeInputFormat | 잘못된 날짜 입력 형식입니다 |
| invalidColorText | 잘못된 color 텍스트입니다 |
| invalidLinearGradientText | 잘못된 linear gradient 텍스트입니다 |
| invalidRadialGradientText | 잘못된 radial gradient 텍스트입니다 |
| valueIsRequired | 반드시 요구되는 값입니다 |
| notImplemeted | 아직 구현되지 않았습니다 |
사용할 언어의 종류와 문구를 등록하여 사용할수 있습니다.
(자세한 내용은 smart-datagrid-locale.js 설치파일 확인)
DataLudi.setLocale('ja', {
year: '年',
months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekDays: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
shortWeekDays: ['日', '月', '火', '水', '木', '金', '土']
...
});
DataLudi.setLanguage("ja");
smart-datagrid-locale.js 파일에는 일본/중국어 에 대한 언어가 셋팅이 되어있습니다.
이외에 추가적인 언어설정은 setLocale에 셋팅된 내용을 참고하여 언어를 추가해 주시면 됩니다.