푸터(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);
Name | Description |
---|---|
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 여야 합니다. 이 함수의 파라메터 및 형식은 다음과 같습니다.
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 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
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" 으로 포맷팅되어 출력됩니다. 소수점 처리 방식을 반올림, 내림, 올림을 결정짓는 속성입니다. 유효값은 다음과 같습니다.
"round" . |
style
| Type : String 푸터 셀에 개별 스타일을 지정합니다. 이 속성 값은 CSS 클래스 명입니다. 예를 들어 CSS 에서 설정 예는 style : "my-custom" 과 같습니다. 점(.) 은 생략하고 지정하십시오. 다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다. 엑셀 내보내기 시에는 해당 스타일의 글자색, 배경색, 볼드체, 이탤릭체만 적용됩니다. 기본값(default) :null . |
styleFunction
| Type : Function 푸터에 출력되는 셀의 개별 스타일을 동적으로 지정하는 함수입니다. styleFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
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 . |