그리드 데이터 영역에서 칼럼 간의 가로 병합(colSpan)을 지시합니다.

cellColMerge 를 true 로 설정한 후, 반드시 cellColSpan 를 같이 정의해야 합니다.

따라서 cellColSpan 도 함께 참고하여 보시길 바랍니다.

그리드의 속성인 enableCellMerge 를 선행적으로 true 설정한 경우 유효합니다.

 var columnLayout = [ {
      dataField : "f1",
      cellColMerge : true, // 셀 가로 병합 실행
      cellColSpan : 3 // 셀 가로 병합 대상은 3개로 설정
 }, {
      dataField : "f2"
 }, {
      dataField : "f3",
 ...
 

참고 : cellColMerge 를 설정한 경우 칼럼 감추기 메소드(hideColumnByDataField)는 무시되며 대상이 되는 칼럼을 숨김 처리(visible: false) 할 수 없습니다.

그리드 데이터 영역에서 칼럼 간의 가로 병합(colSpan)을 지시합니다.

칼럼 간의 가로 병합은 cellColMerge 을 true 인 경우 같은 값일 때 가로 병합이 됩니다.

그리드가 그룹핑된 상태 또는 트리 그리드로 표현된 상태인 경우에는 가로 병합을 하지 않습니다. 즉, 계층 상태가 아닌 일반 그리드여야 가능합니다.

예를 들어 다음처럼 "f1" 칼럼에 cellColSpan 을 3으로 설정한 경우, "f1" 칼럼 기준 다음 3개의 셀에 출력되는 값이 같은 경우 가로로 3개를 병합니다.

그리드의 속성인 enableCellMerge 를 선행적으로 true 설정한 경우 유효합니다.

가로 병합할 때 가로 병합의 대상이 되는 셀들의 visible=false 설정은 무시됩니다.

즉, cellColSpan 을 3으로 설정한 경우 오른쪽의 2개의 칼럼의 visible=false 를 설정해도 해당 2개의 칼럼의 visible 은 무시됩니다.

또한 셀 세로 병합(cellMerge)와 병행하여 사용할 수 없습니다. 셀 세로 병합과 병행하여 사용하는 경우 셀 세로 병합만 적용됩니다.

 var columnLayout = [ {
      dataField : "f1",
      cellColMerge : true, // 셀 가로 병합 실행
      cellColSpan : 3 // 셀 가로 병합 대상은 3개로 설정
 }, {
      dataField : "f2"
 }, {
      dataField : "f3",
 ...
 

참고 : cellColMerge 를 설정한 경우 칼럼 감추기 메소드(hideColumnByDataField)는 무시됩니다.

해당 칼럼의 셀 병합(cell merge) 여부를 결정합니다.

셀 병합은 칼럼에서 상, 하가 같은 텍스트인 경우 하나의 셀로 합쳐 출력하는 기능입니다.

그리드의 속성인 enableCellMerge 를 선행적으로 true 설정한 경우 유효합니다.

칼럼 헤더를 그룹 계층형으로 표현하고자 할 때 해당 칼럼의 자식에 해당되는 칼럼들을 설정합니다.

계층 구조의 depth는 N-depth 로 자식의 자식을 설정할 수 있습니다.

다음은 Group 이라는 계층 헤더를 작성 한 후, Country, Product 를 하위로 설정한 예제입니다.

var columnLayout = [ {
     headerText : "Group",
     children : [{
             dataField : "country",
             headerText : "Country",
             width : 120
     }, {
             dataField : "product",
             headerText : "Product",
             width: 120
     }] // end of children
}];

헤더 간의 가로 병합(colSpan)을 지시합니다.

병합되어 표시되는 칼럼에 총 병합 개수를 설정합시오.

예를 들어 헤더의 칼럼을 3개를 병합하여 한개로 출력하고자 한다면 다음과 같습니다.

 var columnLayout = [ {
      dataField : "name",
      headerText : "병합된 헤더",
      colSpan : 3
 }, {
      dataField : "country"
 }, {
      dataField : "product",
 ...
 

참고 : 그룹형으로 헤더를 작성한 경우 헤더 병합은 최하단 헤더만 가능합니다.(즉, 마지막 계층(depth) 헤더만 가능)

그리드의 Row 데이터에서 해당 칼럼이 표시할 데이터의 Key Field 를 설정합니다.

특정 칼럼에 해당 데이터 필드 값을 출력하기 때문에 이 속성은 필수로 설정해야 합니다.

해당 칼럼의 고유 key 에 해당되기 때문에 다른 칼럼의 dataField 와 동일한 값을 설정하지 마십시오.

즉, 작성된 전체 칼럼들 중 중복된 dataField 의 값이 존재해서는 안됩니다.

칼럼이 출력할 dataField 의 값의 데이터 유형을 지정합니다.

유효 속성 값은 "numeric", "string", "date", "boolean" 입니다.

그리드가 해당 데이터를 더욱 잘 이해하기 위해 지정할 필요가 있습니다. 예를 들어 출력 시킬 데이터가 숫자일 때 이 값을 numeric 으로 지정하면 자동으로 컴마가 붙어 출력됩니다.

만약 숫자 형태더라도 dataType 에 "numeric" 을 지정하지 않은 경우에는 일반 스트링으로 인식하게 됩니다.

dataType 을 "date" 로 설정한 경우 원시 데이터의 날짜 형식을 명시적으로 설정합니다.

데이터로 삽입되는 날짜 형식은 모호성을 가질 수 있습니다.

예로 "01/05/2018" 은 각각 2018년 1월 5일, 2018년 5월 1일로 해석될 수 있습니다.

만약 2018년 1월 5일에 해당된다면 "mm/dd/yyyy" 를, 2018년 5월 1일에 해당된다면 "dd/mm/yyyy" 를 설정하십시오.

"201801" 과 같이 "년월"로 날짜 형식을 갖는다면 명시적으로 "yyyymm" 를 설정하십시오.

또한 시간까지 포함된 다음 값이 "20180501 103059" 2018년 5월 1일 10시 30분 59초에 해당된다면 "yyyymmdd HHMMss" 를 설정하십시오.

지정 가능한 문자는 다음과 같습니다.

• yy : 연(Year) 2자리로 표현(예:15)
• yyyy : 연(Year) 4자리로 표현(예:2015)
• m : 월(Month) 1자리로 표현
• mm : 월(Month) 2자리로 표현
• d : 날짜(Day) 1자리수로 표현(예:1)
• dd : 날짜(Day) 2자리수로 표현(예:01)
• HH : 시(Hours) 24시간제 2자리로 표현
• MM : 분(Minutes) 2자리로 표현
• ss : 초(Seconds) 2자리로 표현

참고 사항 : formatString 과 dateInputFormat 의 차이

• formatString : 데이터의 날짜 스트링을 어떻게 그리드의 셀에 출력할 것인가를 지정
• dateInputFormat : 데이터의 날짜 스트링을 그리드가 어떻게 해석할 것인가를 지정

관련 데모 보기

그리드 속성 enableMovingColumn 를 true 로 설정한 경우 칼럼 헤더를 드래그 앤 드랍으로 자리를 옮길 수 있지만, disableMoving 을 true 로 설정하면 해당 칼럼은 사용자가 드래깅으로 자리를 옮길 수 없습니다.

즉, disabelMoving = true 설정하면 직접적인 이동 대상에서 제외됩니다.

그리드 속성 useGroupingPanel 을 활성화 한 경우 칼럼 헤더를 드래그 앤 드랍으로 그룹핑을 실행할 때 disableGrouping 을 true 로 설정하면 해당 칼럼은 그룹핑을 할 수 없습니다.

해당 칼럼의 수정, 편집 가능 여부를 결정합니다.

칼럼의 특정 셀을 더블 클릭(또는 클릭, F2 키 등) 시 편집, 수정 모드로 진입하는데 이 속성이 false 로 지정되면 해당 칼럼은 편집 불가능한 칼럼이 됩니다.

그리드의 속성인 editable 을 선행적으로 true 설정한 경우 유효합니다.

클립보드 붙여넣기 행위(Ctrl + V)로 해당 칼럼의 수정 가능 여부를 지정합니다.

기본적으로 editable = true 설정이 된 경우 클립보드 값 붙여넣기를 허용합니다.

이 속성을 false 설정하면 해당 칼럼은 붙여넣기를 허용하지 않습니다.

편집 수정 모드로 진입했을 때 셀의 수정 방식을 지정합니다. 즉, 셀의 값을 어떤 형태로 사용자에게 수정시킬지에 대한 방식을 결정합니다.

기본적으로 일반 텍스트입력(InputEditRenderer) 형태이며 달력이나 드랍다운리스트 등의 여러 형태가 될 수 있습니다.

이 속성을 지정하지 않으면 일반 텍스트입력(InputEditRenderer) 형태가 출력됩니다.

editRenderer 는 Object 형태로 지정되며 사용 형태는 다음과 같습니다.

editRenderer : {
    type : "DropDownListRenderer",
    list : ["Red", "White", "Blue"]
}

Also See : BTCalendarRenderer | CalendarRenderer | ComboBoxRenderer | DropDownListRenderer | InputEditRenderer | JQCalendarRenderer | NumberStepRenderer | RemoteListRenderer | CustomEditRenderer

칼럼은 dataField 를 키로 갖는 값(value) 을 출력 시킵니다. 그러나 원래 없던 데이터를 가공하여 출력하고자 할 경우가 있습니다.

예를 들어 칼럼1 과 칼럼2 의 합을 칼럼3에 출력하고자 할 때 칼럼3에 출력 시킬 데이터를 서버단에서 미리 계산해서 가져 올 수 있지만, 그리드에게 계산하도록 지시하여 출력 시킬 수 도 있습니다.

이렇게 그리드에 의해 계산하도록 지정하면, 칼럼 1이나 칼럼2의 값이 변경되었을 때 칼럼3의 데이터도 같이 변경됩니다.

이 처럼 칼럼과 칼럼들이 의존적 관계를 갖게 될 때 해당 값을 계산하도록 할 함수를 지정합니다.

expFunction 을 지정하는 칼럼의 dataField 속성은 중복되지 않는 임의의 스트링을 지정 하십시오. expFunction 에서 계산된 값이 해당 dataField 의 값으로 보관됩니다.

expFunction 은 수식 함수이기 때문에 반환(Return)형은 반드시 Number 여야 합니다.

expFunction 을 설정하면 해당 칼럼을 직접 수정 할 수 없습니다. 반드시 해당 칼럼은 expFunction 을 통해서만 값이 결정됩니다. (직접 수정 불가)

이 함수의 파라메터 및 형식은 다음과 같습니다.

• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
• dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField

expFunction : function(rowIndex, columnIndex, item, dataField) {
        // 1~2 분기 합을 계산하여 반환
        // expFunction 의 리턴형은 항상 Number 여야 합니다.(즉, 수식만 가능)
        return Number( item.col1 + item.col2 ); 
 }

함수의 반환값이 곧 칼럼의 셀에 출력되며, 수식 함수이기 때문에 반환형을 Number 로 일치 시키십시오.

참고 : expFunction 안에서 그리드의 메소드 사용, 반복문 사용, DOM 검색을 금지 합니다. 원하는 기대치에 부합하지 않는 결과를 야기할 수 있습니다.

Also See : labelFunction | 관련 데모 보기

칼럼에 필터링이 가능하도록 설정합니다.

filter 은 Object 형태로 지정되며 사용 형태는 다음과 같습니다.

filter : {
      eanble : true,
      showIcon : true,
      type : "numeric",
      filterFunction : myFilterFunction
 }

• displayFormatValues : 포매팅한 텍스트로 필터 메뉴를 작성할지 여부를 나타냅니다. 포매팅 텍스트와 값이 1:1 매핑된 경우만 정상 작동합니다.(기본값 : false)
• enable : 해당 칼럼의 필터링 사용 여부를 지정합니다.(기본값 : true)
• enableCustomMenu : 해당 칼럼의 필터링 메뉴를 기본으로 제공되는 메뉴가 아닌 사용자가 직접 작성한 메뉴를 사용할지 여부를 나타냅니다.(기본값:false)
• showIcon : 헤더의 오른쪽에서 필터링 아이콘을 출력할지 여부를 나타탭니다. 이 아이콘을 출력한다면 아이콘 클릭시 필터 메뉴가 나옵니다.(기본값:false)
• type : 필터의 type을 지정합니다. 유효값은 "default", "numeric" 입니다.(기본값:default)
• iconClick : enableCustomMenu 를 true 로 설정한 경우 클릭 시 발생하는 이벤트 핸들러 함수입니다.(기본값:null)
• iconWidth : 헤더에 출력되는 필터링 아이콘의 가로 사이즈를 지정합니다.(기본값:14)
• filterFunction : 사용자가 필터링 비교 함수를 작성하여 원하는 데이터를 필터링 할 수 있도록 돕는 함수입니다.(기본값:null)

      function signature : 
      // dataField : 해당 칼럼의 dataField
      // value : 해당 값
      // item : 행 아이템 Object
      function (dataField, value, item) {
           return value > 10 ? true : false; // 10 보다 큰 값만 출력 
      }

• useExMenu (v3.0.3) : 확장 필터 메뉴 사용 여부를 지정합니다. 확장 필터 메뉴는 "텍스트 필터" 와 "숫자 필터"가 있습니다. dataType 에 맞게 텍스트 와 숫자 필터가 결정됩니다.(기본값 : false)
• inline (v3.0.11) : 그리드 속성 showInlineFilter = true 설정했을 때 인라인 필터 출력 여부를 지정합니다.(기본값 : true)
• inlineClear (v3.0.11) : 인라인 필터를 위해 입력한 스트링을 바로 지울 수 있는 버턴을 오른쪽에 생성할지 여부를 지정합니다.(기본값 : true)
• useInlineExtra (v3.0.11.9) : 인라인 필터에서 AND(&), OR(|), NOT(!) 연산자를 사용하여 확장 필터를 제공할지 여부를 지정합니다.(기본값 : false)

dataType 을 "numeric" 또는 "date" 로 지정한 경우 출력되는 포맷을 지정합니다.

1. 지정 가능한 숫자 포맷 스트링(dataType="numeric" 인 경우)는 다음과 같습니다.

"0" 과 "#"의 차이는 "0"은 반드시 자리수를 차지하도록 채웁니다. "#"은 있는 경우 출력 시킴

• ###0 : 컴마 구분자 없이 정수 표현
• #### : 컴마 구분자 없이 정수 표현, 0인 경우 공백 처리
• #,##0 : 천단위 마다 컴마 구분자 정수 표현
• #,### : 천단위 마다 컴마 구분자 정수 표현, 0인 경우 공백 처리
• #,##0.0 : 천단위 마다 컴마 구분자 소수 1자리 의무 표현(소수 2자리에서 기본적으로 반올림 처리)
• #,##0.# : 천단위 마다 컴마 구분자 소수 있다면 1자리 표현, 0인 경우 공백 처리(소수 2자리에서 기본적으로 반올림 처리)
• #,##0.00 : 천단위 마다 컴마 구분자 소수 2자리 의무 표현(소수 3자리에서 기본적으로 반올림 처리)
• #,##0.0# : 천단위 마다 컴마 구분자 소수 1자리 의무, 2자리 있다면 표현(소수 3자리에서 기본적으로 반올림 처리)
• # ##0,00 또는 #.##0,00 와 같이 해외에서 사용하는 포맷 형식 지원함(즉, 천단위를 공백 또는 점으로 소수점을 컴마로 변경)
• 확장해서 "000000" 로 지정하면 의무적으로 정수 6자리를 출력함. 값이 1인 경우 포매팅 되어 "000001" 로 출력 시킴

2. 지정 가능한 날짜 포맷스트링(dataType="date" 인 경우) 는 다음과 같습니다.

• yy : 연(Year) 2자리로 표현(예:15)
• yyyy : 연(Year) 4자리로 표현(예:2015)
• m : 월(Month) 1자리로 표현
• mm : 월(Month) 2자리로 표현
• mmm : 월(Month) 영문 이름 3자리로 표현(예:Jan)
• mmmm : 월(Month) 영문 전체 이름으로 표현(예:January)
• d : 날짜(Day) 1자리수로 표현(예:1)
• dd : 날짜(Day) 2자리수로 표현(예:01)
• ddd : 한글 요일로 표현(예:월, 화, 수)
• dddd : 영문 요일 3자리 이름으로 표현(예:Mon, Tue)
• h : 시(Hours) 12시간제 1자리로 표현
• hh : 시(Hours) 12시간제 2자리로 표현
• H : 시(Hours) 24시간제 1자리로 표현
• HH : 시(Hours) 24시간제 2자리로 표현
• M : 분(Minutes) 1자리로 표현
• MM : 분(Minutes) 2자리로 표현
• s : 초(Seconds) 1자리로 표현
• ss : 초(Seconds) 2자리로 표현
• t : 오전, 오후를 한글로 표현(예: 오전, 오후)
• tt : 오전, 오후를 am 또는 pm으로 표현
• T : 오전, 오후를 A 또는 P로 표현
• TT : 오전, 오후를 AM 또는 PM으로 표현

참고 사항 : 기본 지원하는 포매팅 외 개발자가 원하는 형태로 포맷팅을 하고자 한다면 사용자 정의 포매팅 함수인 labelFunction 을 참고하여 주십시오.

참고 사항 : formatString 과 dateInputFormat 의 차이

• formatString : 데이터의 날짜 스트링을 어떻게 그리드의 셀에 출력할 것인가를 지정
• dateInputFormat : 데이터의 날짜 스트링을 그리드가 어떻게 해석할 것인가를 지정
기본값(default) : null.

칼럼 헤더의 표현 방식을 지정합니다.

예로 헤더에 텍스트를 출력할지, 체크박스를 출력할지를 지정합니다.

headerRenderer 는 Object 형태로 지정되며 사용 형태는 다음과 같습니다.

headerRenderer : {
     type : "CheckBoxHeaderRenderer",
     position : "right" // headerText 기준 오른쪽에 위치
}

Also See : ButtonHeaderRenderer | CheckBoxHeaderRenderer | DropDownHeaderRenderer

관련 데모 보기

해당 칼럼의 헤더 스타일을 지정합니다.

칼럼 헤더에 스타일을 CSS Class 선택자로 설정하십시오.

예를 들어 CSS 에서 .my-custom { color:#ff0000; } 로 클래스 CSS 를 정의했을 때 이 클래스를 사용하고자 하는 경우 style 에 CSS 명을 설정하십시오.

설정 예는 headerStyle : "my-custom" 과 같습니다. 점(.) 은 생략하고 지정하십시오.

다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.

엑셀 내보내기 시에는 해당 스타일의 글자색, 배경색, 볼드체, 이탤릭체만 적용됩니다.

그리드의 헤더에 표시되는 칼럼 헤더 제목을 설정합니다.

그리드의 Row 데이터에서 해당 칼럼에 출력하는 데이터 KeyField 가 name 인 경우 헤더에 '이름' 이라고 출력하고자 한다면 이 값을 '이름'으로 설정하십시오.

만약 설정하지 않는다면 dataField에서 설정한 값(keyField)이 출력됩니다.

칼럼 헤더에 마우스 오버 시 생기는 툴팁을 설정합니다.

headerTooltip 은 Object 형태로 지정되며 사용 형태는 다음과 같습니다.

headerTooltip : {
      show : true,
      tooltipHtml : "Just an incredibly simple AUIGrid 툴팁"
 }

headerTooltip 의 tooltipHtml 의 값은 일반 스트링이 될 수 있고, HTML 스트링이 될 수 있습니다.

HTML 을 작성하면 해당 HTML 이 툴팁으로 표시됩니다.

칼럼에 출력되는 셀 텍스트를 사용자 정의 할 수 있는 함수입니다.

기본적으로 데이터의 값이 셀에 출력되는데 이 값을 자바스크립트에서 재가공하여 출력하고자 하는 경우 이 속성을 설정하십시오.

labelFunction 으로 가공한 값은 실제 데이터에 영향을 미치지 않고 단순히 보여지는 방식만 바꿔서 보여줍니다.

labelFunction 은 많은 곳에서 응용이 가능합니다.

예로 고객이 원하는 셀 출력은 일반적인 값 형태인 별칭(alias)인데 데이터는 코드값인 경우, 사용자가 보기 편한 코드값을 별칭으로 변환 시켜서 보여줄 수 있습니다.

즉, 뷰(view)적인 표현만 다르게 할 뿐입니다. 이에 반해 실제 데이터에 직접적으로 적용시키는 속성은 expFunction 이 존재합니다.

labelFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 원래 데이터의 해당 셀 값(value)
• headerText : 현재 칼럼의 헤더 텍스트
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
• dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField
• cItem : 설정한 칼럼 레이아웃에서 해당 열에 해당되는 객체 정보 (Object)

labelFunction : function(rowIndex, columnIndex, value, headerText, item, dataField, cItem) {
   var myString = "";
   // 로직 처리
   // 여기서 value 를 원하는 형태로 재가공 또는 포매팅하여 반환하십시오.
   // 함수의 반환값이 곧 셀에 출력됩니다.
   return myString;
}

참고 : labelFunction 은 렌더링될 때마다 호출됩니다. labelFunction 안에서 그리드의 메소드 사용, 반복문 사용, DOM 검색을 금지 합니다. 원하는 기대치에 부합하지 않는 결과를 야기할 수 있습니다.

Also See : expFunction | 관련 데모 보기

셀 세로 병합을 설정한 경우(cellMerge : true) 이전 칼럼의 셀 병합 여부를 보고 판단할지를 지정합니다.

만약 두 개의 칼럼(대분류, 소분류)을 위, 아래로 병합한다고 가정할 때 대분류는 단순히 값이 같다면 병합해도 문제가 없습니다.

그러나 소분류의 값은 값이 같다고 해도 대분류의 값까지 고려해야 할 필요가 있습니다. 이런 경우 소분류에 해당되는 칼럼에 mergePolicy 를 설정하고 "restrict" 값을 설정하십시오.

"restrict" 를 설정하면 막연히 위, 아래 값이 같다고 병합을 실행하지 않고, 이전 칼럼(즉, 대분류) 의 값을 고려하여 셀 병합을 실행합니다.

유효값은 "always", "restrict" 입니다.

셀 세로 병합을 실행할 때 mergePolicy 를 "restrict" 로 설정한 경우, 먼저 고려할 칼럼의 dataField 를 지정합니다.

mergeRef 를 설정하지 않으면 바로 이전 칼럼의 dataField 를 기본값으로 갖습니다.

해당 칼럼이 최소로 작아질 수 있는 너비 값(픽셀 단위)을 설정합니다.

minWidth 는 명시적으로 픽셀 단위인 Number 형 만을 설정해야 합니다.

width 의 설정 값이 퍼센티지(%)인 경우 해당 퍼센티지의 값이 minWidth 보다 작아지면 minWidth 값의 너비로 출력 시킵니다.

또한 사용자가 칼럼과 칼럼 사이 드래깅을 통하여 너비 조절을 할 때 minWidth 보다 작게 조절 할 수 없습니다.

셀에 출력되는 텍스트의 접미사를 지정합니다.

예를 들어 1000 이라는 글자에 만원이라는 글자를 추가하고자 한다면 이속성에 '만원'을 설정하십시오.

셀에 출력되는 텍스트의 접두사를 지정합니다.

예를 들어 1000 이라는 글자에 달러표시($) 를 추가하고자 한다면 이 속성에 '$'를 설정하십시오.

칼럼이 출력시킬 셀의 표현 방식을 지정합니다. 즉, 셀의 값을 어떤 형태로 출력시킬지를 결정합니다.

칼럼에는 여러 형태로 출력이 될 수 있습니다. 예로 이미지, 아이콘, 버턴, 바 게이지 등이 될 수 있습니다.

renderer 는 Object 형태로 지정되며 사용 형태는 다음과 같습니다.

renderer : {
      type : "IconRenderer",
      iconWidth : 20,
      iconHeight: 16,
      iconTableRef : {
           default : "./assets/korea.png"
      }
 }

Also See : BarRenderer | ButtonRenderer | CheckBoxEditRenderer | IconRenderer | ImageRenderer | LinkRenderer | NumberStepRenderer | SparkColumnRenderer | SparkLineRenderer | SparkWinLossRenderer | TemplateRenderer | CustomRenderer

칼럼의 dataType 을 "numeric" 으로 지정한 경우, "formatString" 에 의해 처리되는 소수점 반올림, 올림, 내림을 결정합니다.

예를 들어 formatString 을 "#,##0" 으로 지정한 경우, 실제 값이 12345.6 일 때 기본값은 반올림되어 "12,346" 으로 포맷팅되어 출력됩니다.

소수점 처리 방식을 반올림, 내림, 올림을 결정짓는 속성입니다.

유효값은 다음과 같습니다.

• "ceil" : 소수점 처리를 올림합니다.
• "floor" : 소수점 처리를 내림합니다.
• "round" : 소수점 처리를 반올림합니다.

그리드 속성 searchByFormatValue을 true로 설정한 경우 해당 칼럼이 포매팅된 값을 대상으로 검색을 실행할지 지정합니다.

해당 칼럼의 정렬(sorting) 여부를 결정합니다.

칼럼 헤더를 클릭 시 칼럼의 데이터가 정렬되어 다시 출력되는데 이 때 정렬 할 수 있는 칼럼과 정렬 할 수 없는 칼럼을 지정할 수 있습니다.

이 속성을 false 로 설정하면 해당 칼럼 필드로는 정렬할 수 없습니다.

해당 칼럼 전체 스타일을 지정합니다.

칼럼 전체의 스타일을 CSS Class 선택자로 설정하십시오.

예를 들어 CSS 에서 .my-custom { color:#ff0000; } 로 클래스 CSS 를 정의했을 때 이 클래스를 사용하고자 하는 경우 style 에 CSS 명을 설정하십시오.

설정 예는 style : "my-custom" 과 같습니다. 점(.) 은 생략하고 지정하십시오.

다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.

엑셀 내보내기 시에는 해당 스타일의 글자색, 배경색, 볼드체, 이탤릭체만 적용됩니다.

칼럼에 출력되는 셀의 개별 스타일을 동적으로 지정하는 함수입니다.

기본적으로 셀은 일괄적으로 칼럼 또는 로우에 의해 스타일이 상속 받아져 지정됩니다.

그러나 개별적으로 셀 하나 하나에 스타일을 지정하고자 할 때 이 함수를 사용하십시오.

styleFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 원래 데이터의 해당 셀 값(value)
• headerText : 현재 칼럼의 헤더 텍스트
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
• dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField

styleFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) {
   var myStyle = "my-custom-style";
   // 로직 처리
   return myStyle;
} 

함수의 반환값은 CSS 에서 이미 선언되어 있는 CSS 클래스명 입니다.

다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.

엑셀 내보내기 시에는 해당 스타일의 글자 색상(color), 배경색(background-color), 이탤릭체(font-style: italic), 볼드체(font-weight: bold), 언더라인(text-decoration: underline)만 적용됩니다.

동적으로 작성되는 styleFunction 의 특성 상 v3.0.14 에서 인라인 스타일 방식의 Object 선언 반환(return)을 지원합니다.

인라인 스타일 선언은 Object 로 다음처럼 정의합니다.

styleFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) {
    if( value > 0 ) { // 0보다 큰 경우
        return  { color: "#000000", backgroundColor: "#ff0000", fontStyle: "italic", fontWeight: "bold", textDecoration: "underline" };
      }
      // 인라인 스타일 선언의 경우 기본값도 모두 작성해서 반환해야 합니다.
      return  { color: "#ff0000", backgroundColor: "#ffffff", fontStyle: "normal", fontWeight: "normal", textDecoration: "none" };
} 

CSS 클래스명과 인라인 스타일 Object 를 혼합해서 반환하는 방식의 styleFunction 작성은 불가능합니다.

그리드 셀에 마우스 오버 시 생기는 툴팁을 설정합니다. (그리드 속성 showTooltip = true 설정 선행 필수)

tooltip 은 Object 형태로 지정되며 다음 필드를 지정할 수 있습니다.

• show (Boolean) : 해당 칼럼 툴팁 활성화 여부(기본값 : true)
• useNativeTip (Boolean) : AUIGrid 이 툴팁이 아닌 HTML 의 내장 툴팁인 title 속성으로 출력할지 여부
• tooltipField (String) : 툴팁으로 출력할 행 아이템 객체(Object)의 필드명(기본값 : null)
• tooltipFunction (Function) : 툴팁으로 출력될 내용을 사용자 정의 할 수 있는 함수(기본값 : null)

사용 형태는 다음과 같습니다.

tooltip : {
      show : true,
      tooltipField : "flag"
      tooltipFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) {
         return value;
      } 
 }

내장 툴팁(useNativeTip=true) 설정 시 단순히 해당 셀의 값만 출력할 뿐 tooltipField, tooltipFunction 을 사용하여 값을 변경할 수 없습니다.

tooltipFunction 의 반환값은 일반 스트링이 될 수 있고, HTML 스트링이 될 수 있습니다.

tooltipFunction 은 tooltipField 보다 우선 순위가 높아 두 개를 같이 설정하면 tooltipField 는 무시됩니다.

기본값(default) : null.

최초 칼럼 생성 시 보이기 설정을 지시합니다.

만약 visible 을 false 로 설정하면 해당 칼럼을 생성은 하지만 보이지 않게 출력 시킵니다.

보이지 않게 처리된 칼럼은 추후 showColumnByDataField 메소드로 보이게 출력 시킬 수 있습니다.

해당 칼럼의 가로 너비 고정 값을 설정합니다.

만약 이 값을 설정하지 않는다면 기본 값 80 이 할당됩니다. 그러나 width 속성을 설정하지 않은 칼럼이 다수 인 경우 현재 그리드의 총 너비를 그 수만큼 나눠서 할당됩니다.

예를 들어 5개의 칼럼을 만들었을 때 1개의 칼럼만 크기를 설정한다면 4개의 칼럼은 남은 그리드 width 를 4등분하여 설정됩니다.

반대로 4개의 칼럼에 고정값을 설정하고 1개의 칼럼에 이 값을 설정하지 않았다면 1개의 칼럼이 남은 그리드 width 의 전체가 설정됩니다.

이 속성 값을 설정하지 않는다면 그리드 칼럼은 기본 80보다 작게는 출력되지 않습니다. 따라서 칼럼 수가 많은 경우 횡스크롤이 생기게 됩니다.

만약 이 값을 퍼센티지로 설정하고자 한다면 "10%" 또는 "20%" 와 같이 설정하십시오.

"10%" 로 설정한다면 그리드 총 너비의 10%에 해당되는 값으로 칼럼이 생성됩니다.

헤더와 헤더 사이 경계를 더블 클릭 한 경우 명시적으로 적용시킬 너비(width)를 설정합니다.

렌더러(renderer)의 유형에 따라 더블 클릭 시 해당 칼럼의 적절한 너비(width)대로 자동 조절되지 않습니다.

이런 경우 widthFit 속성을 설정하면 해당 값으로 더블 클릭 시 적용됩니다.

그리드 속성 wordWrap 과 무관하게 설정한 칼럼의 자동 개행(word-wrap)을 할지 여부를 지정합니다.

그리드 속성 wordWrap 은 칼럼과 무관하게 그리드 전체에 적용되어 가변적인 행의 높이를 갖지만

칼럼 속성 wrapText 는 설정한 칼럼에서 고정된 행의 높이 안에서 출력됩니다.

즉, wrapText 설정 시 공간이 부족하여 출력되지 않은 텍스트는 가려져 출력됩니다.

참고 : 그리드 속성 wordWrap 을 true 로 설정하면 칼럼의 wrapText 는 무시됩니다.

dataType 을 "date" 으로 설정한 경우 엑셀 내보내기 할 때 엑셀에서 사용하는 날짜 시스템(1900년 날짜 시스템)으로 변환하여 내보내기 할지 여부를 지정합니다.

formatString 을 "yyyy-mm-dd"로 설정한 경우 엑셀의 "간단한 날짜" 시스템으로 자동 내보내기 합니다. (다른 설정 없이도 날짜 시스템으로 내보내기 함)

그 외의 formatString 인 경우는 xlsxDate 속성을 true 설정 한 경우 엑셀의 날짜 시스템으로 내보내기 합니다.

엑셀에서 사용하는 포맷 형식이 그리드와 서로 다르기 때문에 그리드가 모두 자동으로 변환할 수가 없습니다.

이를 위해 xlsxDate 에 true 대신 엑셀 날짜 표시 형식을 작성하면 그대로 내보내기 합니다.

예로 작성하면 다음과 같습니다

xlsxDate: "[$-ko-KR]yy년 m월 d일 (ddd) hh시 mm분", // 엑셀 내보내기 시 엑셀에서 정의하는 날짜 표시 형식(사용자 지정 형식) 

자세한 엑셀 날짜 사용자 지정 형식은 MS에서 제공하는 지원 문서를 참고하십시오.

참고 : formatString 이 아닌 labelFunction 을 정의한 경우에는 xlsxDate 무시됩니다.

기본값(default) : false.

dataType 을 "numeric" 으로 설정하고 formatString 을 지정한 경우 엑셀 내보내기 할 때 실질적인 숫자 그대로 내보내기 할지 여부를 지정합니다.

실질적인 숫자의 의미는 예로 95.87 이라는 값이 있는 경우 formatString 을 "#,##0" 으로 설정했을 때 96 으로 출력이 됩니다.

이 때 엑셀로 내보내기 할 때 포매팅된 값인 96을 내보내기하지 않고 95.87 로 내보내기할지 여부를 의미합니다.

xlsxNumeric 을 true 로 설정하면 엑셀의 셀에 보여지는 값은 96으로 동일하게 보이지만 더블클릭 시 보이는 값(또는 엑셀의 수식창의 값)은 95.87 로 나타납니다.

xlsxNumeric 은 formatString 이외 prefix, postfix, labelFunction 등으로 포매팅한 경우 무시됩니다.(formatString 설정 시에만 사용 가능함)

또한 rounding 속성으로 소수점을 반올림처리 할 때만 유효합니다.

칼럼의 데이터 유형(dataType)에 관계 없이 엑셀로 내보내기(Export) 할 때 엑셀 포맷에 명시적으로 텍스트 형식을 지정합니다.

예를 들어, 상품 번호가 "111200340052" 라면, 엑셀로 내보내기 할 때 엑셀 상에서 숫자 형식으로 인식 됩니다.

이런 경우, 실질적으로 텍스트로 인식시켜야 할 필요가 있습니다.

엑셀 포맷에서 명시적으로 텍스트로 인식시키고자 한다면 xlsxTextConversion 을 true 로 설정하십시오.