AUISoft
AUIGrid 3.0.14 Documentation
Footer

푸터(Footer) 는 칼럼 레이아웃을 선언할 때와 같이 Array-Object 로 선언합니다.

푸터에 출력하고자 하는 값 1개는 하나의 Object 입니다.

푸터 Array 의 순서는 칼럼의 순서와 관계가 없습니다. 연산(operation)하고자 하는 필드(dataField)를 지정하고, 출력하고자 하는 필드(positionField)를 지정하는 방식입니다.

예를 들어 "price" 에 대해 합계를 계산하여 "price" 가 출력되고 있는 푸터 셀에 위치하고자 한다면 다음과 같습니다.


 { dataField : "price", operation : "SUM", positionField : "price" } 

정의된 푸터 레이아웃은 그리드의 setFooter 메소드로 설정합니다.

아래는 설정 예제 입니다.
var footerLayout = [ {
     labelText : "총 합계",
     positionField : "#base"
   }, {
     dataField : "price",
     positionField : "price",
     operation : "SUM",
     formatString : "#,##0",
     style : "aui-grid-my-footer-sum-total"
   }, {
     dataField : "price",
     positionField : "date",
     operation : "COUNT",
     style : "aui-grid-my-footer-sum-total2"
   }, {
     labelText : "Count=>",
     positionField : "phone",
     style : "aui-grid-my-footer-sum-total2"
}];

// 푸터 레이아웃 그리드에 설정
AUIGrid.setFooter(myGridID, footerLayout);
NameDescription
colSpan
Type : Number   Version: 3.0

푸터 셀의 가로 병합을 지시합니다.

예를 들어 colSpan : 3 을 설정하면 자신을 포함하여 3개의 푸터 셀을 가로 병합 합니다.

기본값(default) : NaN.
dataField
Type : String

푸터의 연산자(operation 속성)가 참조할 데이터필드를 지정합니다.

예를 들어 "price"에 대하여 "합계(SUM)" 을 구하여 "price" 하단에 출력하고자 한다면 dataField, operation, positionField 의 값은 각각 "price", "SUM", "price" 입니다.

기본값(default) : null.
expFunction
Type : Function

푸터에는 dataField 와 미리 지정된 연산자(operation)에 맞게 계산된 값이 출력됩니다. 그러나 더 확장된 연산을 해야 할 필요가 있습니다.

기본으로 제공되는 연산 외에 사용자가 원하는 연산을 할 수 있도록 하는 함수입니다.

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

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

  • columnValues (Array) : dataField를 설정한 경우 해당 칼럼에 출력되는 모든 값들
 
expFunction : function(columnValues) {
        // 지정된 dataField 의 0번 값과 마지막 값을 더한 값 출력
        return Number( columnValues[0] + columnValues[columnValues.length-1] ); 
 }

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

만약 expFunction 에서 계산된 값을 푸터에 출력하고 싶지 않다면 positionField 를 설정하지 않으면 됩니다.

즉, expFunction 의 값은 최종적으로 푸터에 출력될 값이 아닌 중간값으로 연산만 하고, 다른 푸터 셀의 labelFunction 에서 참조값으로 사용될 때 positionField 를 설정하지 않습니다.

기본값(default) : null.
formatString
Type : String

푸터에 출력되는 값의 유형이 Number(numeric) 인 경우 숫자 포맷 형식을 지정합니다.

칼럼의 formatString 과 동일함으로 자세한 포맷 유형은 칼럼의 formatString 속성을 참고하십시오.(예:"#,##0")

숫자가 아닌 경우 지정한 formatString 은 무시됩니다.

기본값(default) : null.
labelFunction
Type : Function

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

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

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

  • value : dataField와 operation 을 설정한 경우, operation 으로 계산된 셀 값(value) 또는 labelText 설정한 경우 labelText 값
  • columnValues (Array) : dataField 를 설정한 경우 해당 칼럼에 출력되는 모든 값들
  • footerValues(Array) : 푸터에서 정의한 모든 값들. 즉, 푸터가 출력시킬 모든 값을 갖는 배열입니다.
 
labelFunction : function(value, columnValues, footerValues) {
   var myValue = 1000;
   // 로직 처리
   return myString;
}

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

기본값(default) : null.
labelText
Type : String

푸터에 연산된 값이 아닌 일반 텍스트를 지정하고자 할 때 사용하는 속성입니다.

예를 들어 "총합" 과 같은 일반 텍스트를 지정하고자 할 때 이 속성을 사용하십시오.

기본값(default) : null.
operation
Type : String

연산자를 지정합니다.

기본으로 지원되는 Footer 연산은 SUM, AVG, MIN, MAX, COUNT 입니다.

SUM, AVG, MIN, MAX, COUNT 이외의 연산은 expFunction 으로 계산할 수 있습니다.

expFunction 을 정의하면 operation 은 무시됩니다.

기본값(default) : null.
positionField
Type : String

푸터 값이 위치할 데이터필드를 지정합니다.

칼럼 레이아웃에 정의한 dataField 를 따라서 해당 칼럼 하단(푸터 위치)에 출력됩니다.

예를 들어 "price"에 대하여 "합계(SUM)" 을 구하여 "price" 하단에 출력하고자 한다면 dataField, operation, positionField 의 값은 각각 "price", "SUM", "price" 입니다.

dataField 값과 positionField 값이 같을 필요는 없습니다. 즉, "price" 합계를 "date" 칼럼 하단에 출력하고자 한다면 positionField 를 "date" 로 지정하십시오.

positionField 를 설정하지 않으면 푸터에 출력되지 않습니다.

positionField 에 "#base" 를 지정하면 행번호 칼럼 하단에 출력됩니다.

기본값(default) : null.
postfix
Type : String

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

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

기본값(default) : "".
prefix
Type : String

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

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

기본값(default) : "".
rounding
Type : String   Version: 3.0.6

formatString 에 의해 처리되는 소수점 반올림, 올림, 내림을 결정합니다.

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

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

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

  • "ceil" : 소수점 처리를 올림합니다.
  • "floor" : 소수점 처리를 내림합니다.
  • "round" : 소수점 처리를 반올림합니다.
기본값(default) : "round".
style
Type : String

푸터 셀에 개별 스타일을 지정합니다.

이 속성 값은 CSS 클래스 명입니다.

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

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

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

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

기본값(default) : null.
styleFunction
Type : Function

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

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

  • value : dataField와 operation 을 설정한 경우, operation 으로 계산된 셀 값(value) 또는 labelText 설정한 경우 labelText 값
  • footerValues(Array) : 푸터에서 정의한 모든 값들. 즉, 푸터가 출력시킬 모든 값을 갖는 배열입니다.
styleFunction : function(value, footerValues) {
   var myStyle = "my-custom-style";
   // 로직 처리
   return myStyle;
}

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

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

기본값(default) : null.
xlsxNumeric
Type : Boolean   Version: 3.0.6

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

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

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

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

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

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

기본값(default) : false.