본문으로 건너뛰기

TDGrid (TD그리드) Widget Control

TDGrid(TD그리드) 위젯을 스크립트에서 제어할 때 사용하는 Widget Control(Property · Method · Event) 목록입니다. 위젯 소개와 사용법은 TDGrid 문서를 참고하세요.

정보

아래 예시의 tdgridID는 캔버스에서 TDGrid 위젯에 지정한 이름(ID)입니다. 스크립트에서는 위젯ID.멤버 형태로 접근합니다.

Widget Control 요약​

Widget Control종류시그니처설명
countPropertytdgridID.count데이터 행 개수 (읽기/쓰기, int)
currentPropertytdgridID.current현재(포커스) 행 인덱스 (읽기/쓰기, int)
selectPropertytdgridID.select선택된 행 인덱스 (읽기/쓰기, int)
addMethodtdgridID.add()빈 행을 추가하고 그 인덱스를 반환
insertMethodtdgridID.insert(index)지정 인덱스에 빈 행 삽입
removeMethodtdgridID.remove(index)지정 인덱스의 행 제거
clearMethodtdgridID.clear()모든 행 제거
setStateMethodtdgridID.setState(index, function)콜백으로 지정 행의 셀 값을 갱신
setColVisibleMethodtdgridID.setColVisible(orgIndex, isShow, isAnimation)컬럼 한 개 표시/숨김
setColVisibleGroupMethodtdgridID.setColVisibleGroup(orgIndexes, isShow, isAnimation)여러 컬럼을 한 번에 표시/숨김
isColVisibleMethodtdgridID.isColVisible(orgIndex)컬럼 표시 여부 반환 (bool)
setColWidthMethodtdgridID.setColWidth(orgIndex, width, isAnimation)컬럼 너비 설정
getColWidthMethodtdgridID.getColWidth(orgIndex)컬럼 너비 반환 (int, 없으면 0)
sortMethodtdgridID.sort(type, prop, isNumber, attrProp)바인딩 속성 값 기준으로 행 정렬 (bool)
initOriginIndexMethodtdgridID.initOriginIndex()각 행에 현재 위치를 원본 인덱스로 기록 (bool)
reorderColumnMethodtdgridID.reorderColumn(colIndex)지정 컬럼들을 앞으로 오도록 순서 재배치 (bool)
setRowVisibleMethodtdgridID.setRowVisible(orgRow, visible)행 한 개 표시/숨김
isRowVisibleMethodtdgridID.isRowVisible(orgRow)행 표시 여부 반환 (bool)
setRowColorMethodtdgridID.setRowColor(orgRow, color)행 배경색 설정 (빈 문자열이면 해제)
setRowBorderMethodtdgridID.setRowBorder(orgRow, color, width, bottomOnly)행 보더 설정
clearRowStyleMethodtdgridID.clearRowStyle(orgRow)행의 개별 스타일 전체 해제
setGroupHeaderMethodtdgridID.setGroupHeader(row, use, title, txtColor, bgColor)행 그룹 헤더 설정 - 현재 버전에서는 동작하지 않습니다
setRowHeightMethodtdgridID.setRowHeight(row, height)행 높이 설정 (height <= 0이면 해제)
calcTextLinesMethodtdgridID.calcTextLines(bulbID, colIdx, adjust)각 행에서 셀 텍스트의 줄 수 계산 (List<int>)
getMaxTextWidthMethodtdgridID.getMaxTextWidth(bulbID)셀 텍스트의 최대 렌더 너비 반환 (int, 없으면 -1)
getScrollPosMethodtdgridID.getScrollPos(isVert)현재 스크롤 위치 반환 (double)
setScrollPosMethodtdgridID.setScrollPos(isVert, pos)스크롤 위치 이동
onSelectedEventtdgridID.onSelected = (index) => { ... }행이 선택되었을 때 실행
onStartScrollEventtdgridID.onStartScroll = (isVertical, position) => { ... }스크롤 시작 시 실행
onUpdateScrollEventtdgridID.onUpdateScroll = (isVertical, position) => { ... }스크롤 위치가 바뀔 때마다 실행
onStopScrollEventtdgridID.onStopScroll = (isVertical, position) => { ... }스크롤 정지 시 실행
onScrollEndEventtdgridID.onScrollEnd = (isVertical) => { ... }스크롤이 끝에 도달했을 때 실행

