AUIGrid 3.0 DEMO
- 쇼케이스
-
1. 그리드 기본
- JSON 그리드 기본 출력
- XML 그리드 기본 출력
- CSV 그리드 기본 출력
- JS Array 그리드 기본 출력
- 셀 세로 병합(row merge)
- 참조 후 셀 세로 병합(row merge)
- 셀 가로 병합(column merge)
- 고정 칼럼(FixedColumns)
- 고정 행(FixedRows)
- 고정 칼럼, 행 같이 적용
- 셀, 행 선택 모드
- 셀, 행 마우스 오버 모드
- 워드랩(wordWrap) - 자동 행 높이
- 워드랩(wordWrap) - 고정 행 높이
- 칼럼 보이기/숨김 설정
- 칼럼 사이즈 고정(px), 비율(%) 설정
- 칼럼 사이즈 변경
- 그리드 사이즈 변경
- 가로 스크롤 없는 그리드
- 세로 스크롤 없는 그리드
- 그리드 정렬(Sorting)
- 그리드 행, 열 스타일링(Styling)
- Master-Details 표현
- 그리드-Form 에 확장 정보 표현
- 의존적 칼럼 관계(칼럼 합계 및 연산)
- 스크롤 최하단에서 데이터 요청(lazyLoading)
- 그리드 상태 저장/유지
- 셀 선택 블럭 합계, 개수 등 표시
- 2. 헤더(Header) 및 칼럼(Column)
- 3. 그리드 푸터(Footer)
- 4. 그리드 툴팁(Tooltip)
- 5. 계층형 데이터 구조(TreeGrid)
-
6. 그룹핑 소계(합계, 평균, 개수 등)
- 소계 - 셀병합 기본형 (Type 1)
- 소계 - 소계행도 병합형 (Type 2)
- 소계 - 소계행 열 일치형 (Type 3)
- 소계 - 트리 기본형
- 소계 - 트리 통합형
- 소계행 상단에 출력하기
- 다수의 소계행 (평균, 개수 등) 출력
- 선택적 소계 구성하기
- 1건인 경우 소계 제외 시키기
- 조건에 맞는 값만 소계 구성하기
- 조건식을 지정하여 소계 구성하기
- 사용자 정의 소계 계산 적용 시키기
- 소계행에 임의의 텍스트 넣기
- 그룹핑 시 기존 순서 유지키시기
- 기본형(Type 1) 소계행 가로 병합하기
- 사용자 정의 그룹핑 하기 - API
- 정렬 유지한 채 그룹핑 실시
- 7. 필터(Filter)
- 8. 검색(Search)
- 9. 페이징(Paging)
- 11. 칼럼 렌더러(renderer)
- 12. 칼럼 에디트렌더러(editRenderer)
- 13. 스파크 차트 렌더러
- 14. 엑스트라 렌더러
- 15. 사용자 정의(Custom) 렌더러
- 16. 사용자 정의(Custom) 에디트렌더러
- 17. 포매팅(Formatting)
-
18. 그리드 편집(Editing)
- 기본 그리드 편집
- 기본 그리드 편집2
- 동적으로 편집 가능 여부 결정
- 셀 Copy, Paste(Ctrl+C, Ctrl+V)
- 셀 Copy, Paste 제어하기
- 빈 그리드에 Paste (Ctrl + V)
- 그룹핑 상태에서 편집
- 트리 그리드(계층형) 편집
- 트리 그리드 Depth 편집
- 일반 그리드<->트리로 만들기
- 유효성 검사(Validating)
- 유형별 칼럼 편집 렌더러
- 칼럼 편집 불가(readonly) 설정 하기
- 읽기전용 동적 셀 및 행 설정하기
- 읽기전용 칼럼 키 이동 건너 뛰기
- 셀, 행 값 변경하기
- 팝업 형태로 수정하기
- 고정 칼럼, 행 편집 가능 여부
- 행(rows) 추가, 삽입, 삭제
- 행(rows) 삭제, 삭제 취소
- 추가, 삽입, 삭제된 행 얻기
- 열(columns) 추가, 삽입, 삭제
- 열(columns)-그룹형 삽입, 삭제
- 저장 전 필수 필드 빈값이 있는지 체크하기
- 추가, 삽입, 삭제된 행 서버로 전송하기
- DB 트랜잭션 응답 처리
- 소프트제거모드 새 행(newRow) 정책
- 터치 모바일 기기 최적화 편집
- 터치 모바일 기기 가상 키보드 적용
- 19. 수정 취소 및 복구(Ctrl+Z, Y)
- 20. 행, 열 이동 및 드래그&드랍
-
21. 엑셀, PDF 등 내보내기(Export)
- Export 가능한 형식(엑셀, PDF 등)
- 트리그리드 Export (엑셀, PDF)
- 동적 스타일 Export (엑셀, PDF)
- 히든 칼럼 내보내기 방식(엑셀)
- 제목 등의 정보 Export(엑셀, PDF)
- 텍스트 상자 삽입 Export(엑셀)
- 결재란 함께 Export(엑셀)
- PDF 사용 가능한 폰트
- 대용량 내보내기(엑셀, CSV)
- 진행바(progressBar) 표시(엑셀, CSV)
- 다수의 그리드 1개의 엑셀로 내보내기
- 엑셀에서 숫자 원래의 값으로 내보내기
- 엑셀에서 날짜 형식으로 내보내기
- 엑셀에서 칼럼 너비 변경시켜 내보내기
- Export 로컬 or 서버 다운로드
- 엑셀, CSV 서식 Blob 데이터 얻어오기
-
22. 이벤트 및 기타
- 완료(ready) 이벤트
- 셀 선택 변경 이벤트
- 셀 선택 제한(통제) 이벤트
- 셀 클릭 이벤트
- 셀 더블 클릭 이벤트
- 키보드 이벤트(단축키 재정의)
- 헤더 클릭 이벤트
- 푸터 클릭 이벤트
- 그리드 동적 제거 및 생성
- 칼럼 레이아웃 동적 변경
- 대용량 출력 예
- 다수의 칼럼 출력 예
- 두 그리드의 스크롤 동기화 시키기
- 스크롤 위치 및 사이즈 지정
- 라이브 스크롤(liveScrolling) 해제
- Cell-셀렉션 스타일 변경
- CSV 파일로 그리드 데이터 삽입
- 엑셀 임포팅으로 그리드 출력
- 다국어(리소스번들) 설정하기
- 그리드에서 파일 선택 및 업로드 하기
- 그리드에 프리로더, 메세지 등 출력 API
Country, Product 칼럼에 HTML 템플릿(Template) 렌더러를 설정한 모습입니다.
데이터 값이 HTML 인 경우 그대로 출력하며 labelFunction 으로 HTML 스트링을 작성할 수 있습니다.(innerHTML 처리)
템플릿 렌더러는이미지(img)와 링크(a) 또는 다른 태그(tag)를 직접 출력 모습으로 만들 수 있습니다.기본적으로 TemplateRenderer는 행 높이를 벗어날 수 없습니다. 만약, BR 태그로 개행을 하여 개별 행 높이를 원한다면 wordWrap 속성을 true 로 설정하십시오.
■ 단점 : 사용자가 HTML 템플릿을 작성하였기 때문에 엑셀 저장, 그룹핑, 필터링, 정렬, 복사 등에 제약을 받습니다. (dataField 값 기준으로 처리됩니다.)
TemplateRenderer 로 작성된 HTML 템플릿은 엑셀이 이해하지 못하기 때문에 엑셀 내보내기 가공 함수인 aliasFunction 를 사용하여 원하는 값으로 내보내기 가능합니다.
또한 TemplateRenderer 는 헤더 간의 경계를 더블클릭 한 경우 widthFit 을 설정하여 해당 너비만큼 사이징 되도록 설정한 모습입니다.
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.