AUIGrid Features

AUIGrid 는 순수 자바스크립트와 HTML, CSS 로 작성된 웹 데이터 그리드(DataGrid) 입니다.

AUIGrid 는 다양한 형태의 데이터를 표현할 수 있는 고성능 데이터 그리드 컴포넌트입니다.

• AUIGrid 는 jQuery, Vue.js, React.js 또는 기타 JS Framework 에 의존적이지 않습니다. 함께 또는 단독으로 사용 가능합니다.
• AUIGrid 는 특정 서버 사이드(PHP, JSP, ASP, .NET)에 종속되지 않습니다. 어떤 서버 사이드, WAS 든 적용 가능합니다.

지원 브라우저

Chrome	Edge	Firefox	Safari	Opera	Android	iOS
Yes	Yes(IE 모드 지원 안함)	Yes	Yes	Yes	Yes	Yes

주요 기능

Ver. 3.0.16

• 복사(Copy)할 때 헤더 텍스트 포함 시키는 기능 추가
• 셀 영역 전체 선택(Ctrl + A)할 수 있는 기능 추가

Ver. 3.0.15

• 스위치렌더러(SwitchRenderer) 기능 추가
• 컨텍스트 메뉴 정의할 때 서브 메뉴도 정의 가능하도록 개선되었습니다.
• 모바일 디바이스에서 터치로 칼럼 사이즈 조절 가능 및 터치 스크롤이 개선되었습니다.

Ver. 3.0.14

• 사용자 정의 에디트렌더러(CustomEditRenderer) 기능 추가 - 일반JS, Vue.js, React.js
• 엑셀 내보내기 할 때 엑셀 자체의 날짜(Date) 형식으로 내보내기 기능 추가

Ver. 3.0.13

• 마우스 오버(hoverMode) 속성 추가
• 드랍다운 헤더 렌더러(DropDownHeaderRenderer) 기능 추가
• 날짜-시간 선택 가능한 달력(Calendar) 시간 기능 추가
• 엑스트라 체크박스(showRowCheckColumn = true 로 출력되는 왼쪽의 체크박스) 병합 기능 추가
• 그룹핑 소계를 트리형으로 표현할 때 소계행을 따로 만들지 않고 트리 브랜치에 통합하여 출력하는 기능 추가
• 값 편집할 때 패스워드 입력 모드 기능 추가
• 엑셀 내보내기 할 때 텍스트 상자 삽입 기능 추가

Ver. 3.0.12

• 정규식을 설정하여 사용자 입력을 제한(예:대문자만, 한글만 입력 가능)하는 기능 추가
• NPM의 aui-grid 패키지를 지원하여 React + Typescript 환경의 개발이 가능합니다.

Ver. 3.0.11

• 인라인 필터 행 표시 기능 추가
• 엑스트라 렌더러의 순서 결정하는 기능 추가
• 마스크 편집 렌더러(MaskEditRenderer) 기능 추가
• 그룹 헤더에도 헤더렌더러(headerRenderer) 설정 기능 추가
• 페이징 심플 모드 중 하나인 button 모드 추가
• 터치 모바일 기기에서 엑스트라 드래깅 칼럼을 이용하여 행 드래그&드랍이 가능하도록 기능 추가
• 터치 모바일 기기 가상 키보드(소프트 키보드) 종류 설정하는 기능 추가

Ver. 3.0.10

• 계층형 그리드(트리 그리드)에서 드래그&드랍으로 행 이동 기능 추가
• 드래그&드랍을 돕는 엑스트라 드래깅 칼럼 추가
• 엑셀 다운로딩 하지 않고 Blob 데이터로 반환하는 기능 추가
• 셀렉션의 테두리를 1px로 갖는 테마인 Modern Red Theme 추가

Ver. 3.0.9

• 포맷팅된 값으로 그리드 검색 기능 추가
• 헤더 경계를 더블 클릭했을 때 적용 시킬 너비 기능(widthFit) 추가
• 엑스트라 체크박스에서 shift 키 누르고 체크하면 모두 체크 되기 기능 추가

Ver. 3.0.8

