[엑스플랫폼] 쇼케이스 따라하기 (7) - Grid Basic

- Grid > Grid Basic

말은 기본이라고 해놓고 처음부터 동적인 데이터 생성 등 복잡한 내용이 처리되고 있네요. ㅠㅠ

역시 소스를 따라가보는 식으로 진행합니다.

function gfn_InitDataset(oDs, bFlag, bCheck)

- 기본 데이터셋을 만들어놓고

추가적인 컬럼을 생성하고 데이터를 추가하는 부분이 있습니다.

oDs.enableevent = false;

if(bFlag) oDs.addColumn("S_FLAG", "String", 1);

if(bCheck) oDs.addColumn("CHK", "String", 1);

for(var i=0; i<oDs.getRowCount(); i++)

{

if(bFlag) oDs.setColumn(i, "S_FLAG", "N");

if(bCheck) oDs.setColumn(i, "CHK", "0");

}

oDs.enableevent = true;

addColumn() 이나 setColumn()은 그렇다치고

enableevent 을 처리 영역 앞뒤에서 감싸주는 것이 특이하네요.

enableevent 은 Dataset의 이벤트 발생여부를 설정하는 속성입니다.

일반적으로 많은 양의 데이터가 변환되는 경우 데이터 변경하는 건마다 이벤트가 처리되어 화면이 깜빡이는 현상이 있는데

이를 막기 위해 enableevent 속성을 false로 설정하면 화면의 깜빡임 현상을 막아주고

성능을 개선할 수 있습니다.

NO 숫자 대신 화살표 표기하기

- 특별한 기능은 아니지만 참고할만한 팁입니다.

간단하게 해당 셀에 정규표현식을 추가해서 처리했더군요.

해당 그리드 body에서 다음과 같이 처리를 하였습니다.

<font class="Apple-style-span" color="#666666"></font>

<Band id="body">

<Cell/>

<Cell col="1" text="expr:(Grid00.selecttype == &quot;currow&quot;) &amp;&amp; (rowposition == currow) ? &quot;▶&quot; : currow +1"/>

<Cell col="2" displaytype="checkbox" edittype="checkbox" text="bind:CHK"/>

<Cell col="3" text="bind:Column0"/>

<Cell col="4" text="bind:Column1"/>

<Cell col="5" displaytype="normal" edittype="none" text="bind:Column2"/>

<Cell col="6" displaytype="date" edittype="date" text="bind:Column3"/>

<Cell col="7" text="bind:Column4"/>

<Cell col="8" text="bind:Column5"/>

<Cell col="9" text="bind:Column6"/>

</Band>

UX 스튜디오 디자인 모드에서 그리드를 클릭하고 Grid Contents Editor 에서

해당 cell 의 text 속성을 수정해도 됩니다.

expr:(Grid00.selecttype == "currow") && (rowposition == currow) ? "▶" : currow +1

그리고 기본적으로 선택된 열은 반전된 색이 표시되는데 이를 사용하지 않고자 한다면

그리드에서 useselcolor 속성을 false 로 설정해주면 됩니다.

행추가와 행삽입

- 추가는 가장 뒷쪽 인덱스에 추가되는 것이고 삽입은 선택된 위치에 추가되는 차이가 있습니다.

function Button00_onclick(obj:Button,  e:ClickEventInfo)

{

var nRow = Dataset00.addRow();

Dataset00.setColumn(nRow, "CHK", "0");

Dataset00.setColumn(nRow, "S_FLAG", "I");

}

function Button01_onclick(obj:Button,  e:ClickEventInfo)

{

var nRow = Dataset00.insertRow(Dataset00.rowposition);

Dataset00.setColumn(nRow, "CHK", "0");

Dataset00.setColumn(nRow, "S_FLAG", "I");

}

insertRow는 지정된 숫자가 전체 데이터보다 큰 경우에는 addRow 처럼 마지막 위치에 추가됩니다.

데이터 삭제 처리

- 삭제 처리하는 함수에 흥미로운 기능이 있네요.

체크박스가 선택되어있는지 여부를 다음과 같이 체크하고 있습니다.

if(Dataset00.getSum("parseInt(CHK)") > 0)

체크된 셀의 값은 1이기 때문에 전체 합을 내어 0보다 크다면 선택한 것이 있다는 이야기겠죠.

Dataset.getSum(strExpr[,nStart[,nEnd]]) 에서는 계산식이나 컬럼을 사용할 수 있습니다.

http://cafe.naver.com/xplatform101/156