넥사크로17 - 컴포넌트활용4 그리드

Grid
 Dataset의 내용을 격자 모양으로 표현하는 컴포넌트.
 Grid는 항상 Dataset과 바인딩해서 사용.

 

 

 

 Property
autofittype, autosizingtype , cellmovingtype, formats, selecttype…

 Method
createFormat, setCellPos, setCellProperty, updateToDataset

 Event
oncellclick, oncloseup, onexpandup, onheadclick

 

 

셀병합

 

우선 그리드를 더블클릭

Merge Cells (A big Cell) -> 아예 셀 병합 

Merge Cells (Having child cells) -> 병합을 함 ,하지만 각각의 속성은 유지 

alt 를 누르면 각각을 선택할 수 있다. 

 

 

그리드 Head 클릭시 데이터 Sort 구현

this.Grid1_onheadclick = function(obj:nexacro.Grid, e:nexacro.GridClickEventInfo)
{
    // 클릭된 헤더의 컬럼 식별자를 가져오기
    var sColId = obj.getCellProperty("body", e.cell, "text").split(":");

    // 그리드에 바인드된 데이터셋 가져오기
    var objDs = obj.getBindDataset();

    // 정렬을 위한 키스트링 설정 오름차순 
    objDs.set_keystring("S:+" + sColId[1]);
};

 

obj.getCellProperty("body", e.cell, "text")는 넥사크로 그리드에서 특정 셀의 속성 중에서 "text" 속성을 가져오는 코드

 

예를 들어, 만약 그리드의 헤더 셀에 "bind:FULL_NAME"라는 텍스트가 표시되어 있다면,

obj.getCellProperty("body", e.cell, "text")의 결과물은 "Column1: FULL_NAME "가 될 것입니다. 이 결과물은 문자열로 반환됩니다.

 

그리드 Head 클릭시 데이터 Sort 구현: 함수 

// Exe Sort
this.Grid1_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
this.fn_sort(obj,e);
};


this.fn_sort = function (obj:Grid, e:GridClickEventInfo)
{
    // 체크박스 헤더를 클릭한 경우 정렬을 수행하지 않음
    if(obj.getCellProperty("head", e.cell, "displaytype") == "checkboxcontrol") return;

    // 그리드에 바인드된 데이터셋 가져오기
    var objDs     = obj.getBindDataset();
    
    // 클릭된 헤더의 텍스트에서 ":"를 기준으로 나누어 컬럼 식별자 추출
    var sColId    = obj.getCellProperty("body", e.cell, "text").split(":");
    
    // 클릭된 헤더의 텍스트 가져오기
    var sHeadText = obj.getCellText(-1, e.cell);

    // 헤더 텍스트의 끝 문자가 오름차순 마크인 경우
    if(sHeadText.substr(sHeadText.length-1) == this.CONST_ASC_MARK){
        obj.setCellProperty("head", e.cell, "text", sHeadText.substr(0, sHeadText.length - 1) + this.CONST_DESC_MARK);
        objDs.set_keystring("S:-" + 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);
        objDs.set_keystring("S:+" + sColId[1]); // 데이터셋 정렬 키 설정 (오름차순)
    }
    // 그 외의 경우 (정렬 마크가 없는 경우)
    else{
        obj.setCellProperty("head", e.cell, "text", sHeadText + this.CONST_ASC_MARK);
        objDs.set_keystring("S:+" + sColId[1]); // 데이터셋 정렬 키 설정 (오름차순)
    }
    
    // 이전에 클릭된 헤더가 있고, 현재 클릭된 헤더와 다른 경우
    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));
    }

    // 현재 클릭된 헤더를 이전 클릭된 헤더로 저장
    this.nPrevCell = e.cell;
}

 

 

그리드에 바인드 되어있는 데이터셋 찾기

 

= getBindDataset() 혹은 

 

 

Grid2의 맨 앞쪽에 빈 컬럼을 추가하고 생성한 Dataset컬럼(COL_CHK) 바인딩

this.btn_Exe2_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//우선 데이터셋에 칼럼추가 
	this.Dataset2.addColumn("COL_CHK","STRING", 1);
	this.Dataset2.set_enableevent(false);
	for(var i=0; i<this.Dataset2.rowcount; i++){
		this.Dataset2.setColumn(i,"COL_CHK","0");
	}
	this.Dataset2.set_enableevent(true);
	//그리드에 칼럼추가 
	this.Grid2.insertContentsCol("body",0);
	this.Grid2.setCellProperty("body",0,"text","bind:COL_CHK");
};

 

