1. 관련 파일 import 하기
아래와 같이 기본적인 js,css 파일을 import 합니다.
<!----- ibsheet 기본 모듈 -----> <!-- 디자인 css --> <link rel="stylesheet" type="text/css" href="ibsheet/css/default/main.css"> <!-- IBSheet8 코어 파일 --> <script src="ibsheet/ibsheet.js"></script> <!-- 라이선스 파일 --> <script src="ibsheet/ibleaders.js"></script> <!-- 메세지 파일 ko.js 나 en.js 중 하나 추가 --> <script src="ibsheet/locale/ko.js"></script> <!----- ibsheet 선택 모듈 -----> <!-- 공통 기능 설정을 위한 상수 및 함수를 정의한 파일 --> <script src="ibsheet/plugins/ibsheet-common.js"></script> <!-- 엑셀 다운/업로드 관련 모듈 --> <script src="ibsheet/plugins/ibsheet-excel.js"></script> <!-- 찾기, 다운로드, 편집 등 각종 다이얼로그 기능을 정의한 파일 --> <script src="ibsheet/plugins/ibsheet-dialog.js"></script> <!-- IE9 이하 브라우져 전용 css --> <link rel="stylesheet" type="text/css" href="ibsheet/css/compatible/light/main.css"> <body> <!-- 시트 생성 div 객체 (너비,높이 설정 주의) --> <div id="sheetDiv" style="width:100%;height:300px"></div> </body>
2. IBSheet8 객체 생성 및 초기화 하기
IBSheet.create() 함수를 통해 IBSheet8 객체를 생성합니다.
function PageLoad() {
//IBSheet8 객체 초기화 속성 설정
var OPT = {
// 기본 기능 설정
Cfg:{
SearchMode: 0, // FastLoad
HeaderMerge: 3, //헤더 영역 머지 모드 선택
},
//각 열(Column)에 대한 정의 (이름, 유형(Type), 포맷(Format)등을 설정)
//열(Color)의 "Type"과 "Name" 속성은 반드시 설정되어야 합니다.
Cols:[
{Header: "ID", Name: "userid", Type: "Text", Align: "center", CanEdit: 0},
{Header: "사용자 이름", Name: "userNm", Type: "Text", Align: "center"},
{Header: "성별", Name: "gender", Type: "Enum", Enum:"|남|녀", EnumKeys:"|M|F"},
{Header: "입사일", Name: "edate", Extend:IB_Preset.Ymd },
{Header: "나이", Name: "age", Type: "Int", Format: "#,### 세"}
],
Events: {
//시트가 생성되어 렌더링 된 이후, 한 번만 동작하는 이벤트에서 데이터 조회
//다중으로 시트 생성 시에는 모든 시트가 생성 된 후 한 번만 동작하는 이벤트인
//onRenderFirstFinishAll를 이용하여 데이터를 조회하여 주십시오.
onRenderFirstFinish: function(evtParam) {
//조회 api로는 loadSearchData와 doSearch, doSearchPaging이 있습니다.
evtParam.sheet.loadSearchData(
[
{userid:"2170022", userNm:"홍길동", gender:"M", edate:"20010302", age:48},
{userid:"981065", userNm:"허심청", gender:"F", edate:"20010302", age:23},
]
);
}
}
};
// IBSheet8 객체 생성, 비동기
IBSheet.create({
id: "sheet", // 시트 객체 ID
el: "sheetDiv", // 시트를 생성할 DIV객체 ID
options: OPT // 초기화 구문 변수
//,sync: 1 // 동기로 시트 생성
});
/*IBSheet.create 이후 조회를 하면 데이터 바인딩을 보장하지 못한다.
IBSheet.create가 비동기로 동작하기 때문에 onRenderFirstFinish 이벤트에서 조회 하거나 create
함수에 sync:1을 설정하여 동기로 동작하게 해야 한다.
*/
sheet.doSearch("search.html");
}생성된 IBSheet8 객체 모습
SEE ALSO
객체 생성과 초기화
교육 동영상
각 열(Column) 별 타입(Type) 관련 참고