행이 데이터 레코드에 해당하고 열이 필드 또는 카테고리에 해당되는 데이터의 테이블을 작성합니다. 기능으로는 페이징 제어사항, 헤더 및 바닥글, 행 선택사항 및 조치에 대한 지원 등이 있습니다.
데이터 테이블 컴포넌트를
페이지로 끌어서 놓으십시오.
데이터 테이블 컴포넌트는
디자인 시에 페이지에서 다음과 같이 보입니다.
데이터 테이블 컴포넌트는
런타임 시에 페이지에서 다음과 같이 보입니다.
컴포넌트의 특성 보기는 컴포넌트에 설정할 수 있는 가장 일반적인 속성 세트를 표시하며, 컴포넌트에 따라 제어, 조치 또는 기타 컴포넌트를 추가하기 위한 옵션이 표시될 수도 있습니다. 특성 보기를 열려면 창 > 보기 표시 > 특성을 클릭하십시오. 하지만 특성 보기는 기본적으로 열려 있습니다.
데이터 테이블 컴포넌트의 이러한 공통 속성은 특성 보기의 h:dataTable, 표시 옵션 및 행 조치 탭에 표시됩니다. 전체 속성 목록은 모든 데이터 테이블 속성 테이블을 참조하십시오. 조치를 추가하고 테이블 표시 및 탐색을 변경하기 위한 추가 구성 옵션은 h:dataTable>표시 옵션 및 h:dataTable>행 조치 탭에 있습니다.
구성 옵션 |
설명 |
---|---|
행을 클릭할 때 수행되는 조치 추가 |
행을 클릭할 때 발생하는 런타임 조치를 작성할 수 있습니다. |
행 컨텐츠의 적당한 편집을 위해 양식을 표시하는 편집 열 추가 |
런타임 시 행 내 편집을 제공할 수 있습니다. |
고급 페이지 이동 추가 |
화살표를 사용하여 페이지 사이를 이동하는 컴포넌트를 바닥글에 추가합니다. |
이동 페이지 이동 추가 |
드롭 다운 목록에서 페이지를 선택할 수 있는 컴포넌트를 바닥글에 추가합니다. |
페이지 정보 추가 |
바닥글 영역에 페이지에 대한 통계를 표시하는 컴포넌트를 추가합니다. |
테이블에 선택 열 추가 |
테이블 컨텐츠와 관련된 선택사항이 있는 열을 추가할 수 있습니다. |
헤더에 선택을 조작하는 조치 추가 |
헤더 정보를 조작하는 조치를 작성할 수 있습니다. |
단순 페이지 이동 추가 |
바닥글에 다음 페이지로 이동하기 위한 단순 드롭 다운 메뉴를 작성하는 컴포넌트를 추가합니다. |
웹 스타일 페이지 이동 추가 |
사용자가 원하는 페이지를 클릭할 수 있도록 바닥글 영역에 각 페이지 번호를 추가합니다. |
카테고리화>테이블 행을 카테고리화하는 열 추가 카테고리화>테이블 행을 카테고리화하는 열 제거 |
테이블 정렬 값을 설정하고 열에 아이콘 또는 텍스트를 추가할 수 있는 행 카테고리화 컴포넌트가 있는 열을 추가합니다. 일단 추가하면 카테고리화 아이콘이 제거로 변경됩니다. |
열 |
테이블에서 열 컴포넌트 제거하거나 추가합니다. 각 열에 레이블, 너비 및 ID를 설정하고 테이블 내에서 이동할 수 있습니다. |
바닥글 표시 |
이 상자를 선택하면 데이터 테이블에 다른 컴포넌트로 채울 수 있는 바닥글 영역 f:facet (footer) 및 h:panelBox가 삽입됩니다. |
헤더 표시 |
이 상자를 선택하면 데이터 테이블에 다른 컴포넌트로 채울 수 있는 헤더 영역 f:facet (header) 및 h:panelBox가 삽입됩니다. |
사용자 정의 유효성 검증 코드를 작성/편집하려면 클릭 |
다양한 사용자 시작 이벤트에 대한 스크립트 또는 코드 스니펫을 입력할 수 있도록 빠른 편집 보기로 전환합니다. |
모든 속성 보기는
컴포넌트에 설정할 수 있는 모든 속성 테이블을 표시하는데, 특성 보기에서 액세스할 수 있는
해당 속성을 포함합니다. 모든 속성 보기로 전환하려면
특성 보기의 오른쪽 상단 모서리에 있는 모든 속성 아이콘 을 클릭하십시오.
속성 이름 |
특성 보기에 다음으로 표시됨 |
설명 |
---|---|---|
bgcolor |
배경색 |
# 기호로 시작하는 6자리 16진 RGB 값이나 색상 이름(예: black, white, blue 등)을 입력하여 배경색을 지정합니다. |
border |
경계 |
테이블에 대한 경계의 크기를 픽셀 단위로 지정합니다. |
binding |
표시되지 않음 |
보통 지원 파일에서 이 컴포넌트를 표시하는 UIComponent를 지정합니다. |
cellpadding |
채우기 |
셀 경계와 해당 컨텐츠 사이의 간격을 지정합니다. 이 속성의 값이 픽셀 길이이면, 네 개의 여백 모두 컨텐츠로부터 이 거리여야 합니다. |
cellspacing |
간격 지정 |
셀 사이에 남겨둘 간격을 픽셀 단위로 지정합니다. |
columnClasses |
열 클래스 |
데이터 테이블 컴포넌트의 열에 대해 정의된 CSS 스타일시트 스타일을 지정합니다. CSS 스타일시트 파일을 컴포넌트의 JSP에 링크해야 사용할 수 있습니다. 수동으로 또는 단추를 클릭하고 창 안에서 원하는 클래스를 선택하여 이를 입력할 수 있습니다. |
dir |
표시되지 않음 |
런타임 시 렌더링될 때 컴포넌트 방향을 지정합니다. 값은 다음 중 하나가 될 수 있습니다.
|
first |
표시되지 않음 |
표시할 첫 번째 행의 색인을 지정합니다. |
footerClass |
바닥글 클래스 |
데이터 테이블 컴포넌트의 열 헤더에 대해 정의된 CSS 스타일시트 스타일을 지정합니다. CSS 스타일시트 파일을 컴포넌트의 JSP에 링크해야 사용할 수 있습니다. 수동으로 또는 단추를 클릭하고 창 안에서 원하는 클래스를 선택하여 이를 입력할 수 있습니다. |
frame |
표시되지 않음 |
눈금을 둘러싸는 프레임 중 볼 수 있는 측면을 지정합니다. |
headerClass |
헤더 클래스 |
데이터 테이블 컴포넌트의 열 헤더에 대해 정의된 CSS 스타일시트 스타일을 지정합니다. CSS 스타일시트 파일을 컴포넌트의 JSP에 링크해야 사용할 수 있습니다. 수동으로 또는 단추를 클릭하고 창 안에서 원하는 클래스를 선택하여 이를 입력할 수 있습니다. |
id |
ID |
컴포넌트에 이름을 지정합니다. JSP 내에서 고유한 이름이어야 합니다. |
lang |
표시되지 않음 |
컴포넌트의 속성 값과 텍스트 컨텐츠의 기본 언어를 지정합니다. ISO 표준 언어 약어 코드를 취합니다(예: 영어의 경우 "en", 미국 영어의 경우 "en-US", 프랑스어의 경우 "fr", 독일어의 경우 "de"). |
rendered |
표시되지 않음 |
true 또는 false로 설정할 수 있습니다.
|
rowClasses |
행 클래스 |
행이 표시되는 대로 순환되는 클래스 세트를 지정합니다. 수동으로 또는 단추를 클릭하고 창 안에서 원하는 클래스를 선택하여 이를 정의할 수 있습니다. |
rows |
페이지당 행 수 |
런타임 시 표시되는 행 수를 지정합니다. |
rules |
표시되지 않음 |
테이블 내에서 셀 사이에 표시될 룰을 지정합니다.
|
style |
스타일: 특성 |
컴포넌트에 대한 CSS 스타일 정보를 지정합니다(예: style="font-size : 8pt ; color : red").선택한 컴포넌트의 특성(예: 글꼴 및 색상)을 정의합니다. 수동으로 또는 단추를 클릭하고 창 안에서 원하는 특성을 선택하여 완료할 수 있습니다. |
styleClass |
스타일: 클래스 |
이 요소를 렌더링할 때 적용할 공백으로 구분되는 CSS 스타일 클래스 목록을 지정합니다. 이 값은 생성된 마크업에서 "class" 속성으로 전달해야 합니다. 선택한 컴포넌트의 클래스(예: 스타일시트)를 정의합니다. 수동으로 또는 단추를 클릭하고 창 안에서 원하는 클래스를 선택하여 완료할 수 있습니다. |
summary |
표시되지 않음 |
시각적이지 않은 매체로 렌더링하는 사용자 에이전트의 요약 세부사항 문자열을 지정합니다. |
title |
표시되지 않음 |
런타임 시 도구 팁으로 브라우저에 표시되는 제목 텍스트를 지정합니다. |
value |
값 |
런타임 시 표시되는 컴포넌트의 초기 텍스트 값을 지정합니다. 지정된 값의 양식으로 또는 동적 값에 대한 포인터로서 표시될 정보를 포함합니다. |
var |
표시되지 않음 |
value 속성을 통해 사용 가능한 데이터의 참조 변수 이름을 지정합니다. |
width |
너비 |
픽셀 또는 백분율로 컴포넌트 너비를 지정합니다. 사용할 백분율을 지정하려면 값에 %를 추가하십시오. |