AX5UI - GRID 4 (총계와 소계)

이번에는 그리드에서 총계와 소계를 표현하는 방법을 알아 봅니다.

 

 

1. 그리드에 계산열 추가

 

- 그리드내의 다른 컬럼 값으로 계산된 값을 가지는 컬럼을 추가 합니다.

- "unitPrice"는 그리드의 데이터에는 없는 값이지만, 금액을 주유량으로 나눈값으로 리터당 단가를 표시합니다.

 

columns: [
	{
		key: "unitPrice",
		label: "단가",
		formatter: function() {
			return ax5.util.number(this.item.price / this.item.amount, {"money": true});
		},
		align:"center"
	}
]

 

 

2. 그리드내의 소계

 

- 소계는 지정된 기준 컬럼에 대해 오름차순으로 정렬할 후 동일한 값끼리 그룹핑하여 소계를 보여줍니다.(처음 입력된 데이터의 순서와 관계없이 기준컬럼으로 데이터가 정렬됩니다.)

- body:{grouping:{by:["date"]}} 처럼  by 항목의 컬럼 배열로 기준 컬럼을 지정합니다.

 

body: {
	grouping: {
		by: ["date"],
		columns: [
			{label: function() {return this.groupBy.labels.join(", ");}, colspan:2, align:"center"},
			{key:"amount", collector:"avg", formatter:"money", align:"right"},
			{},
			{key:"price", collector:"sum", formatter:"money", align:"right"},
			{
				key:"unitPrice",
				collector:function() {
					var value = 0;
					this.list.forEach(function(n) {
						if(!n.__isGrouping) value += (n.price / n.amount);
					});
					return ax5.util.number(value, {"money": 1});
				},
				align:"right"
			}
		]
	}
}

 

- label에 함수를 사용할 수 있습니다. 여러 컬럼이 기준 컬럼으로 지정 되었을 경우 컬럼명을 콤마(,)로 이어서 label 로 만들어 줍니다. 현재 예제에서는 "date" 한컬럼으로 지정되어 있습니다.

- label을 만들때 formatter로 만들어진 값이 아닌 원래 데이터값이 사용되어 집니다. 필요하면 사용자 함수로 표시방법을 바꿔야 할 것 입니다.

- collector 프로퍼티를  사용하여 합계("avg") 또는 평균("avg") 를 표시할 수 있습니다.

- "unitPrice" 는 원래 데이터가 없는 만들어진 컬럼이므로  "sum", "avg" 를 사용할 수 없습니다. collector 에 직접 함수를 사용하여 값을 표시합니다.

- 현재 마지막 그룹에는 소계가 표시되고 있지 않은것 같습니다.

 

 

 

3. 그리드에서 총계를 표시합니다.

 

- 그리드 설정항목에 footSum 항목을 사용합니다.

- footSum 은 2차원 배열([[]]) 입니다. 여러줄의 summary를 표시할 수 있습니다.

 

footSum: [
	[
		{label: "총계", colspan:2, align:"center"},
		{key:"amount", collector: "avg", formatter:"money", align:"right"},
		{},
		{key:"price", collector:"sum", formatter:"money", align:"right"},
		{
			key:"unitPrice",
			collector:function() {
				var value = 0;
				this.list.forEach(function(n) {
					if(!n.__isGrouping) value += (n.price / n.amount);
				});
				return ax5.util.number(value, {"money": 1});
			},
			align:"right"
		}
	]
]

 

- footSum 배열 내의 열 객체({})를 사용해서 Summary행의 컬럼을 지정합니다. 기본적으로 그리드의 columns 설정과 거의 동일합니다.

- colspan:2 는 열 두 개를 합칩니다.

- {} 빈 중괄호는 빈 컬럼을 지정합니다.

- Summary에서 collector property로  합계("avg") 또는 평균("avg") 를 표시할 수 있습니다.

- "unitPrice" 컬럼에 대해서 함수를 사용하여 값을 표시합니다.

 

 

4. 실행결과 입니다.

 

 

 

※ 전체소스

grid_total.zip

다운로드

 

※ 참고

1. ax5.util.number 함수는 숫자 값을 다양한 형식으로 보여줍니다.

 

- 옵션 : round - 반올림, money - 천단위 콤마, byte - (KB, MB, GB 표시), abs - 절대갑

 

사용예)

- ax5.util.number(123456789.678, {round: 1}));

- ax5.util.number(123456789.678, {round: 1, money: true}));

- ax5.util.number(123456789.678, {round: 2, byte: true}));

- ax5.util.number(-123456789.678, {abs: true, round: 2, money: true}));

 

 

2. 자바스크립트 배열의 join 메소드는 배열 요소를 붙여 문자열을 만들어 줍니다.

 

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var energy = fruits.join(",");

 

"Banana,Orange,Apple,Mango"