Property​

count​

그리드의 데이터 행 개수입니다. 읽으면 현재 행 수를, 쓰면 행 수를 설정합니다.

  • 종류: Property (읽기/쓰기)
  • 타입: int

Example

const n = tdgridID.count;
tdgridID.count = 10;

current​

현재(포커스) 행 인덱스입니다.

  • 종류: Property (읽기/쓰기)
  • 타입: int

Example

const cur = tdgridID.current;
tdgridID.current = 0;

select​

선택된 행 인덱스입니다.

  • 종류: Property (읽기/쓰기)
  • 타입: int

Example

const sel = tdgridID.select;
tdgridID.select = 2;

Method​

add​

빈 행을 하나 추가합니다.

  • Parameters: 없음
  • Returns: int - 새로 추가된 행의 인덱스

Example

const row = tdgridID.add();

insert​

지정한 인덱스 위치에 빈 행을 삽입합니다.

  • Parameters: index (int) - 삽입할 행 인덱스
  • Returns: 없음

Example

tdgridID.insert(0);

remove​

지정한 인덱스의 행을 제거합니다.

  • Parameters: index (int) - 제거할 행 인덱스
  • Returns: 없음

Example

tdgridID.remove(2);

clear​

모든 행을 제거합니다.

  • Parameters: 없음
  • Returns: 없음

Example

tdgridID.clear();

setState​

지정한 행을 콜백으로 갱신합니다. 콜백은 해당 행을 인자로 받아 셀 값을 설정합니다.

  • Parameters: index (int) - 갱신할 행 인덱스 / function - 행을 인자로 받는 콜백
  • Returns: 없음

Example

tdgridID.setState(0, (row) => {
  row.priceCell.text = "72,500";
});

setColVisible​

원본 인덱스로 지정한 컬럼 한 개를 표시하거나 숨깁니다.

  • Parameters: orgIndex (int) - 컬럼의 원본(정의 순서) 인덱스 / isShow (bool) - true 표시, false 숨김 / isAnimation (bool, 생략/null이면 true) - 너비 전환 애니메이션 여부
  • Returns: 없음

Example

tdgridID.setColVisible(2, false, true);

setColVisibleGroup​

여러 컬럼을 원본 인덱스 배열로 한 번에 표시하거나 숨깁니다.

  • Parameters: orgIndexes (배열) - 컬럼의 원본 인덱스 배열 / isShow (bool) - true 표시, false 숨김 / isAnimation (bool, 생략/null이면 true) - 애니메이션 여부
  • Returns: 없음

Example

tdgridID.setColVisibleGroup([1, 3, 5], false, true);

isColVisible​

원본 인덱스로 지정한 컬럼이 현재 표시 중인지 반환합니다.

  • Parameters: orgIndex (int) - 컬럼의 원본 인덱스
  • Returns: bool - 표시 중이면 true

Example

const visible = tdgridID.isColVisible(2);

setColWidth​

원본 인덱스로 지정한 컬럼의 너비(논리 픽셀)를 설정합니다.

  • Parameters: orgIndex (int) - 컬럼의 원본 인덱스 / width (double) - 목표 너비(px) / isAnimation (bool, 생략/null이면 true) - 애니메이션 여부
  • Returns: 없음

Example

tdgridID.setColWidth(1, 80, true);

getColWidth​

원본 인덱스로 지정한 컬럼의 현재 너비(px)를 반환합니다.

  • Parameters: orgIndex (int) - 컬럼의 원본 인덱스
  • Returns: int - 컬럼 너비(px), 컬럼이 없으면 0

