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개의 엑셀로 내보내기
- 엑셀에서 숫자 원래의 값으로 내보내기
- 엑셀에서 날짜 형식으로 내보내기
- 엑셀에서 칼럼 너비 변경시켜 내보내기
- 엑셀, CSV 서식 Blob 데이터 얻어오기
- 화면과 내보내기 스타일 분리
- 22. 밴드형 바디 레이아웃
-
23. 이벤트 및 기타
- 완료(ready) 이벤트
- 셀 선택 변경 이벤트
- 셀 선택 제한(통제) 이벤트
- 셀 클릭 이벤트
- 셀 더블 클릭 이벤트
- 키보드 이벤트(단축키 재정의)
- 헤더 클릭 이벤트
- 푸터 클릭 이벤트
- 그리드 동적 제거 및 생성
- 칼럼 레이아웃 동적 변경
- 대용량 출력 예
- 다수의 칼럼 출력 예
- 셀 전체 선택(Ctrl + A)
- 두 그리드의 스크롤 동기화 시키기
- 스크롤 위치 및 사이즈 지정
- 라이브 스크롤(liveScrolling) 해제
- Cell-셀렉션 스타일 변경
- CSV 파일로 그리드 데이터 삽입
- 엑셀 임포팅으로 그리드 출력
- 다국어(리소스번들) 설정하기
- 그리드에서 파일 선택 및 업로드 하기
- 그리드에 프리로더, 메세지 등 출력 API
월별 매출을 막대 그래프로 표시합니다. 최솟값은 빨강, 최댓값은 녹색입니다.
렌더러의 height로 차트 높이를 조절하고 Excel, PDF로 저장해 보세요.
PDF로 저장 엑셀(xlsx)로 저장(엑셀2010 이상에서만 표현 가능)
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.