• 복사(Ctrl+C), 붙여넣기(Ctrl+V)에 적용되는 값을 변경(컨트롤) 할 수 있는 기능 추가
• 엑셀 내보내기 할 때 칼럼의 사이즈를 엑셀용으로 조절해서 내보내기 기능 추가
• 동적 컨텍스트 메뉴 및 비활성화 기능 추가
• Mac OS X 운영 체제에서 Command 키로 Copy(Cmd+C), Paste(Cmd+V), Undo(Cmd+Z), Redo(Cmd+Y, Shift+Cmd+Z) 가 가능토록 추가

Ver. 3.0.7

• 셀 세로 병합 시 실제 병합하지 않고 상단에 값만 출력시키는 기능 추가
• 그룹핑한 경우 그룹핑의 대상 필드 수정 기능 추가
• 푸터에 다수의 행 출력 기능 및 푸터 세로 병합, 블럭 병합 기능 추가
• 달력렌더러에서 예로 월요일부터 시작하는 달력 기능 추가

Ver. 3.0.6

• 행 상태(state) 개별 행에 대하여 초기화 기능 추가
• 그룹핑 소계 기능이 대폭 개편 되었습니다.
• 다수의 그리드를 1개의 엑셀 파일안의 각각의 시트(Sheets) 로 내보내기 기능 추가
• 엑셀에서 숫자 원래의 값으로 내보내기 기능 추가
• 드랍다운리스트 렌더러의 다중 선택에서 전체 선택/해제 기능 추가
• 드랍다운리스트 렌더러의 동적 disable 기능 추가
• 버튼 렌더러의 동적 disable, visible 기능 추가
• 셀 선택 제한(통제) 이벤트 추가
• 두 그리드의 수평, 수직 스크롤을 동기화 시키는 데모 추가
• Vue.js 프레임워크에서의 데모 추가

Ver. 3.0.5

• 페이징 모드에서 출력 행수를 선택할 수 있는 UI 추가
• 페이징 모드에서 셀 세로 병합 기능 추가
• 세로 스크롤 없이 데이터 출력 및 자동 그리드 높이 결정 하는 기능 추가
• 페이징 모드에서 세로 스크롤 없이 데이터 출력 및 자동 그리드 높이 결정 하는 기능 추가

Ver. 3.0.4

• 드래그&드랍으로 행 이동 및 복사 기능 추가
• 헤더렌더러(headerRenderer) 기능 추가
• 워드랩이지만 고정 행 높이를 갖는 기능 추가
• 저장 전 필수 입력해야 할 필드를 입력하도록 요구하는 기능 추가
• 국가 별 천단위, 소수점 구분자를 메세지 파일에서 관리할 수 있도록 패치

Ver. 3.0.3

• 필터 사용자 확장 AND, OR 메뉴(텍스트 필터, 숫자 필터) 기능 추가
• 엑스트라 체크박스에서 불확정(indeterminate) 상태가 표시되도록 기능 추가
  (예:TreeGrid 의 자식 1개 선택 시 부모 행은 불확정 상태로 표시됨)
• 필터 메뉴에서 검색 시 "검색 전체선택" 과 더불어 "현재 선택 필터에 누적하여 적용" 이 가능합니다.

Ver. 3.0.2

• fillColumnSizeMode 속성이 추가되어 가로 스크롤 없이 꽉 차게 칼럼들을 출력 시킬 수 있는 기능 추가
• jQuery UI-datepicker 달력 에디트 렌더러 기능 추가
• 터치 기기(touch devices)에서 셀 길게 누르기(Long Tap) 기능 및 이벤트 추가

Ver. 3.0

• 열(columns) 추가, 삭제 기능 추가
• 엑셀, CSV 내보내기 시 진행바(progressBar) 표시 기능 추가
• 셀 가로 병합(column merge) 기능 추가
• 그룹핑 부분합계(소계) 셀 가로 병합(column merge) 기능 추가
• 푸터(Footer) 셀 가로 병합 기능 추가
• DB 트랜잭션 성공/실패에 따라 대응 예제 추가

Ver. 2.14

• 일반 그리드에서 워드랩(wordWrap)-자동 행 높이 기능 추가
• 트리 그리드에서 워드랩(wordWrap)-자동 행 높이 기능 추가
• 워드랩(wordWrap) 사용 시 TemplateRenderer 에서 BR 태그를 사용하여 수동 개행하면, 그에 맞게 행 높이 자동 조절 기능 추가
• 트리 그리드 LazyLoading 기능에서 명시적으로 Leaf 지정할 수 있도록 개선

