[엑스플랫폼] 쇼케이스 따라하기 (8) - 전체선택/해제

- Grid > 전체 선택/해제

아마 일반적인 웹 애플리케이션에서 가장 많이 사용하는 패턴이 아닌가 싶습니다.

순서대로 따라가보겠습니다.

1. 적절한 Dataset을 만들어줍니다.

2. 그리드를 만듭니다.

3. 그리드에 Dataset을 연결해줍니다.

4. 디자인모드에서 그리드를 더블클릭하고 Grid Contents Editor 에서

첫번째 컬럼(또는 체크박스를 넣고자 하는 컬럼)의 헤드와 바디 영역의 속성 중에서

displaytype 과 edittype을 'checkbox'로 변경합니다.

5. 바디 영역은 체크여부를 가져오는 데이터 컬럼과 연결해줍니다.

<Band id="body">

<Cell displaytype="checkbox" edittype="checkbox" text="bind:CHECKED"/>

<Cell col="1" displaytype="normal" text="bind:TEST_VAL"/>

</Band>

6. 그리드에 onheadclick 이벤트를 추가합니다.

체크박스를 지정한 컬럼인 경우에 관련 이벤트를 처리하는 함수를 연결합니다.

7. gf_SetGridCheckAll()

var gv_IsGridCheckAll = 0;

function gf_SetGridCheckAll(obj:Grid, e:GridClickEventInfo)

{

var dsObj = eval(obj.binddataset);

var v_Colid = obj.getCellProperty("body", e.cell, "text").replace("bind:", "");

gv_IsGridCheckAll = (gv_IsGridCheckAll ? 0 : 1);

dsObj.enableevent = false;

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

dsObj.setColumn(i, v_Colid, gv_IsGridCheckAll);

}

obj.setCellProperty( "Head", 0, "expr", gv_IsGridCheckAll);

dsObj.enableevent = true;

}

범용으로 사용하는 함수이기 때문에 데이터셋을 직접 지정하지 않았네요.

obj.binddataset 을 바로 가지고 오면 문자열 형태로 오기 때문에 eval로 감싸주었습니다.

v_Colid 변수에는 바인딩된 컬럼 이름을 담아냅니다.

그리고 나서 해당 컬럼의 데이터를 일괄적으로 변경해줍니다.

* 쇼케이스에서 제공하는 형식은 보편적인 방식이고 애플리케이션에 따라

조금씩 요구사항이 달라질 수 있습니다.

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