AX5UI - GRID 4 (총계와 소계)

프로그래밍/자바스크립트 2018. 4. 4. 21:59
반응형

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



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"

반응형

댓글을 달아 주세요

  • 당신,, 깔끔한 정리,, 최고,,,! 정말 감사합니다,, 2018.08.28 10:33  댓글주소  수정/삭제  댓글쓰기

    당신,, 깔끔한 정리,, 최고,,,! 정말 감사합니다,,
    그루핑하는거 헷갈렸는데 정리 정말 잘되어있네요 ㅠㅠㅠㅠ
    정말감사해서 댓글남겨요 ㅠㅠㅠㅠㅠ

  • 2019.07.05 09:52  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • pentode 2019.07.06 19:08 신고  댓글주소  수정/삭제

      보통 셀의 색을 변경하는 방법을 있지만, footSum의 색깔을 변경하는 방법을 찾지를 못했습니다.

      AX5UI 개발자 포럼에 문의 하시는 것이 가장 빠를것 같습니다. 아래주소가 개발자포럼 주소입니다.

      https://jsdev.kr/c/axisj/ax5ui

  • minmax 2020.04.17 15:18  댓글주소  수정/삭제  댓글쓰기

    혹시 footsum에
    min, max 값 추가는 어떻게 할까요 ,,?

    • pentode 2020.06.06 22:34 신고  댓글주소  수정/삭제

      현재 제공되는 collector는 avg와 sum 뿐인것 같습니다. 하지만 직접 필요한 기능을 만들수 있도록 제공됩니다. 다음 URL을 잠고하세요..
      http://ax5.io/ax5ui-grid/demo/11-collector.html