Ver. 2.13

• 전체 칼럼(즉, 전체 데이터) 대상으로 검색(search)할 수 있도록 기능 추가
• 선택한 영역 안에서 검색(search)할 수 있도록 기능 추가
• 셀 수정 시 원래 값으로 사용자가 입력하면 셀 수정 하지 않은 상태가 되도록 패치
• Ctrl + X 단축키가 잘라내기(Cut) 기본 행위로 지정되었습니다.

Ver. 2.12

• 에디팅 인푸터(inputer)에 정렬 기능 및 숫자 입력 시 자동 컴마 출력 기능 추가
• 트리 그리드에서 트리 열 때 하위 노드(children) 요청하는 기능(lazyLoading) 추가
• LinkRenderer 에서 자바스크립트 함수 호출할 수 있는 콜백 함수 기능 추가
• 다국어 설정(리소스 번들) 샘플 추가
• 모던 테마(Modern Theme) 추가

Ver. 2.11

• 계층형(hierarchy) 헤더의 계층(depth) 별 헤더 높이 지정 기능 추가
• 헤더 가로 병합(merge) 기능 추가
• 행 클릭으로 엑스트라 체크박스 체크/해제 기능 추가
• 대용량에서 정렬 시 값에 undefined 또는 NULL 이 있는 경우, 정렬 속도가 낮아지던 현상 패치

Ver. 2.10

• 헤더의 텍스트 및 속성을 그룹형인 경우에도 변경할 수 있도록 추가
• 엑셀, CSV 내보내기 할 때 대용량 데이터를 내보내기 할 수 있도록 성능 개선 및 데모 추가

Ver. 2.9

• HTML 템플릿 렌더러에 select 태그 및 ButtonGroup 등으로 수정, 편집 할 수있도록 추가
• 서버 사이드 언어 별 추가, 수정, 삭제 정보 서버로 보내기 예제 및 설명 추가

Ver. 2.8

• 부트스트랩 datepicker 달력 에디트 렌더러 기능 추가
• 스크롤 라이브 드래깅(liveDragging) 속성 추가
• 엑스트라 체크박스 렌더러에 비활성화(disabled) 기능 추가
• 일반 체크박스 렌더러에 비활성화(disabled) 기능 추가
• 칼럼 위치 바꾸기 기능이 개선되었습니다.

Ver. 2.7

• 실행 취소(Undo)", "다시 실행(Redo)" (Ctrl+Z, Ctrl+Y) 기능 추가
• 행(셀) 추가, 삭제, 수정 작업을 원래 값으로 복구 하는 기능 추가
• 엑스트라 행 상태 칼럼의 아이콘 클릭 시 원래 값으로 복구 하는기능 추가
• 빈 그리드에 엑셀 데이터 바로 붙여 넣기(Ctrl+V) 기능 추가

Ver. 2.6

• 푸터(Footer)의 위치를 상단에 출력하는 기능 추가(Header Summary)
• 칼럼 드래깅으로 이동 시, 특정 칼럼은 이동 불가 설정 기능 추가
• 에디팅 인푸터(inputer)에 maxlength 지정 속성 기능 추가
• 에디팅 인푸터(inputer)의 editorBtn 으로 사용자 팝업 지정 기능 추가
• 마우스 드래깅으로 다중선택(multipleCells, multipleRows) 하는 경우, 그리드 끝까지 드래깅 할 때 가로, 세로 스크롤 반응이 개선되었습니다.

Ver. 2.5

• 필터 메뉴 항목 구성 시 formatString, labelFunction 처리 값으로 항목 출력 기능 추가
• 히든 칼럼이나 사용자가 원하지 않는 칼럼을 엑셀 저장 시 제외할 수 있는 기능 추가
• 숫자 포맷팅 적용 시 소수점 반올림, 내림, 올림 선택할 수 있는 기능(rounding) 추가
• 행번호 칼럼(showRowNumColumn=true) 설정한 경우 엑셀 저장 시 행번호 칼럼도 같이 내보내기 되도록 기능 추가

Ver. 2.4

