1) 헤더(Header) 생성

IBSheet8의 헤더(Header)는 열(Column) 생성 시 (Col)Header 속성에 부여한 값에 의해 결정됩니다.



(Col)Header 속성의 값을 문자열로 설정하시면 단일 헤더(Header) 행이 만들어집니다.

 var initSheet = {
  "Cols": [
    //Header를 문자열로 설정
    {Header: "예상현액", Name: "A", Type:"Int"},
    {Header: "전일까지", Name: "B", Type:"Int"},
    {Header: "당일", Name: "C", Type:"Int"},
    {Header: "누계", Name: "D", Type:"Int"}
  ]
}


▼ 한 줄 헤더 행




두 개 이상의 헤더(Header) 행을 사용하려면 IBSheet8 생성 시 Header 속성 값을 배열로 선언합니다.

var OPT = {
  Cols: [
    //Header를 배열로 설정
    {Header: ["예상현액", "예상현액"], Name: "A", ...},
    {Header: ["지출액", "전일까지"], Name: "B", ...},
    {Header: ["지출액", "당일"], Name: "C", ...},
    {Header: ["지출액", "누계"], Name: "D", ...}
  ]
}


▼두 줄 헤더(Header) 행 생성





(Col)Header 속성 값을 object로 선언하여 헤더(Header)에 세부적인 속성을 설정 할 수 있습니다.


var OPT = {
  Cols :  [
    {Header: ["예상현액", "예상현액"], Name: "A" },
    //Header에 Color, TextColor 설정
    {Header: ["지출액", {Value:"전일까지",Color:"#F7CCAC",TextColor:"#3A3845"}], Name: "B" },
    //Header에 HtmlPostfix 설정
    {Header: [{Value:"지출액", HtmlPostfix:"<button onclick='chk()'>확인</button>"}, "당일"], Name: "C" },
    {Header: ["지출액", "누계"], Name: "D" }
  ]
}


▼ 헤더 셀에 속성 추가( 배경색 설정, 버튼 생성)






2) 헤더(Header) 수정

헤더(Header) 행의 id는 최상단을 기준으로  "Header", "HR1" , "HR2", "HR3" ... 순으로 자동 부여됩니다.

생성된 헤더(Header) 행은 getRowById()함수를 통해 얻을 수 있습니다.


//최상단 헤더행
var hr = sheet.getRowById("Header"); 

//최상단 헤더 행 배경색을 붉은색으로 변경
sheet.setAttribute( hr, null, "Color", "#FF0000" );

//두번째 헤더행
var hr1 = sheet.getRowById("HR1");

//두번째 헤더행 "C" 컬럼의 내용을 '금일'로 변경
sheet.setValue( hr1, "C", "금일" );


▼ 헤더 행의 속성, 타이틀 변경

 





3) 헤더(Header) 병합

(Cfg)HeaderMerge 속성을 이용하여 헤더(Header) 영역의 병합 규칙을 설정 할 수 있습니다.


var OPT = {
  Cfg: {
    HeaderMerge: 3 //헤더 열 우선 병합
  },
  Cols: [
    {Header: ["예상현액", "예상현액"], Name: "A", ...},
    {Header: ["지출액", "전일까지"], Name: "B", ...},
    {Header: ["지출액", "당일"], Name: "C", ...},
    {Header: ["지출액", "누계"], Name: "D", ...}
  ]
}

▼ 헤더 열 우선 병합