====== 트리그리드 데이터그룹핑 가이드 ======
트리그리드 groupby API 예시 화면이다.
groupby API는 데이터셋에 저장된 데이터를 기준으로 동적으로 그룹핑하여 데이터를 표시하는 기능을 제공한다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/TREEGRID/treegrid_groupby
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/TREEGRID/treegrid_groupby.xml|treegrid_groupby.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/TREEGRID/treegrid_groupby.js|treegrid_groupby.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/TREEGRID/treegrid_groupby|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 화면 로드 이벤트
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(",");
}