[WebSquare] 웹스퀘어 girdView 자주쓰는 속성

1. 속성

focusMode	셀 선택시 선택 영역 표현 방법
autofit	그리드뷰 반응형
autoFitMinWidth	autoFit="allColumn" 설정을 적용하기 위해 필요한 GridView의 최소 너비
keepDefaultColumnWidth	autoFit="true"인 경우,rowNum 컬럼과 rowStatus 컬럼의 폭을 고정
fixedColumn	틀고정을 적용할 컬럼의 위치
fixedRow	틀고정을 시킬 행의 위치
overflowX	가로 스크롤 표시 여부
overflowY	세로 스크롤 표시 여부
rowMouseOverColor	마우스 오버된 행의 배경색
selectedCellColor	선택된 셀의 배경색
selectedRowColor	선택된 행의 배경색
oddEvenColorDisplay	짝/홀 수 행 마다 서로 다른 색을 사용
evenRowBackgroundColor	짝수 행의 배경색
oddRowBackgroundColor	홀수 행의 배경색
rowNumVisible	행번호 표시 여부
visibleRowNum	화면에 표현할 행 수
rowNmWidth	행번호 컬럼 폭
rowNumHeaderValue	rowNumVisible=true 일 때 헤더에 표시할 텍스트
rowNumBackgroundColor	행번호 컬럼의 바디 색
visibleRowNumFix	초기 gridView의 높이를 visibleRowNum 또는 initFixedHeightByRowNum으로 설정한 값에 해당하는 크기만큼 자동으로 늘려주는 설정
rowStatusVisible	각 행의 상태(추가/수정/삭제)를 별도의 컬럼에 아이콘으로 표시
rowStatusHeaderValue	rowStatusVisiblue=true 일 때 헤더에 표시할 텍스트
rowStatusWidth	rowStatusVisible="true" 설정을 적용할 경우, rowStatus 컬럼의 폭
defaultCellHeight	셀 기본 높이
disabledBackgroundColor	disabled="true" 설정이 적용된 셀 혹은 행의 배경색
disabledFontColor	disabled="true" 설정이 적용된 셀 혹은 행의 글자색
readOnly	전체 셀을 읽기 전용으로 설정
readOnlyBackgroundColor	readOnly="true" 속성이 설정된 셀의 배경색
readOnlyBackgroundImgCSS	readOnly="true" 속성이 설정된 셀의 배경 이미지의 CSS
viewType	셀의 inputType에 맞는 아이콘 표시 여부
textAlign	셀 텍스트 정렬
calenderValueType	달력 표현 방식 선택
colMerge	선택한 열에서 동일데이터 행 반복시 하나의 셀로 표현 (텍스트 수직중앙정렬 불가, 열 선택 후 속성 적용)
upperColumn	colMerge시에 기준으로 할 열의 ID (열 선택 후 속성 적용)
mergeCells	행 또는 열 기준으로 연속적으로 같은 데이터들을 병합함
mergeCol	mergeCells 속성 사용 시 특정 컬럼만 mergeCells를 적용할 때 대상이 되는 컬럼을 지정
mergeCellsFixedCols	fixedColumn 영역 내에서 행 또는 열 기준으로 연속적으로 같은 데이터들을 병합
mergeCellsFixedRows	fixedRow 영역 내에서 행 또는 열 기준으로 연속적으로 같은 데이터들을 병합
noResultMessageVisible	조회 결과가 없을 때(DataList에 데이터가 없을 때) 메시지 표시 여부
noResultMessage	조회 결과가 없을 경우(DataList의 데이터가 0건일 때) 표시할 메세지
noResultMessageClass	조회 결과 없음(DataList의 데이터가 0건일 때) 메시지에 별도의 스타일을 적용하기 위한 클래스
noResultMessageStyle	조회 결과 없음(DataList에 해당 데이터가 없을때) 메시지에 별도의 스타일을 적용

 

 

2. 사용Tip

1. 세로 강제 병합(데이터에 따른 자동 병합X) -> 수직 중앙정렬 가능

1. 그리드뷰 전체 높이 지정
2. fixedColumn 설정
3. mergeColumn 설정
4. mergeCellFixedCols -> bycol

 

2. 셀에 버튼 이미지 넣기

 

.gridBodyDefault.remove button {
    width: 12px;
    height: 14px;
    background: url(/cm/images/x1/delete_icon@1.png) no-repeat;
    background-size: cover;
    border: 0;
}

 

 

1. css 코드 작성하고
2. class 속성에 해당 클래스명 넣어주고
3. inputType 속성 button으로 변경