엑스플랫폼 쇼케이스
[엑스플랫폼] 쇼케이스 따라하기 (9) - CheckBox & Radio
아이야이야
2012. 1. 6. 11:06
- Grid > CheckBox & Radio
앞에서 언급했던 체크박스를 만드는 것과 좀 더 향상된 옵션 그리고 라디오 콘트롤까지 다룹니다.
체크박스 전체 선택
- (8)번에서 다루었던것과 유사한데 여기에 전체 선택후 사용자가 일부 항목을 해제한 경우
헤더 영역의 체크박스가 다른 형태로 보이게 됩니다.
ㅠㅠ 말로 하면 잘 이해가 안되고 그림으로...
그리드 만들고 이벤트 붙이는 것은 전과 동일하고
헤더 클릭시 이벤트 내용이 조금 달라집니다.
<font class="Apple-style-span" color="#666666"></font>function fn_checkAll(obj, nCell, visibleColid){if (visibleColid === null || visibleColid === undefined) {visibleColid = "";}var objDs = this.objects[obj.binddataset];var colid = obj.getCellProperty("body", nCell, "text").replace(/bind:/, "");var val = parseInt(obj.getCellProperty("head", nCell, "text")) == 0 ? 1 : 0;
if (obj.controlchecktype === -1) {val = 0;}obj.controlchecktype = val;obj.head.getCell(0).style.controlbackground = obj.orgcontrolbackground;
obj.setCellProperty("head", nCell, "text", val);
objDs.enableevent = false;for (var i=0; i<objDs.rowcount; i++) {if (visibleColid.length > 0 && parseInt(objDs.getColumn(i, visibleColid)) == 0) {continue;}objDs.setColumn(i, colid, val);}objDs.enableevent = true;}
특이한 내용을 살펴보면 앞선 코드에서 eval 로 처리했던 부분을 폼의 objects 속성으로 접근하게 했습니다.
objects[index], objects["id"], objects.length 와 같은 방식으로 접근할 수 있기 때문에 id를 사용할 수 있습니다.
visibleColid를 처리한것은 예제중에 일부 데이터만 체크박스를 보여주는 부분이 있어서 그렇습니다.
체크박스 처리가 필요없는 부분은 스킵하는 형식이죠.
그리드에서는 다음과 같이 처리합니다.
앞에서 본 것처럼 헤더의 체크박스 영역을 바꾸어주는 부분은 데이터셋에 oncolumnchanged 이벤트로 처리합니다.
<font class="Apple-style-span" color="#444444"></font>function fn_setCheckHalf(objDataset, objGrid, nCell){if (parseInt(objGrid.getCellProperty("head", nCell, "text")) == 1) {if (objDataset.findRowExpr("parseInt(CHECKED) <> 1") > -1) {objGrid.setCellProperty("head", nCell, "text", "0");objGrid.controlchecktype = -1;objGrid.orgcontrolbackground = objGrid.head.getCell(nCell).currentstyle.controlbackground;objGrid.head.getCell(nCell).style.controlbackground = "URL('Img::img_checksome.png') center middle";}}}
헤더 체크박스의 상태가 선택인 경우 findRowExpr() 함수에서 데이터셋에서 체크되지 않은 항목을 찾으면 해당 그리드의 헤더 체크박스 영역의 이미지를 살짝 바꾸어놓는 트릭입니다.
Cell.style.controlbackground [=stxBackGround] 을 사용하면 셀 단위의 배경 이미지를 바꿀 수 있습니다.
라디오버튼
- 그리드에서 라디오버튼을 사용할 일은 많지 않은데 그래도 필요하다면 사용할 수 있는 대안입니다.
displaytype은 none으로 설정하고 background 값을 표현식으로 처리해줍니다.
셀 배경값 처리의 우선순위는
background(테마, CSS) > background(CELL) > cellbackground (Grid Band) > background (ROW)
그리고 데이터의 처리는 그리드에서 oncellclick 이벤트를 사용해 처리합니다.
function fn_setRadio(obj, e, visibleColid){var objDs = this.objects[obj.binddataset];var colid = obj.getCellProperty("body", e.cell, "text").replace(/bind:/, "");
if (visibleColid !== null && visibleColid !== undefined) {if (parseInt(objDs.getColumn(e.row, visibleColid)) == 0) return;}objDs.enableevent = false;for (var i=0; i<objDs.rowcount; i++) {objDs.setColumn(i, colid, (i == e.row ? 1 : 0));}objDs.enableevent = true;}
데이터가 변경되면 바인딩된 background 가 바뀌면서 마치 선택한것과 동일한 효과를 만들어줍니다.
주의할점은 라디오버튼은 여러개가 있을때 한개만 선택된다는 거죠.