• 칼럼 셀 병합 시 다른 칼럼의 값을 참조하여 셀 병합하는 기능 추가
• 드랍다운리스트 에디터에서 다중선택(multipleMode) 기능 추가

Ver. 2.3

• 편집모드인 경우 읽기 전용 칼럼에서 키보드 이동 시 선택 건너 뛰기 기능 추가
• 엔터키가 다음 행이 아닌 다음 칼럼으로 이동할지 여부 속성 추가
• 아이콘렌더러에서 아이콘이 의무적으로 표시되는 것을 선택적으로 표시 기능 추가
• 엑스트라 체크박스 체크 가능 여부 함수(rowCheckableFunction) 추가
• 푸터 클릭 이벤트 추가

Ver. 2.2

• 셀 블록 선택 시 해당 값들의 평균, 개수 합계 등 출력시키는 데모 추가
• 엑셀 파일 가져오기(Import) 로 그리드 동적 생성 데모 추가
• 필터 메뉴의 초기 사이즈(200*300) 을 변경할 수 있도록 속성 추가(filterLayerWidth, filterLayerHeight 속성)

Ver. 2.1

• 콤보박스에서 사용자가 입력한 값이 동적으로 리스트로 추가되는 히스토리 모드 기능 추가
• 특정 조건에 따라 드랍다운리스트 또는 일반 인풋, 달력 등 에디터 다르게 출력시키는 기능 추가

Ver. 2.0

• 콤보박스, 자동완성 입력 등 셀 에디터의 기능이 대폭 강화 되었습니다.
• 필터링 메뉴를 드래깅으로 크기 변경(resizing), 이동(moving)이 가능하도록 하였습니다.
• 셀렉션 보더 기능이 개선되었으며, 행번호를 클릭하면 행 전체가 선택되도록 하였습니다.
• 달력, 드랍다운리스트, 콤보 박스, 체크 박스 등 모든 에디터 렌더러를 키보드만으로 변경할 수 있도록 개선하였습니다.
• 구체적인 업그레이드 내용 자세히 보기

Ver. 1.80

• 아이폰, 안드로이드 등의 모바일 기기에서 편집을 원할히 할 수 있도록 개선하였습니다.
• softRemoveRowMode 적용 시 사용자가 추가한 새 행(newRow) 적용 여부 기능 추가.
• 아이폰, 안드로이드 등의 모바일 기기에서 더블 탭(더블 클릭)이 활성화 되어 모든 에디팅 데모 수정이 가능합니다.

Ver. 1.70

• PDF 저장 기능(Export) 추가
• PDF 저장 시 스파크라인차트 포함 기능 추가
• 엑셀, PDF 저장 시 하이퍼 링크 유지를 위해 링크(Link) 렌더러 추가
• 쇼케이스의 전반적인 데모에 PDF 저장 버턴이 추가되었습니다.

Ver. 1.61

• 칼럼상태변경(columnStateChange) 이벤트 추가
• softRemoveRowMode 에서 선택해서 제거하는 기능이 추가되었습니다.
• 체크 박스 렌더러를 고정 칼럼으로 지정한 경우 레이아웃이 깨지는 버그가 패치되었습니다.
• 히든 칼럼이 있는 경우 칼럼의 위치를 옮기면 히든 칼럼이 보여지는 버그가 패치되었습니다.

Ver. 1.60

• 고정 칼럼에서도 칼럼 사이즈 변경 기능 추가
• 숨겨진 칼럼이 지정된 경우 고정 칼럼 설정하면 레이아웃이 깨지는 버그가 패치되었습니다.

Ver. 1.59

• 체크 박스 전체 체크/해제 데모 추가
• 계층 트리 데이터 칼럼 셀 병합 기능 추가
• 고정 행(fixedRows) 정렬(sorting) 대상 포함 여부 속성 추가
• 0 과 같은 값일 때 postfix 가 적용되지 않는 버그가 패치되었습니다.
• softRemoveRowMode=true 인 경우 삭제된 행이 수정되는 버그가 패치되었습니다.

Ver. 1.58

• 키보드 이벤트 핸들링 기능 추가
• 그리드 부모 또는 조상 HTML 엘리먼트에 margin 스타일이 설정된 경우 위치가 잘못 잡히는 버그가 패치되었습니다.

