2022년 2월 14일 - Grid의 Column과 Cell, Head 클릭시 Sort 구현

http://demo.nexacro.com/EduPlay/_web_/index.html?version= 

http://demo.nexacro.com/EduPlay/_web_/index.html?version=

 

 

 

//Grid 1과 Grid1-1의 Body 밴드 컬럼과 Cell의 개수 구하기
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//getFormatColCount는 Grid 포맷에 정의된 Column의 갯수를 반환하는 메서드
	var nColCnt0 = this.Grid00.getFormatColCount();
	
	//getCellCount는 Grid에서 특정 밴드에 정의된 Cell의 갯수를 반환하는 메서드
	var nCellCnt0 = this.Grid00.getCellCount("body");

	var nColCnt1 = this.Grid01.getFormatColCount();
	var nCellCnt1 = this.Grid01.getCellCount("body");

	//결과확인
	var sText = "Grid0 Col=" + nColCnt0 + " : Cell=" + nCellCnt0 + "\n";
		sText += "Grid1 Col=" + nColCnt1 + " : Cell=" + nCellCnt1;

	this.TextArea00.set_value(sText);
};


//그리드 oncellclick 이벤트의 e.col과 e.cell의 차이
//GridClickEventInfo를 이용해 받은 정보(e)를 토대로 선택된 Column의 index 값과 Cell의 값을 구해서 비교
this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var sText = "e.col = " + e.col + "e.cell = " + e.cell;
	
	//첫번째 데이터는 cell번호와 index가 동일
	//두번째 데이터는 cell번호와 cell번호가 일치하지 않을수도 있음
	this.TextArea00.set_value(sText);
};


//Cell에 바인딩되어 있는 데이터셋의 컬럼 ID 구하기
this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nCellCnt = this.Grid00.getCellCount("body");
	
	var sText = "";
	
	for(var i=0; i<nCellCnt; i++){
		
		//어디에, 몇번째, 속성값
		var sColId = this.Grid00.getCellProperty("body", i, "text");
		
		//Text에 바인딩된 컬럼은 bind: ColumnID로 표시된다.
		//ex) bind:Name
		
		//split은 구분문자를 기준으로 문자열을 분할하여 배열로 반환하는 메서드
		var arrCol = sColId.split(":");
		
		sText += "\n text= " + sColId;
		
		//구분 문자 뒤에 있는 ColumnID 값을 결과에서 확인
		sText += "\n ColumnID= " + arrCol[1];
	}
	
	this.TextArea00.set_value(sText);
};


//그리드 Head의 onhead 클릭 이벤트 설정

//솔트에 사용될 마크 지정
this.CONST_NONE_MARK = "";
this.CONST_ASC_MARK = "↑";
this.CONST_DESC_MARK = "↓";

//다른걸로 정렬 기준 변경시 옆에 마크 사라지는 것 구현하기
this.nPrevCell = -1;

//그리드 Head 클릭시 Data Sort 구현하기
this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	//그리드에 바인드된 Dataset을 구해야함
	var objDs = obj.getBindDataset();
	
	//Cell의 text 속성값을 구해서 Split을 이용해 bind: 뒤에 붙은 ColumnID 값을 구한다. 
	//스플릿안하면 bind:~ 로 나오고, 하면 bind, ~ 로 나뉘어서 나오게 된다.
	var sColId = obj.getCellProperty("body", e.cell, "text").split(":");
	
	//-1로 설정시 Head, 0은 Body, -2는 Summary에 적용됨
	//getCellText는 인수로 전달된 위치의 Cell에 표시되는 text값을 반환하는 메서드
	var sHeadText = obj.getCellText(-1, e.cell);
	
	var sText = "sColId : " + sColId + "\nsHeadText : " + sHeadText;
	
	//값 확인하기
	this.TextArea00.set_value(sText);
	
	//if문은 마지막 글자만 비교하는것
	
	//Head의 text값에 마크가 Ascending이면 Cell의 특정 속성값을 설정하는 setCellProperty 메서드를 이용하여
	//마크를 Descending으로 변경해 내림차순으로 정렬함
	if (sHeadText.substr(sHeadText.length-1) == this.CONST_ASC_MARK)
	{
		//마크를 속성값 변경 메서드를 이용하여 오름차순으로 변경 : 0~마크전 + new 마크
		obj.setCellProperty("head", e.cell, "text", sHeadText.substr(0, sHeadText.length-1) + this.CONST_DESC_MARK);
		
		//내림차순 솔트
		//set_keystring : 테이블 그룹핑이나 정렬할 때 사용  
		//G- 그룹핑 S- 정렬 (- + 내림차순/오름차순)
		objDs.set_keystring("S:-" + sColId[1]);
	
		//확인
		this.TextArea00.set_value("sColId[1]: " + sColId[1]);
		
	} else if(sHeadText.substr(sHeadText.length-1) == this.CONST_DESC_MARK) {
	
		obj.setCellProperty("head", e.cell, "text", sHeadText.substr(0, sHeadText.length-1) + this.CONST_ASC_MARK);		

		//오름차순 솔트 - sColId의 1번째 컬럼으로 설정
		objDs.set_keystring("S:+" + sColId[1]);

	} else {
	
		//Head에 Text에 마크가 존재하지 않을 경우 기본값으로 Asc로 설정
		obj.setCellProperty("head", e.cell, "text", sHeadText + this.CONST_ASC_MARK);
	}
	
	
	//다른걸로 정렬 기준 변경시 옆에 마크 사라지는 것 구현하기
	//셀의 값이 초기값이 아니고 현재 셀이 아닐 때, 마크를 삭제하고 원 헤드값을 설정한다
	if(this.nPrevCell > -1 && this.nPrevCell != e.cell){
		var sPrevText = obj.getCellText(-1, this.nPrevCell);
		obj.setCellProperty("head", this.nPrevCell, "text", sPrevText.substr(0, sPrevText.length-1));
	}
	
	//현제 cell 정보로
	this.nPrevCell = e.cell;
};