그리드 화면 가이드

X2BEE 작업공간에서 활용하는 그리드 화면과 적용할 수 있는 기능을 설명합니다.

그리드 업데이트 내역에 따라 신규 기능 추가 및 사용 방법이 변경 될 수 있습니다.

그리드 검색

일반 검색

해당 그리드 내 데이터 검색이 가능하고 필터 기능을 대체하여 사용할 수 있습니다.

멀티 다중 데이터 처리 화면에서 사용합니다.

테이블내 인풋 검색

테이블 안에 포함된 기능 버튼은 아이콘으로 표기를 원칙으로 합니다.

입력필드(normal, readonly, disable)+[검색] 버튼(+[삭제] 버튼)의 순서로 구성됩니다.

그리드는 ‘기본 조회형’과 ‘데이터 처리형’ 두가지 유형으로 가이드를 제공합니다.

기본 구성은 조회를 통해 데이터를 출력하는 경우 상단 조회 하단 그리드로 구성됩니다.

두개이상의 그리드간의 데이터가 계층구조로 되어있을 경우 상위 정보 그리드는 좌측과 상단에 위치합니다.

기본 조회형 그리드

데이터 조회를 목적으로 하는 화면에서 데이터를 구조화해 제공하는 경우에 사용합니다.

사용을 위한 가이드는 다음과 같습니다.

그리드 내 선택 기능은 행/셀 선택 모두 제공하며, 선택 시 시각적 피드백이 명확해야 합니다.
- 행(uine) 단위선택 : 행 단위로 하이라이트 표기(ex. 백그라운드)
- 셀 단위 선택 : 정보가 있는 경우 Data가 있음을 표기 (ex. 텍스트언더라인)
2개 이상의 그리드로 구성된 경우 메인 그리드의 선택 항목에 대한 시각적 피드백이 명확해야 합니다.
건수 표기가 있는 경우, 그리도 맨 앞에 ‘No.’로 Number를 표기합니다.
조회 조건에의 데이터가 출력된 다건 삭제 기능이 포함된 그리드는

기본 조회형 그리드 예시

데이터 처리형 그리드

적용 데이터 조회 후 한번에 여러 행의 데이터를 수정, 삭제, 신규 처리

데이터 처리형 그리드 예시

그리드의 Col 순서는 No(기본제공) → 체크박스 → 내용의 순으로 배치합니다.
- Col 넓이 : 출력되는 데이터의 길이에 맞춰 설계자가 지정한 넓이 대로 설정
- 정형화된 데이터 길이(날짜, 계좌번호, 전화번호, 주민번호 등)가 있는 것은 해당 데이터 내용이 모두 보여지게 입력폼의 길이 표준화 진행
- 비정형 형태의 데이터 길이를 가지는 것을 설계 궈장 MaxLength에 맞춰 길이 조절.(*권장사항)
데이터의 가독성 향상을 위해 짝수행이 밝은 회색 배경 컬러 삽입 합니다.
헤더 영역의 text 정렬기준
- 상단 헤더(thead-th)의 정렬 기준 → 중앙정렬
- 좌측헤더(thody-th)의 정렬 기준 → 좌측정렬
데이터 영역의 text 정렬 기준
- 가운데 정렬 : 상품 번호, 성명, 일자, 기간, 번호(휴대폰, 전화, 팩스), 등록번호(사업자, 법인, 주민) 코드성 데이터를 포함하여 데이터 길이가 14Byte이내
- 좌측정렬 : 가변 데이터 길이를 가진 서술형 정보
- 우측정렬 : 금액, 수량 등 숫자 비교가 필요한 데이터

전체 Row 선택/해제가 필요한 경우 헤더에 있는 체크박스를 사용합니다.
모든 그리드에 소트(Sortable=true)를 적용합니다.
그리드 순번에 관한 ‘No’(RowNumVisble=true)는 기본 표기하며, 업무 성격에 따른 불필요한 경우에는 사용하지 않아도 됩니다.
관리자 고객 리스트 형식은 동일하며 많은 데이터 처리를 위해 내부 스크롤을 권장하며, 데이터 틀고정 필터링 등의 기능 사용이 가능합니다.
‘No’ 클릭할때 행이 활성화 되며 셀 클릭할때 해당 셀과 No만 활성화
클릭/온/오버/값에 따른 셀 변화는 다음과 같습니다.
- Over/No 클릭 시 행이 활성화 되며 셀 클릭시 해당 셀과 No만 활성화 됩니다.
- 오버-해당 셀의 활성화(백그라운드 컬러) 및 기능 버튼 추가
- 원클릭 - 활성화(백그라운드 컬러 + 박스 영역 추가)
- 더블클릭 - 변경 및 추가각 가능한 셀일 경우 입력 모드로 변환 됩니다.

마지막 업데이트 1일 전