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

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

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

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

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

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

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

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

편집, 수정 모드를 사용하기 위해서는 AUIGrid 의 editable 속성이 선행적으로 true 설정되어야 합니다.(AUIGrid editable의 기본값은 false)

편집 수정 모드로 진입했을 때 사용할 편집 렌더러를 지정합니다.

기본적으로 이 속성을 지정하지 않으면 일반 텍스트입력 형태가 출력됩니다.

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

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

보다 직관적인 사용방법을 위해 위해 데모를 참고하여 주십시오.

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

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

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

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

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

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

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

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

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

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

보다 직관적인 사용방법을 위해 위해 데모를 참고하여 주십시오.

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

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

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

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

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

기본값(default) : null.

dataType 을 "numeric" 또는 "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으로 표현

지정 가능한 숫자 포맷 스트링은 다음과 같습니다.

"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" 로 출력 시킴

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

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

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

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

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

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

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

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

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

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

headerTooltip : {
      show : true,
      tooltipHtml : "Just an incredibly simple AUIGantt Tip"
 }

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

예를 들어

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

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

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

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

 
labelFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) {
   var myString = "";
   // 로직 처리
   // 여기서 value 를 원하는 형태로 재가공 또는 포매팅하여 반환하십시오.
   return myString;
} 

함수의 반환값이 곧 셀에 출력됩니다.

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

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

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

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

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

칼럼이 출력시킬 데이터 렌더러를 지정합니다.

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

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

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

보다 직관적인 사용방법을 위해 위해 데모를 참고하여 주십시오.

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

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

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

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

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

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

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

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

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

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

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

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

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" 과 같은 구조는 지원하지 않습니다.

보다 직관적인 사용방법을 위해 위해 데모를 참고하여 주십시오.

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

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

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

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

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

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

예를 들어

'<div style="width:120px;"><p>Product</p><img width="120" src="./assets/auisoft.png"></div>' 와 같이 HTML 을 작성하면 해당 HTML 이 툴팁으로 표시됩니다.

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

기본값(default) : null.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

기본값(default) : false.

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

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

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

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