Example

const w = tdgridID.getColWidth(1);

sort​

바인딩된 속성 값을 기준으로 행을 정렬합니다.

  • Parameters: type (int) - 0 원래 순서, 1 오름차순, 2 내림차순 / prop (문자열) - 정렬 기준 속성의 점 표기 경로(예: "objet.text"), type이 0이면 무시 / isNumber (bool) - 숫자로 취급(비교 전 마스크 문자 제거) / attrProp (문자열) - 속성 경로, 없으면 빈 문자열
  • Returns: bool - 정렬을 수행했으면 true

Example

tdgridID.sort(2, "priceCell.text", true, "");

initOriginIndex​

각 행의 원본 인덱스 속성에 현재 위치를 기록해, 이후 sort(0, ...)으로 원래 순서를 복원할 수 있게 합니다.

  • Parameters: 없음
  • Returns: bool (현재 구현은 항상 false 반환)

Example

tdgridID.initOriginIndex();

reorderColumn​

colIndex에 나열한 컬럼들이 (지정한 순서대로) 앞쪽에 오도록 컬럼 순서를 재배치합니다. 나머지 컬럼은 상대 순서를 유지합니다.

  • Parameters: colIndex (배열) - 앞으로 보낼 컬럼의 원본 인덱스 배열
  • Returns: bool - 재배치를 수행했으면 true

Example

tdgridID.reorderColumn([3, 0, 1]);

setRowVisible​

원본 인덱스로 지정한 행 한 개를 표시하거나 숨깁니다.

  • Parameters: orgRow (int) - 행의 원본(데이터 소스) 인덱스 / visible (bool) - true 표시, false 숨김
  • Returns: 없음

Example

tdgridID.setRowVisible(3, false);

isRowVisible​

원본 인덱스로 지정한 행이 현재 표시 중인지 반환합니다.

  • Parameters: orgRow (int) - 행의 원본 인덱스
  • Returns: bool - 표시 중이면 true

Example

const visible = tdgridID.isRowVisible(3);

setRowColor​

행 단위 배경색을 설정합니다. 빈 문자열을 넘기면 해제합니다.

  • Parameters: orgRow (int) - 행의 원본 인덱스 / color (문자열) - 색 문자열(예: "#FF0000"), ""이면 해제
  • Returns: 없음

Example

tdgridID.setRowColor(3, "#FFEEEE");

setRowBorder​

행 단위 보더를 설정합니다. bottomOnly가 true면 아래쪽 한 변만, 아니면 네 변 모두 그립니다. color가 빈 문자열이거나 width가 0 이하이면 보더를 해제합니다.

  • Parameters: orgRow (int) - 행의 원본 인덱스 / color (문자열) - 보더 색(예: "#888888"), ""이면 해제 / width (double) - 보더 두께(px), 0 이하이면 해제 / bottomOnly (bool) - true 아래 변만, false 네 변 모두
  • Returns: 없음

Example

tdgridID.setRowBorder(3, "#888888", 1, true);

clearRowStyle​

행의 개별 스타일(표시·높이·배경·보더)을 모두 해제합니다.

  • Parameters: orgRow (int) - 행의 원본 인덱스
  • Returns: 없음

Example

tdgridID.clearRowStyle(3); //3번 행의 스타일을 해제

setGroupHeader​

경고

현재 버전에서는 동작하지 않습니다.

행에 그룹 헤더를 설정합니다.

  • Parameters: row (int) - 행의 원본 인덱스 / use (bool) - 그룹 헤더 사용 여부 / title (문자열) - 헤더 제목 / txtColor (문자열) - 글자 색 / bgColor (문자열) - 배경 색
  • Returns: 없음

Example

tdgridID.setGroupHeader(0, true, "그룹", "#000000", "#EEEEEE");

setRowHeight​

행 단위 높이를 설정합니다. height가 0 이하이면 설정을 해제하고 기본 행 높이로 되돌립니다.

  • Parameters: row (int) - 행의 원본 인덱스 / height (int) - 행 높이(px), 0 이하이면 해제
  • Returns: 없음