Ver. 1.57

• 행 위, 아래로 이동시키는 기능 추가
• 트리 그리드 정렬 시 최하단 Depth 행만 정렬할 수 있는 기능 추가

Ver. 1.56

• 그룹형 그리드 헤더에 열기/닫기 버턴 넣는 응용 예제 추가
• 기존 정렬 유지한 채 그룹핑 하는 예제 추가
• 로컬 PC의 CSV 파일을 그리드 데이터로 넣는 데모 추가
• 터치로 스크롤 썸(thumb)이 움직이도록 패치되었습니다.

Ver. 1.55

• 그리드의 상태를 저장, 유지할 수 있는 기능 추가

Ver. 1.54

• 일반 데이터를 트리 그리드로 표현 기능 추가
• 트리 그리드의 depth 수정 기능 추가
• 일반 그리드<->트리 그리드로 편집 가능토록 기능 추가
• 헤더, 바디 컨텍스트 메뉴 사용자 정의 기능 추가
• Home, End 키가 칼럼의 시작과 끝으로 이동하도록 기능 추가
• 드랍다운리스트의 리스트를 key-value 로 지정할 수 있도록 개선
• 숨겨진 칼럼이 있는 경우 칼럼 자리 이동 시 레이아웃이 깨지던 버그가 패치되었습니다.

Ver. 1.53

• 스크롤 최하단에서 추가 데이터 요청 후 붙이는 기능(Lazy Loading) 추가
• 그룹핑 합계 필드(SummaryFields) 선택적 출력 기능 추가
• 페이징 사용자 정의(Custom) 구현 데모 추가

Ver. 1.52

• HTML 템플릿 렌더러 추가 (셀을 HTML로 정의하면 그대로 출력합니다. 예: a, br, img 태그 등)
• 그룹핑 합계 필드(SummaryFields)가 필터링에 따라 동적으로 계산되도록 개선되었습니다.
• CSV 데이터 그리드 출력 기능 추가

Ver. 1.51

• 유효성 검사(Validator)의 UI 가 개선되었습니다.
• 푸터에서 사용자가 계산한 값에 대해 styleFunction 이 적용되지 않는 버그가 패치되었습니다.

Ver. 1.50

• 사용자 정의 렌더러(Custom Column Renderer) 작성 기능 추가
• 그리드 툴팁(ToolTip) 기능 추가
• 트리 그리드에서 행 삽입, 삭제 기능 추가
• 엑셀 저장 시 결재 확인(결재 서류 형태) 함께 내보내기 기능 추가
• 붙여넣기(Ctrl+V) 할 때 행이 없는 경우 자동 생성되도록 패치
• 푸터(Footer) 값에서도 prefix, postfix, styleFunction 을 사용할 수 있도록 추가

Ver. 1.44

• 푸터(Footer)에 다수 연산자 및 사용자 정의 연산 기능 추가
• 엑셀 저장 시 날짜 포맷팅이 안되어 저장되는 버그가 패치되었습니다.
• 트리 그리드에서 칼럼 틀 고정을 설정한 경우 하단 칼럼이 밀리는 버그가 패치되었습니다.
• 더 이상 푸터(Footer) 값에 콤마를 자동으로 찍어주지 않습니다. 콤마 출력을 위해 formatString 을 설정해야 합니다.

Ver. 1.43

• 엑셀 저장 시 제목, 부제목 등의 상단 및 하단에 지정된 정보 함께 내보내기 기능 추가
• 실시간 주식 관심 종목 데모 추가
• 붙여 넣기(Ctrl+V) 시 cellEditBegin, cellEditEnd 이벤트가 발생하도록 수정
• 편집 상태에서 리사이징 또는 스크롤하는 경우 편집 취소 되지 않는 버그가 패치 되었습니다.
• 날짜 포맷팅에서 1970 1. 1. UTC 부터 시작하는 타임을 포맷팅 하지 않던 버그가 패치되었습니다.

Ver. 1.42

• 그룹핑(+셀병합) 시 브랜치(branch) 행 표시 해제 기능 추가
• 달력에서 오늘 날짜와 날짜 제거 기능 추가
• 드랍다운리스트 렌더러 단계형 출력 기능 추가
• 빈 문자로 수정한 경우 셀 수정 마커의 위치가 올라가는 버그가 패치 되었습니다.

