트리그리드 데이터그룹핑 가이드

트리그리드 groupby API 예시 화면이다.

groupby API는 데이터셋에 저장된 데이터를 기준으로 동적으로 그룹핑하여 데이터를 표시하는 기능을 제공한다.

템플릿 위치: /HTML5/COMPONENT/TREEGRID/treegrid_groupby

템플릿 파일

• treegrid_groupby.xml
• treegrid_groupby.js
• 새창으로 실행

// 화면 로드 이벤트
function screen_on_load()
{
	this.btn_groupby_on_mouseup();
}

// "그룹핑" 버튼 이벤트
function btn_groupby_on_mouseup(objInst)
{
	this.GridGroupBy();
}

function GridGroupBy()
{
	var strGroupColumnName;

	// 그리드 자동 컬럼 너비 속성 설정 (0: 컬럼의 너비를 자동조정하지 않음)
	this.grdTreeGrid.setautocolumnwidth(0);

	// 그리드 그룹핑 대상 컬럼 이름을 구함
	strGroupColumnName = this.GetGroupColumnName();

	// 그리드 데이터 그룹핑 처리
	this.grdTreeGrid.groupby("xDataSetID_01", strGroupColumnName, "Column_1,Column_2,Column_3,Column_4,Column_5");

	// 그룹핑 대상 아이템 배경색 및 병합 처리
	this.CellMerge();

	// 그룹핑 컬럼 너비 설정
	this.ColumnWidth();

	// 그리드 자동 컬럼 너비 속성 설정 (1: 칼럼의 너비를 그리드 너비에 맞춤)
	this.grdTreeGrid.setautocolumnwidth(1);
}

// 그리드 컬럼 너비 조정
function ColumnWidth()
{
	var nCol, nColumnCount;

	// 컬럼 갯수를 구함
	nColumnCount = this.grdTreeGrid.getcolumncount();

	// 트리 컬럼 너비 설정
	this.grdTreeGrid.setcolumnwidth(0, 225, false);

	// 트리 컬럼을 제외한 데이터 컬럼 너비 설정
	for (nCol = 1; nCol < nColumnCount; nCol++) {
		this.grdTreeGrid.setcolumnwidth(nCol, 120, false);
	}
}

// 그룹핑 대상 아이템 배경색 및 병합 처리
function CellMerge()
{
	var nRow, nColumnCount, nRowCount;

	nColumnCount = this.grdTreeGrid.getcolumncount();
	nRowCount = this.grdTreeGrid.getrowcount();

	// 그룹핑 대상 행의 배경색 및 데이터 컬럼 병합 처리
	for (nRow = 0; nRow < nRowCount; nRow++) {
		// 자식이 있는 행인 경우, 배경색 및 트리열을 제외한 컬럼 병합 처리
		if (this.grdTreeGrid.ishaschildren(nRow) == true) {
			this.grdTreeGrid.setlinenumberbackcolorex(nRow, factory.rgb(240, 255, 220), false);
			this.grdTreeGrid.setitembackcolorrange(nRow, 0, nRow, nColumnCount - 1, factory.rgb(240, 255, 220), false);
			this.grdTreeGrid.setitemmergerangeex(nRow, 1, nColumnCount - 1, false);
		}
	}
}

// 그룹핑 대상 컬럼 이름을 콤마로 구분하여 리턴
function GetGroupColumnName()
{
	var strSelectCode, arrColumnName;

	arrColumnName = [];

	// 대분류 콤보박스 값 처리
	strSelectCode = this.cboGroup1.getselectedcode();
	if (strSelectCode != "9") {
		arrColumnName.push("Column_" + strSelectCode);
	}

	// 중분류 콤보박스 값 처리
	strSelectCode = this.cboGroup2.getselectedcode();
	if (strSelectCode != "9") {
		arrColumnName.push("Column_" + strSelectCode);
	}

	// 소분류 콤보박스 값 처리
	strSelectCode = this.cboGroup3.getselectedcode();
	if (strSelectCode != "9") {
		arrColumnName.push("Column_" + strSelectCode);
	}

	return arrColumnName.join(",");
}