1. this.Grid2.insertContentsCol("body", 0);: 그리드 (Grid2)의 "body" 영역에 새로운 열을 추가합니다. 0은 새로운 열이 추가될 위치를 나타냅니다. 여기서는 첫 번째 열로 추가됩니다.
2. this.Grid2.setCellProperty("body", 0, "text", "bind:COL_CHK");: 추가한 열의 속성을 설정합니다. 여기서는 text 속성을 설정하고, 해당 열의 텍스트를 "bind:COL_CHK"로 지정합니다. 이는 데이터셋에 있는 "COL_CHK" 필드와 바인딩되어 열의 각 셀에 데이터셋의 "COL_CHK" 필드의 값을 표시하게 됩니다.

// Exe 2-2
this.btn_Exe2_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid2.setCellProperty("body", 0, "displaytype", "checkboxcontrol");
	this.Grid2.setCellProperty("body", 0, "edittype"   , "checkbox");
	
	this.Grid2.setCellProperty("head", 0, "displaytype", "checkboxcontrol");
	this.Grid2.setCellProperty("head", 0, "edittype"   , "checkbox");
};

setCellProperty(a,b,c,d) :

a:cell이 속한 밴드 head or body or summary

b: cell의 인덱스

c:변경전 속성

d: 변경할 속성 

 

Head 선택시 전체 선택 기능 구현

this.Grid2_onheadclick = function(obj:nexacro.Grid, e:nexacro.GridClickEventInfo)
{
    // 클릭된 헤더의 첫 번째 셀인지 확인
    if (e.cell == 0) {
        // Head에 있는 값을 가져옴
        var nValue = this.Grid2.getCellText(-1, 0);
        
        // 값을 토글 (1이면 0으로, 0이면 1으로)
        nValue = (nValue == "1" ? "0" : "1");

        // 데이터셋 이벤트 비활성화
        this.Dataset2.set_enableevent(false);

        // 데이터셋의 모든 행의 COL_CHK 열 값을 변경
        for (var i = 0; i < this.Dataset2.rowcount; i++) {
            this.Dataset2.setColumn(i, "COL_CHK", nValue);
        }

        // 데이터셋 이벤트 다시 활성화
        this.Dataset2.set_enableevent(true);

        // 그리드 헤더의 값을 업데이트
        this.Grid2.setCellProperty("Head", 0, "text", nValue);
    }
};

getCellText (a,b): 

a:텍스트 값을 얻을 셀이 위치한 row의 인덱스  head: -1 ,summary:-2

b: 텍스트값을 얻을 셀의 인덱스 

 

head와 summary는 추가적인 값셋팅을 해줘야한다!

 

두번째페이지 수정해보자

stepindex를 1로 변경하기 = 레이아웃의 분할된 화면중, 화면에 표시할 화면의 인덱스 설정 

 

칼럼의 사이즈 ,이동 변경 가능 하도록

// Exe 3-1
this.btn_Exe3_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid3.set_cellmovingtype("col");
	this.Grid3.set_cellsizingtype("col");
};

 

칼럼 고정시키기 

// Exe 3-2
this.btn_Exe3_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//Column Fix 칼럼이동 못하게 
	this.Grid3.setFormatColProperty(2, "band", "left");

	//Row Fix 데이터행 고정 
	this.Grid3.setFixedRow(2);
};

setFixedRow(index) : 데이터행 고정시키기 

 

여기서도 할 수 있다. 

 

 

칼럼 고정을 다시 해제시키기 

// Exe 3-3
this.btn_Exe3_3_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//해제=원복시키기 
	for(var i=0; i<this.Grid3.getFormatColCount(); i++){
		this.Grid3.setFormatColProperty(i, "band", "body"); //left했던것을 body로
	}
	//해제해주기 
	this.Grid3.setFixedRow(-1);	
};

데이터행 고정 해제 : Grid.setFixedRow(-1);

 

칼럼 사이즈 변경 & 칼럼 숨기기 

// Exe 3-4
this.btn_Exe3_4_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid3.setFormatColProperty(2, "size", 100);
	this.Grid3.setFormatColProperty(5, "size", 0); 
};

setFormatColProperty 의 속성에는 size랑 band 밖에 없다 