Example

tdgridID.setRowHeight(3, 48);

calcTextLines​

지정한 셀의 텍스트가 컬럼 너비(+보정값) 안에서 몇 줄로 감싸지는지 행마다 계산해, 행당 줄 수를 반환합니다.

  • Parameters: bulbID (문자열) - 측정할 셀의 ID / colIdx (int) - 너비 기준이 되는 컬럼의 원본 인덱스 / adjust (int) - 측정 전 컬럼 너비에 더할 보정값(px)
  • Returns: List<int> - 행별 줄 수 목록

Example

const lines = tdgridID.calcTextLines("nameCell", 0, -8);

getMaxTextWidth​

지정한 셀에 대해 모든 행 중 가장 넓은 한 줄 렌더 텍스트 너비(px)를 반환합니다.

  • Parameters: bulbID (문자열) - 측정할 셀의 ID
  • Returns: int - 최대 텍스트 너비(px), 데이터가 없으면 -1

Example

const maxWidth = tdgridID.getMaxTextWidth("nameCell");

getScrollPos​

지정한 축의 현재 스크롤 위치(px)를 반환합니다. 해당 축이 아직 스크롤되지 않았으면 0을 반환합니다.

  • Parameters: isVert (bool) - true 세로축, false 가로축
  • Returns: double - 현재 스크롤 오프셋(px)

Example

const pos = tdgridID.getScrollPos(true);

setScrollPos​

지정한 축의 스크롤 위치를 주어진 오프셋으로 이동합니다(스크롤 가능 범위로 clamp). 해당 축이 아직 스크롤 불가하면 아무 동작도 하지 않습니다.

  • Parameters: isVert (bool) - true 세로축, false 가로축 / pos (double) - 목표 오프셋(px)
  • Returns: 없음

Example

tdgridID.setScrollPos(true, 0);

Event​

onSelected​

행이 선택되었을 때 실행됩니다.

  • 종류: Event
  • 핸들러 인자: index - 선택된 행 인덱스
  • Returns: 없음

Example

tdgridID.onSelected = (index) => {
  // 선택된 행 처리
};

onStartScroll​

스크롤이 시작될 때 실행됩니다.

  • 종류: Event
  • 핸들러 인자: isVertical - 세로 스크롤이면 true, 가로면 false / position - 스크롤 시작 시점의 오프셋(px)
  • Returns: 없음

Example

tdgridID.onStartScroll = (isVertical, position) => {
  // ...
};

onUpdateScroll​

스크롤 오프셋이 바뀔 때마다 계속 실행됩니다.

  • 종류: Event
  • 핸들러 인자: isVertical - 세로 스크롤이면 true, 가로면 false / position - 현재 스크롤 오프셋(px)
  • Returns: 없음

Example

tdgridID.onUpdateScroll = (isVertical, position) => {
  // ...
};

onStopScroll​

스크롤이 멈출 때 실행됩니다.

  • 종류: Event
  • 핸들러 인자: isVertical - 세로 스크롤이면 true, 가로면 false / position - 스크롤이 멈춘 오프셋(px)
  • Returns: 없음

Example

tdgridID.onStopScroll = (isVertical, position) => {
  // ...
};

onScrollEnd​

스크롤이 콘텐츠의 끝(아래/오른쪽)에 도달했을 때 실행됩니다.

  • 종류: Event
  • 핸들러 인자: isVertical - 세로축이 끝에 도달했으면 true, 가로면 false
  • Returns: 없음

Example

tdgridID.onScrollEnd = (isVertical) => {
  // ...
};

공통 Widget Control (모든 위젯)​

노트

모든 위젯은 setProperty / getProperty / setStyleProperty 같은 이름 기반 공통 Widget Control(Method)을 사용할 수 있습니다. 공통 레퍼런스 문서(작성 예정)를 참고하세요.