Ver. 1.41

• DB Select 후 바로 편집 가능토록 작성한 DB 그리드 데모 추가
• 날짜 포맷 사용 시 yyyy/mm/dd 에서 yyyy-mm-dd 도 지원 가능토록 수정

Ver. 1.40

• 데이터 편집 시 추가, 삭제, 수정 상태를 알 수 있는 기능 추가
• 삭제 시 바로 삭제 하지 않고, 그리드에 표시를 하는 기능 (softRemoveRowMode) 추가
• 의존적 칼럼 관계로 칼럼 간 연산(수식) 표현 기능 추가
• 필터링 할 때 푸터 연산(합계, 평균 등)이 필터에 적용되도록 보완
• 고정 칼럼, 행을 지정하면 이동, 수정 하지 못하던 기능을 할 수 있도록 속성 처리
• 수평 스크롤의 위치를 지정할 수 있는 기능 추가
• 삭제한 아이템 복원 등 전반적으로 그리드 편집, 수정(CRUD) 기능이 업그레이드 되었습니다.

Ver. 1.33

• 그리드, 엑셀 간의 복사(Ctrl+C), 붙여넣기(Ctrl+V) 기능 추가
• 다중 칼럼 필드 정렬(Sorting) 기능 추가
• 수정 시 SummaryFields 및 푸터(Footer) 합계가 적용되지 않는 버그가 패치되었습니다.

Ver. 1.32

• 편집 모드(editingMode)에서 키보드 입력(any keys)으로 바로 셀 수정 기능 추가
• 편집 모드(editingMode)에서 앞 뒤 여분의 날짜 달력, 월 단위 달력 기능 추가
• 그리드 CRUD 후 실제 DB 에 저장하는 데모 추가

Ver. 1.31

• 편집 모드(editingMode)에서 데이터 수정 시 조건에 맞지 않는 값, 유효성 검사(validating) 기능 추가
• 칼럼에 체크박스, 체크박스 이미지를 설정하는 기능 추가
• jQuery UI 연동하여 AUIGrid 출력 예제 추가
• 대용량, 다수 칼럼 예제 추가
• 칼럼 width 고정, 비율(percent) 설정 예제 추가

Ver. 1.30

• 엑셀 형식의 필터(Filter) 기능 및 자동완성(autoComplete) 기능 추가
• 검색(Search) 기능 추가
• 페이징(Paging) 기능 추가
• 컨텍스트 메뉴 기능 추가

Ver. 1.20

• 엑셀(xlsx), CSV, XML, JSON 등의 내보내기(Export) 기능 추가
• 스파크라인 엑셀(xlsx) 내보내기(Export) 기능 추가
• 칼럼 헤더에 칼럼 설명 툴팁 표시 기능 추가

Ver. 1.10

• 스파크 라인(SparkLine) 렌더러 추가
• 스파크 칼럼(SparkColumn) 렌더러 추가
• 스파크 승패(SparkWinLoss) 렌더러 추가
• 칼럼 헤더를 드래깅으로 그룹핑 할 때, 그룹핑이 되지 않는 버그가 패치되었습니다.

Ver. 1.05

• 칼럼 보이기/숨기기 기능
• 특정 조건에 따라 동적으로 행(row) 또는 셀에 스타일 기능
• 다크, 블루 테마가 추가되었습니다.

Ver. 1.0

• JSON, XML 데이터 바인딩
• 칼럼 셀 병합 기능
• 고정 칼럼, 로우(틀 고정) 기능
• 칼럼 가로 사이즈 조절 기능
• 셀, 행 선택 기능 ( 키보드 및 마우스, 터치 모두 가능)
• 그룹형 그리드 헤더 기능
• 푸터에 합계 및 개수, 평균 계산하여 출력 기능
• 계층형 자료 표현 기능( 트리 그리드)
• 그룹핑 기능 ( 동적으로 그룹핑을 실행할 수 있습니다.)
• 이미지, 아이콘, 바 게이지 등 다양한 칼럼 렌더러 지원
• 그리드 편집기능
• 이벤트 핸들링
• 동적 셀 스타일 기능