band는 고정시키는 것임 

 

칼럼숨기기는 사이즈를 0으로 해서 없앴다 

하지만 사이즈만 죽인것이기떄문에 인덱스는 살아있다. 

 

엑셀 export에서 상관없게 하려면 ????

 

데이터 포맷아이디를 새로만든 그리드로 바꿔준다 

 

 

원본 그리드 포맷과 현재 변경한 그리드 포맷 비교 

그리드 개인화 기능 

 

// Exe 3-6
this.btn_Exe3_6_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var sCurFormat = this.Grid3.getCurFormatString();
	this.Grid3_1.set_formats("<Formats>" + sCurFormat + "</Formats>");
	
 	var sOrgFormat = this.Grid3.getCurFormatString(true);
	this.Grid3_2.set_formats("<Formats>" + sOrgFormat + "</Formats>");
};

true: 동적으로 변경된 포맷을 반영하여 반환 

false(defualt) : 현재상태를 리턴 

 

이동성이  없다고 하면 local 저장 

있다고 하면 브라우저에 저장  브라우저별로 저장 공간이 다르다  그렇다면 db에 저장 

 

그리드 - 트리레벨 treelevel

treeitemcontrl ,  tree 

 

이를 위해서 level컬럼이 반드시 있어야한다 

 

이렇게 설정하니 

모두 트리로 나오는데 ,

 펼쳐지게 하려면 

expand.all =   싹펼쳐준다 

 

 

그리드 - 트리레벨 : 트리를 클릭하면 열리고 닫히고 구현 

this.Grid4_oncellclick = function(obj:nexacro.Grid, e:nexacro.GridClickEventInfo)
{
    // 더블클릭하면 열리고 닫히고 
    var nGridRow = this.Grid4.getTreeRow(e.row);  // 클릭된 셀이 속한 행의 트리 인덱스를 가져옴
    
    // 펼쳐졌는지 닫혀졌는지 확인
    var nStatus  = this.Grid4.getTreeStatus(nGridRow);  // 해당 행의 트리 상태를 가져옴
    trace("e.row=" + e.row + " : TreeRow=" + nGridRow + " : Status=" + nStatus);

    // 단말노드의 상태는 3 
    if (nStatus == 3) return;  // 단말 노드이면 함수 실행 중지

    // 상태를 토글 (0이면 1로, 1이면 0으로)
    nStatus = (nStatus == 0 ? 1 : 0);  // 트리 상태를 토글함

    // 트리 상태를 설정하여 열리거나 닫히게 함
    this.Grid4.setTreeStatus(nGridRow, nStatus);  // 변경된 트리 상태를 설정하여 해당 행을 열거나 닫히게 함
};

 

그리드 - 소계 표현 

this.btn_Exe5_1_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{	
	this.Dataset5.set_keystring("G:-CORP,+DEPT");
	var sExpr = "expr:(dataset.getRowLevel(currow) == 2 ? CORP+' Sum' : CORP)";
	this.Grid5.setCellProperty("body", 0, "text", sExpr);
	sExpr = "expr:(dataset.getRowLevel(currow) == 0 ? DEPT : (dataset.getRowLevel(currow) == 1 ? DEPT + ' Sum' : ''))";
	this.Grid5.setCellProperty("body", 1, "text", sExpr);
};

 

set_keystring("G: ");  그룹핑을 하면 소계가 생긴다 

// Exe 5-2
this.btn_Exe5_2_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid5.appendContentsRow("summary");
	this.Grid5.setCellProperty("summary", 4, "text", this.Dataset5.getSum("SALARY"));
};

 

// Exe 5-3
this.btn_Exe5_3_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset5.set_reversesubsum(true);
	this.Grid5.set_summarytype("top");
};

이부분은 property창에서도 할  수 있다. 

 

빈부분 자동으로 채우기

'

 

 autofit 

 

셀 선택영역 바꾸기 , 셀하나만  혹은 멀티  등등 

 

데이터가 많을때 , 빠르게 스크롤 이동= 한개만 보여주는 방법 

 

 

업데이트가 되었을떄 바로 업데이트 하는 방법 

Edit 컴포넌트를 만든후, Event 의 oninput을 더블클릭 

updateToDataset() ; 

둘은 같은 데이터셋을 썻기 떄문에 연관이 있다 

 

 

선택하였을때 편집모드 활성화