Methods

행 체크박스를 사용하는 경우, 행의 고유 값(rowIdField 값)으로 체크할 행을 지정합니다.

파라메터 설명

• rowIds : (Array) 행 고유 값(rowIdField 값)들을 요소로 갖는 배열

참고 : 기존 체크 항목을 제거하고 새로 설정하는 값으로만 체크하고자 한다면 setCheckedRowsByIds 메소드를 사용하십시오.

관련 데모 보기

행 체크박스를 사용하는 경우, 지정한 dataField의 값과 일치하는 행을 추가로 체크합니다. 기존에 체크된 행의 체크 상태는 유지합니다.

파라메터 설명

• dataField : (String) 행 아이템에서 체크하고자 하는 필드명
• values : (Array or String) 행 아이템에서 체크하고자 하는 필드의 값(value), 복수의 값을 체크하고자 한다면 배열로 설정(예: ["Anna", "Steve"])

예를 들어 이름(name) 이 "Anna" 라는 사람을 기존에 누적해서 체크하고자 한다면 다음과 같습니다.

AUIGrid.addCheckedRowsByValue(myGridID, "name", "Anna");

참고 : 기존 체크 항목을 제거하고 새로 설정하는 값으로만 체크하고자 한다면 setCheckedRowsByValue 메소드를 사용하십시오.

관련 데모 보기

그리드에 칼럼을 추가하거나 지정한 위치에 삽입합니다.

추가 하는 열(column) 은 반드시 dataField 를 지정해야 하며, 해당 dataField 는 기존과 중복되지 않는 고유 값이여야 합니다.

그리드의 속성 editable 과 무관하게 이 메소드를 통해 열(column)을 추가할 수 있습니다.

파라메터 설명

• cItem (Object or Array) : 삽입하고자 하는 열 객체(columnm Object), 복수의 열을 삽입하고자 하는 경우 Object 를 배열로 묶으십시오.
• columnIndex (Number or String) : 삽입될 열의 인덱스, columnIndex 에 다음 문자를 설정한 경우.

  "first" : 맨처음, "last" : 맨끝, "selectionLeft" : 선택 열 왼쪽에, "selectionRight" : 선택 열 오른쪽에 추가 열이 삽입됩니다.

const cItem = { dataField : "myNumField1", dataType : "numeric", formatString : "#,##0" };
 예1 : AUIGrid.addColumn(myGridID, cItem, 5); // columnIndex 5 에 1열 추가
 예2 : AUIGrid.addColumn(myGridID, cItem, "last"); // 맨끝에 1열 추가
 예3 : AUIGrid.addColumn(myGridID, cItem, "selectionRight"); // 선택 열 오른쪽에 1열 추가

관련 데모 보기

그리드에 한 개 또는 여러 개의 행을 추가합니다. items에는 행 객체 하나 또는 행 객체의 배열을 전달합니다. rowIndex를 생략하면 맨 뒤에 추가합니다.

정렬과 필터를 유지하며 추가하려면 keepViewOnAdd를 true로 설정하십시오. 추가한 행은 필터에 따라 숨겨지거나 정렬에 따라 위치가 달라질 수 있습니다.

그리드의 속성 editable 과 무관하게 이 메소드를 통해 아이템을 추가할 수 있습니다.

파라메터 설명

• items (Object or Array) : 삽입하고자 하는 행 아이템, 복수의 행을 삽입하고자 하는 경우 Object 를 배열로 묶으십시오.
• rowIndex (Number or String) : 삽입될 행의 인덱스, rowIndex 에 다음 문자를 설정한 경우.

  "first" : 첫 행, "last" : 최하단, "selectionUp" : 선택행 위, "selectionDown" : 선택행 아래에 추가행이 삽입됩니다.

const item = { "name" : "새 이름", "country" : "새 나라", "price" : 0 };
 예1 : AUIGrid.addRow(myGridID, item, 5); // rowIndex 5 에 1행 추가
 예2 : AUIGrid.addRow(myGridID, item, "last"); // 최하단에 1행 추가
 예3 : AUIGrid.addRow(myGridID, item, "selectionDown"); // 선택한 행 아래에 1행 추가
 주의 : 복수의 행을 추가하기 위해 반복문 안에 addRow 메소드를 사용하지 마십시오. 
 배열로 묶어 한번의 addRow 메소드로 처리하십시오.
 const items = [{...}, {...}, ... ]; //복수의 Object 
 예4 : AUIGrid.addRow(myGridID, items, "last"); // 배열로 묶어 한번의 다수의 행 추가.

참고 : 일반 그리드의 행 추가입니다. 트리 그리드(계층형 그리드) 의 행 추가는 addTreeRow() 메소드를 참고하십시오.

Also See : addTreeRow

관련 데모 보기

지정한 칼럼의 자식으로 칼럼을 추가합니다.

추가 하는 열(column) 은 반드시 dataField 를 지정해야 하며, 해당 dataField 는 기존과 중복되지 않는 고유 값이여야 합니다.

그리드의 속성 editable 과 무관하게 이 메소드를 통해 열(column)을 추가할 수 있습니다.

파라메터 설명

• cItem (Object or Array) : 삽입하고자 하는 열 객체(columnm Object), 복수의 열을 삽입하고자 하는 경우 Object 를 배열로 묶으십시오.
• parentDataField (String) : 부모 dataField 명, 해당 dataField 의 자식으로 칼럼이 추가됩니다.
• columnIndex (Number or String) : 삽입될 열의 인덱스, columnIndex 에 다음 문자를 설정한 경우. "first" : 맨처음, "last" : 맨끝에 추가 열이 삽입됩니다.

const cItem = { dataField : "myNumField1", dataType : "numeric", formatString : "#,##0" };
 // "myGroupField" 를 dataField 로 갖는 칼럼을 찾아 해당 칼럼의 자식 인덱스 1 에 1열 추가
 예1 : AUIGrid.addTreeColumn(myGridID, cItem, "myGroupField", 1); 
 // "myGroupField" 를 dataField 로 갖는 칼럼을 찾아 해당 칼럼의 맨끝에 1열 추가
 예2 : AUIGrid.addTreeColumn(myGridID, cItem, "myGroupField", "last");

관련 데모 보기

트리 그리드에 부모 행과의 계층 관계를 지정하여 행을 추가합니다.

keepViewOnAdd가 true이면 정렬, 필터와 트리 펼침 상태를 유지합니다. 새 행의 표시 여부와 위치는 해당 조건에 따라 결정됩니다.

그리드의 속성 editable 과 무관하게 이 메소드를 통해 아이템을 추가할 수 있습니다.

파라메터 설명

• items (Object or Array) : 삽입하고자 하는 행 아이템, 복수의 행을 삽입하고자 하는 경우 Object 를 배열로 묶으십시오.
• parentRowId (String) : 추가될 행의 부모 행 고유 값(rowIdField 값).
• rowPosition (String) : 삽입될 행의 위치 값, 유효값은 다음과 같습니다.

  "first" : 첫 행, "last" : 최하단, "selectionUp" : 선택행 위, "selectionDown" : 선택행 아래에 추가행이 삽입됩니다.

관련 데모 보기

트리 그리드의 지정한 행 인덱스(rowIndex)에 행을 삽입합니다.

keepViewOnAdd가 true이면 정렬, 필터와 트리 펼침 상태를 유지합니다. 새 행의 표시 여부와 위치는 해당 조건에 따라 결정됩니다.

지정된 행 위치에 맞게 부모-자식 관계가 자동 설정됩니다. 만약 부모-자식 관계를 명확히 하고자 하는 경우 addTreeRow 메소드를 사용하십시오.

파라메터 설명

• items (Object or Array) : 삽입하고자 하는 행 아이템, 복수의 행을 삽입하고자 하는 경우 Object 를 배열로 묶으십시오.
• rowIndex (Number) : 추가될 행이 위치할 행 인덱스(rowIndex)

행 체크박스를 사용하는 경우, 행의 고유 값(rowIdField 값)으로 지정한 행의 체크를 해제합니다.

부분적으로 엑스트라 행 체크박스를 해제하고자 할 때 유용합니다.

파라메터 설명

• rowIds : (Array) 행 고유 값(rowIdField 값)들을 요소로 갖는 배열

관련 데모 보기

행 체크박스를 사용하는 경우, 지정한 dataField의 값과 일치하는 행의 체크를 해제합니다.

부분적으로 엑스트라 행 체크박스를 해제하고자 할 때 유용합니다.

파라메터 설명

• dataField : (String) 행 아이템에서 체크 해제 하고자 하는 필드명
• values : (Array or String) 행 아이템에서 체크 해제 하고자 하는 필드의 값(value), 복수의 값을 체크하고자 한다면 배열로 설정(예: ["Anna", "Steve"])

관련 데모 보기

데이터 목록의 뒤쪽에 데이터를 추가합니다.

파라메터 설명

• additionalData (Array) : 추가시키고자 하는 데이터

Also See : prependData

관련 데모 보기

그리드 이벤트에 핸들러 함수를 연결합니다.

파라메터 설명

• type : (String or Array) 바인딩하고자 하는 이벤트 유형
• function : (Function) 이벤트 핸들러 함수

예를 들면 cellClick 이벤트를 핸들링하고 싶다면 다음과 같습니다.

AUIGrid.bind(myGridID, "cellClick", function( event ) {
       console.log("rowIndex : " + event.rowIndex + ", columnIndex : " + event.columnIndex + " clicked");
 });
 
 // 복수의 이벤트를 한번에 핸들링 하기 (이벤트 유형을 배열로 설정)
 AUIGrid.bind(myGridID, ["cellClick", "headerClick", "footerClick"], function( event ) {
       if(event.type === "cellClick") console.log("You clicked cell : " + event.value);
       else if(event.type === "headerClick") console.log("You clicked header : " + event.headerText);
 });

관련 데모 보기

그리드의 칼럼 레이아웃(columnLayout)을 다른 레이아웃으로 교체합니다.

파라메터 설명

• columnLayout : (Array-Object) 변경하고자 하는 새로운 칼럼 레이아웃

관련 데모 보기

행 드래그 손잡이, 행 번호, 행 상태, 행 체크박스 등 엑스트라 칼럼의 표시 순서를 변경합니다. 각 칼럼은 showDragKnobColumn, showRowNumColumn, showStateColumn, showRowCheckColumn에 대응합니다.

파라메터 설명

• orders (Array) : 엑스트라 칼럼 속성명을 순서로 지정한 배열

// 엑스트라 칼럼들 순서 다시 변경하기
 // 엑스트라 행 번호, 상태, 드래깅 손잡이, 체크박스 순으로 순서 변경하기
 AUIGrid.changeExtraColumnOrders(myGridID, ["showRowNumColumn", "showStateColumn", "showDragKnobColumn", "showRowCheckColumn"]);
 // 엑스트라 체크박스 칼럼을 맨 앞으로, 나머지 칼럼은 기본 순서 유지 (나머지 칼럼 유지는 배열에 지정하지 않으면 유지 시킴)
 AUIGrid.changeExtraColumnOrders(myGridID, ["showRowCheckColumn"]);

See Also : extraColumnOrders | changeExtraColumnWidth | showExtraColumn | hideExtraColumn

관련 데모 보기

엑스트라 칼럼의 너비를 변경합니다.

엑스트라 칼럼의 너비(width) 속성은 다음과 같습니다.

• 행 드래그&드랍 손잡이 : "dragKnobColumnWidth"
• 행 체크박스 : "rowCheckColumnWidth"
• 행 번호 : "rowNumColumnWidth"
• 행 상태 : "stateColumnWidth"

파라메터 설명

• name (String) : 엑스트라 칼럼 너비 속성 이름
• width (Number) : 변경 시킬 너비

// 엑스트라 행 번호 칼럼 너비 150 으로 변경
 AUIGrid.changeExtraColumnWidth(myGridID, "rowNumColumnWidth", 150);
 // 엑스트라 체크박스 칼럼 너비 100 으로 변경
 AUIGrid.changeExtraColumnWidth(myGridID, "rowCheckColumnWidth", 100);

See Also : changeExtraColumnOrders | showExtraColumn | hideExtraColumn

관련 데모 보기

현재 그리드의 푸터 레이아웃(footerLayout)을 다른 레이아웃으로 교체합니다.

파라메터 설명

• footerLayout : (Array-Object) 변경하고자 하는 새로운 푸터 레이아웃

관련 데모 보기

지정한 칼럼에 적용된 필터를 해제합니다.

enableFilter 속성이 true 설정되어야 가능합니다.

파라메터 설명

• dataField (String) : 칼럼이 출력하고 있는 데이터의 필드명

관련 데모 보기

그리드에 적용된 모든 칼럼 필터를 해제합니다. 특정 칼럼의 필터만 해제하려면 clearFilter()를 사용하십시오.

관련 데모 보기

그리드의 데이터를 모두 비웁니다.

현재 선택한 셀과 행의 선택 표시를 해제합니다.

이 메소드는 selectionChange 이벤트를 발생시키지 않습니다. 해제 후 getSelectedItems()는 빈 배열, getSelectedIndex()는 [-1, -1]을 반환합니다.

관련 데모 보기

그리드에 적용된 정렬 설정을 모두 해제합니다.

관련 데모 보기

실행 취소(Undo)와 다시 실행(Redo)에 사용하는 작업 기록을 비웁니다.

Also See : undo, redo, redoable

관련 데모 보기

열려 있는 필터 메뉴를 닫습니다.

// 필터 레이어(필터 메뉴)가 열린 경우 닫습니다.
 AUIGrid.closeFilterLayer(myGridID);

Also See : openFilterLayer, isOpenFilterLayer

관련 데모 보기

트리 데이터의 모든 노드를 접어 최상위 브랜치만 표시합니다.

관련 데모 보기

지정한 부모 요소에 그리드를 생성하고 칼럼 레이아웃과 그리드 속성을 적용합니다.

파라메터 설명

• pid : (String) 그리드가 생성될 Div 의 id
• columnLayout : (Object) 그리드 생성하고자 하는 칼럼 레이아웃
• gridProps : (Object) 그리드 생성 시 변경할 그리드 속성(key-value) 객체

Return : (String) 그리드가 생성될 Div의 id 를 반환합니다.(즉, 파라메터로 넣은 pid 반환)

Also See : destroy

관련 데모 보기

그리드를 제거하고 사용하던 화면 요소와 내부 자원을 정리합니다.

동적으로 그리드를 생성, 제거해야 할 경우 반드시 이 메소드를 사용하여 제거하십시오.

CustomRenderer에서 직접 등록한 이벤트나 타이머는 렌더러의 destroy()에서 해제하십시오.

Also See : create

관련 데모 보기

트리 데이터의 모든 노드를 펼칩니다.

관련 데모 보기

트리 그리드에서 행의 고유 값(rowIdField 값)으로 브랜치를 찾아 펼치거나 접습니다.

파라메터 설명

• rowIds (Array 또는 String) : 행 고유 값(rowIdField 값) (복수인 경우 Array 로 지정)
• open (Boolean) : 열기 할지 닫기 할지 여부(true 인 경우 열기 실행)
• recursive (Boolean) : 해당 아이템의 자손까지 모두 열지 여부

관련 데모 보기

현재 그리드 데이터를 CSV 형식으로 내보냅니다.

파라메터 설명

• exportProps (Object) : 내보내기 할 때 파일명 등을 지정할 수 있는 파라메터입니다.

■ exportProps 파라메터 설명 ■

exportProps 파라메터는 Object 로 그 요소는 다음과 같습니다.

• afterRequestCallback (Function) : 내보내기 후 호출될 콜백함수를 지정합니다.
• alwaysQuotes (Boolean) : 쌍따옴표를 모든 값에 붙일지 여부를 지정합니다. 값에 컴마가 있는지 확인하여 붙이는 경우(이 속성 false 설정한 경우) 퍼포먼스가 낮을 수 있습니다.
• beforeRequestCallback (Function) : 내보내기 전 호출될 콜백함수를 지정합니다.
• fileName (String) : 내보내기 할 때 파일명을 지정하면 해당 파일명을 서버 사이드에서 파라메터로 받을 수 있습니다.
• localControl(Boolean) : 다운로딩 처리가 아닌 데이터를 Blob 으로 반환할지 여부를 지정합니다.(기본값 : false)
• localControlFunc(Function) : localControl 를 true 설정한 경우 그리드가 CSV 서식 작성 완료 후 Blob 으로 반환하는 함수입니다.
• localAsText (Boolean) : localControl 를 true 설정한 경우 localControlFunc 의 파라메터를 Blob 대신 String 으로 대체할지 여부를 지정합니다.(기본값 : false)
• progressBar (Boolean) : 내보내기 진행 상황을 퍼센티지로 보여줄지 여부를 나타냅니다.(기본값 : false)

밴드형은 상위 셀과 하위 셀을 독립 칼럼으로 펼쳐 데이터 한 항목을 CSV 한 행으로 출력합니다.

관련 데모 보기 | 관련 데모 보기

현재 그리드 데이터를 JSON 형식으로 내보냅니다.

파라메터 설명

• exportProps (Object) : 내보내기 할 때 파일명 등을 지정할 수 있는 파라메터입니다.

■ exportProps 파라메터 설명 ■

exportProps 파라메터는 Object 로 그 요소는 다음과 같습니다.

• afterRequestCallback (Function) : 내보내기 후 호출될 콜백함수를 지정합니다.
• beforeRequestCallback (Function) : 내보내기 전 호출될 콜백함수를 지정합니다.
• fileName (String) : 내보내기 할 때 파일명을 지정하면 해당 파일명을 서버 사이드에서 파라메터로 받을 수 있습니다.
• keyValueMode (Boolean) : 내보내기 할 때 Row 데이터를 칼럼 인덱스에 맞는 배열로 할 지 key-value 로 짝을 갖는 Object 요소 배열로 할지 여부를 나타냅니다.
• localControl(Boolean) : 다운로딩 처리가 아닌 데이터를 Blob 으로 반환할지 여부를 지정합니다.(기본값 : false)
• localControlFunc(Function) : localControl 를 true 설정한 경우 그리드가 JSON 서식 작성 완료 후 Blob 으로 반환하는 함수입니다.
• localAsText (Boolean) : localControl 를 true 설정한 경우 localControlFunc 의 파라메터를 Blob 대신 String 으로 대체할지 여부를 지정합니다.(기본값 : false)

관련 데모 보기

현재 그리드 데이터를 배열로 반환합니다. keyValueMode에 따라 각 행을 객체 또는 배열로 구성합니다.

파라메터 설명

• keyValueMode (Boolean) : 내보내기 할 때 Row 데이터를 칼럼 인덱스에 맞는 배열로 할 지 key-value 로 짝을 갖는 Object 요소 배열로 할지 여부를 나타냅니다.

keyValueMode 를 true 로 지정한 경우 한 행의 구조는 다음과 같습니다.

 [{"name" : "Anna", "country" : "USA" .... }] 

keyValueMode 를 false 로 지정한 경우 한 행의 구조는 다음과 같습니다.

 [ "Anna", "USA", .... ] 

Return : (Array) 그리드의 Array-Object 데이터

관련 데모 보기

현재 그리드 데이터를 PDF 파일로 내보냅니다.

PDF는 고정된 행 높이로 출력합니다. 일반형의 셀 병합과 wordWrap에 따른 가변 행 높이는 지원하지 않습니다.

긴 텍스트의 경우 PDF로 내보내기는 적절하지 않습니다. 그 텍스트에 맞게 해당 칼럼의 크기가 커야 합니다.

또한 그리드에 설정된 스타일 중 글자 색상, 배경색, 볼드체, 언더라인 만 고려되어 내보내기 됩니다.

최소한의 PDF 내보내기 기능만을 제공합니다.

HTML5 를 완전히 지원하는 브라우저에서 사용 가능합니다.

PDF 에는 내보내기 할 수 있는 크기(size)가 정해져 있습니다. 최대 크기는 4A0 용지 크기인 1682 x 2378mm (66.2 x 93.6 인치) 입니다.

파라메터 설명

• exportProps (Object) : PDF로 내보내기 할 때 파일명, 상단, 하단 추가 텍스트를 지정할 수 있는 파라메터입니다.

■ exportProps 파라메터 작성 설명 ■

exportProps 파라메터는 Object 로 그 요소는 다음과 같습니다.

fontPath 는 반드시 지정해야 PDF 저장이 가능합니다.

• afterRequestCallback (Function) : 내보내기 후 호출될 콜백함수를 지정합니다.
• beforeRequestCallback (Function) : 내보내기 전 호출될 콜백함수를 지정합니다.
• fontPath (String) : PDF 파일 작성 시 사용할 글꼴(Font) URL 경로입니다.(필수)
• compress (Boolean) : PDF 파일 작성 시 압축을 할 지 여부를 지정합니다.(기본값: false)
• fileName (String) : PDF로 내보내기 할 때 파일명을 지정하면 해당 파일명을 서버 사이드에서 파라메터로 받을 수 있습니다.
• exportStyle (Object) : useExportStyle이 true일 때 클래스별로 덮어쓸 스타일을 지정합니다. 키는 점(.)을 제외한 클래스명이며, 값은 color, backgroundColor 등의 스타일 객체입니다. 각 파일 형식에서 지원하는 기존 스타일 속성을 사용합니다. 지정하지 않은 속성은 기존 클래스의 값을 유지합니다. (v3.0.18 이상)
• useExportStyle (Boolean) : 화면 테마 대신 CSS의 -for-export 기본 클래스를 사용합니다. 기본값은 false입니다. 사용자 클래스는 exportStyle로 재정의할 수 있습니다. (v3.0.18 이상)
• isRowStyleFront(Boolean) : 행에 적용된 스타일이 열에 적용된 스타일 보다 상위에 적용될지 여부를 지정합니다.(기본값 : true)
• localControl(Boolean) : 다운로딩 처리가 아닌 데이터를 Blob 으로 반환할지 여부를 지정합니다.(기본값 : false)
• localControlFunc(Function) : localControl 를 true 설정한 경우 그리드가 PDF 서식 작성 완료 후 Blob 으로 반환하는 함수입니다.
• headers (Array) : 그리드 상단에 표시할 추가 행들을 지정합니다. 제목이나 부제목과 같은 내용이 될 수 있습니다.
• footers (Array) : 그리드 하단에 표시할 추가 행들을 지정합니다.

headers 와 footer 는 Array 이며 요소로는 Object 를 갖으며 개별 요소(1개의 Object)가 1행을 나타냅니다.

Object 는 "text", "height", "style" 의 필드를 갖으며 다음은 이에 대한 설명입니다.

• text (String) : PDF에 표시할 텍스트입니다.
• height (Number) : PDF에서 행의 높이를 지정합니다.(px 단위, 실제 PDF는 pt 입니다. 그리드가 px 를 pt 로 변환하므로 px 단위로 지정하십시오.)
• style (Object) : 행의 스타일을 지정합니다. (유효값 : fontSize, textAlign, underline, background, color)

// PDF 내보내기 속성
 const exportProps = {
        // 저장하기 파일명
        fileName : "2024년_지역별_매출_내역(AUIGrid)",
        // 폰트 경로 지정 (필수)
        fontPath : "./pdfkit/jejugothic-regular.ttf",
        // 헤더 내용
        headers : [{
             text : "", height:20 // 첫행 빈줄
        }, {
             text : "2024년 지역별 매출 내역", height:24, style : 
                  { fontSize:20, textAlign:"center", underline:true, background:"#DAD9FF"}
        }, {
             text : "작성자 : 에이유아이", style : { textAlign:"right"}
        }, {
             text : "작성일 : 2025. 03. 29", style : { textAlign:"right"}
        }, {
             text : "", height:5, style : { background:"#555555"} // 빈줄 색깔 경계 만듬
        }],
        // 푸터 내용
        footers : [{
             text : "", height:5, style : { background:"#555555"} // 빈줄 색깔 경계 만듬
        }, {
             text : "참고 : 문의 사항은 전산팀으로 연락 하십시오.", style : { fontSize:15, color:"#2F9D27"}
        }, {
             text : "Copyright AUISoft", height:24, style : 
                  { textAlign:"right", color:"#ffffff", background:"#222222"}
        }]
 };
 // 내보내기 실행
 AUIGrid.exportToPdf(myGridID, exportProps);

밴드형의 rowHeight 옵션은 데이터 한 행 전체의 높이입니다.

화면 테마와 별도로 밝은 기본 서식을 적용하고 강조 클래스의 색상을 변경하는 예입니다.

const exportProps = {
    useExportStyle: true,
    exportStyle: {
        "my-strong-style": { backgroundColor: "#cdcdcd", color: "#FF0000" }
    },
    fontPath: "./pdfkit/nyjgothic-medium.ttf"
};
AUIGrid.exportToPdf(myGridID, exportProps);

styleFunction이 객체를 반환하면 그 값을 그대로 사용합니다. 객체의 var() 값은 계산하지 않으므로 색상은 완성된 값으로 지정하십시오.

bodyLayoutMode 옵션으로 화면 설정을 바꾸지 않고 PDF 파일의 레이아웃을 지정합니다. (v3.0.19 이상)

• "flat": 계층형 헤더를 유지하고 본문에는 최하위 칼럼만 출력합니다.
• "flatAll": dataField가 있는 상위 칼럼과 하위 칼럼을 각각 독립된 열로 출력합니다.
• "band": 상위 셀과 하위 셀을 밴드형으로 출력합니다.

생략하면 현재 화면에 적용된 모드를 따릅니다. 셀 병합을 사용하는 그리드의 모드 변경과 wordWrap 그리드의 band 출력은 지원하지 않습니다. band의 rowHeight는 데이터 한 행 전체의 높이입니다.

AUIGrid.exportToPdf(myGridID, {
    bodyLayoutMode: "flatAll",
    rowHeight: 30,
    fontPath: "./pdfkit/nyjgothic-medium.ttf"
});

관련 데모 보기 | 관련 데모 보기 | 관련 데모 보기

관련 데모 보기

현재 그리드 데이터를 TXT 형식으로 내보냅니다.

파라메터 설명

• exportProps (Object) : 내보내기 할 때 파일명 등을 지정할 수 있는 파라메터입니다.

■ exportProps 파라메터 설명 ■

exportProps 파라메터는 Object 로 그 요소는 다음과 같습니다.

• afterRequestCallback (Function) : 내보내기 후 호출될 콜백함수를 지정합니다.
• beforeRequestCallback (Function) : 내보내기 전 호출될 콜백함수를 지정합니다.
• fileName (String) : 내보내기 할 때 파일명을 지정하면 해당 파일명을 서버 사이드에서 파라메터로 받을 수 있습니다.
• localControl(Boolean) : 다운로딩 처리가 아닌 데이터를 Blob 으로 반환할지 여부를 지정합니다.(기본값 : false)
• localControlFunc(Function) : localControl 를 true 설정한 경우 그리드가 TXT 서식 작성 완료 후 Blob 으로 반환하는 함수입니다.
• localAsText (Boolean) : localControl 를 true 설정한 경우 localControlFunc 의 파라메터를 Blob 대신 String 으로 대체할지 여부를 지정합니다.(기본값 : false)
• progressBar (Boolean) : 내보내기 진행 상황을 퍼센티지로 보여줄지 여부를 나타냅니다.(기본값 : false)

관련 데모 보기

현재 그리드 데이터를 Excel 파일(.xlsx)로 내보냅니다.

엑셀 보내내기 시 그리드의 전반적인 내용이 그대로 내보내기 됩니다.

그러나 그리드에 설정된 모든 스타일이 다 엑셀로 내보내기 되는 것이 아닙니다.

글자 색상(color), 배경색(background-color), 이탤릭체(font-style: italic), 볼드체(font-weight: bold), 언더라인(text-decoration: underline)만 고려되어 내보내기 됩니다.

bodyLayoutMode로 화면과 다른 Excel 레이아웃을 지정할 수 있습니다. 생략하면 현재 화면에 적용된 모드를 사용합니다. (v3.0.19 이상)

// 화면은 밴드형으로 유지하고 Excel에는 상위 값까지 독립된 열로 출력합니다.
AUIGrid.exportToXlsx(myGridID, { bodyLayoutMode: "flatAll", rowHeight: 32 });

flat은 계층형 헤더와 하위 칼럼, flatAll은 dataField가 있는 상위 칼럼과 하위 칼럼을 한 단계로, band는 상위 셀과 하위 셀을 밴드형으로 출력합니다. bodyCell: false인 상위 칼럼도 dataField가 있으면 flatAll에 포함됩니다.

columnSizeOfDataField는 출력 칼럼의 너비를 지정합니다. flatAll에서 새로 노출되는 상위 칼럼은 자신의 width와 minWidth, maxWidth를 사용합니다. 푸터는 positionField로 출력 열에 연결합니다.

레이아웃을 바꾸는 내보내기는 enableCellMerge와 함께 사용할 수 없으며, wordWrap을 사용하는 그리드에서는 band로 내보낼 수 없습니다. PDF 내보내기에는 bodyLayoutMode 옵션을 적용하지 않습니다.

파라메터 설명

• exportProps (Object) : 엑셀로 내보내기 할 때 파일명, 상단, 하단 추가 텍스트를 지정할 수 있는 파라메터입니다.

■ exportProps 파라메터 작성 설명 ■

exportProps 파라메터는 Object 로 그 요소는 다음과 같습니다.

• afterRequestCallback (Function) : 엑셀로 내보내기 후 호출될 콜백함수를 지정합니다.
• beforeRequestCallback (Function) : 엑셀로 내보내기 전 호출될 콜백함수를 지정합니다.
• bodyLayoutMode (String) : Excel 본문 레이아웃입니다. "flat", "flatAll", "band" 중 하나를 지정하며 생략하면 현재 화면의 모드를 따릅니다. (v3.0.19 이상)
• baseFontSize (Number) : 엑셀의 기본 글꼴 크기를 명시적으로 지정합니다.
• columnSizeOfDataField (Object) 엑셀 내보내기할 때 칼럼 사이즈의 크기를 지정합니다.
• compress (Boolean) : 엑셀 파일 작성 시 압축을 할 지 여부를 지정합니다.(기본값 : false)
• exceptColumnFields (Array) : 엑셀로 저장 할 때 포함 시키지 않을 칼럼들의 dataField 를 지정합니다.
• exportWithStyle (Boolean) : 엑셀로 내보내기 할 때 스타일 정보(폰트 및 컬러 등)을 함께 내보내기 할지 여부를 나타냅니다.
• fileName (String) : 엑셀로 내보내기 할 때 파일명을 지정하면 해당 파일명을 서버 사이드에서 파라메터로 받을 수 있습니다.
• fontFamily (String) : 엑셀로 저장 시 적용될 폰트명을 지정하십시오.(기본값: "맑은 고딕") 예를 들어 Arial 폰트로 적용하고자 한다면 "Arial" 로 설정하십시오.
• exportStyle (Object) : useExportStyle이 true일 때 클래스별로 덮어쓸 스타일을 지정합니다. 키는 점(.)을 제외한 클래스명이며, 값은 color, backgroundColor 등의 스타일 객체입니다. 각 파일 형식에서 지원하는 기존 스타일 속성을 사용합니다. 지정하지 않은 속성은 기존 클래스의 값을 유지합니다. (v3.0.18 이상)
• useExportStyle (Boolean) : 화면 테마 대신 CSS의 -for-export 기본 클래스를 사용합니다. 기본값은 false입니다. 사용자 클래스는 exportStyle로 재정의할 수 있습니다. (v3.0.18 이상)
• isRowStyleFront(Boolean) : 행에 적용된 스타일이 열에 적용된 스타일 보다 상위에 적용될지 여부를 지정합니다.(기본값 : true)
• localControl(Boolean) : 다운로딩 처리가 아닌 엑셀 데이터를 Blob 으로 반환할지 여부를 지정합니다.(기본값 : false)
• localControlFunc(Function) : localControl 를 true 설정한 경우 그리드가 엑셀 서식 작성 완료 후 Blob 으로 반환하는 함수입니다.
• preserveSpace (Boolean) : 값의 앞 또는 뒤에 공백이 존재할 때 해당 공백을 유지할지 여부를 지정합니다.(기본값:false)
• progressBar (Boolean) : 내보내기 진행 상황을 퍼센티지로 보여줄지 여부를 나타냅니다.(기본값 : false)
• rowHeight (Number) : 엑셀에서의 행 높이를 명시적으로 지정합니다. wordWrap 인 경우 무시됩니다. 기본값은 그리드 속성 rowHeight 값을 따릅니다.
• sheetName (String) : 엑셀로 내보내기 할 때 엑셀의 시트명을 지정합니다. (기본값 : Sheet 1)
• showRowNumColumn (Boolean) : 엑셀로 내보내기 할 때 행번호 칼럼을 보여줄지 여부를 나타냅니다. 기본값은 그리드 속성 showRowNumColumn 값을 따릅니다.
• showProcessLoader (Boolean) : 진행 상태 이미지 출력 여부를 지정합니다. (기본값 : true)
• fixedColumnCount (Number) : 엑셀로 내보내기 할 때 엑셀 상의 틀고정 열(column)을 임의로 지정합니다.
• fixedRowCount (Number) : 엑셀로 내보내기 할 때 엑셀 상의 틀고정 행(row)을 임의로 지정합니다.
• headers (Array) : 그리드 상단에 표시할 추가 행들을 지정합니다. 제목이나 부제목과 같은 내용이 될 수 있습니다.
• footers (Array) : 그리드 하단에 표시할 추가 행들을 지정합니다.
• rectangles (Array) : 엑셀의 텍스트 상자를 지정합니다.

headers 와 footer 는 Array 이며 요소로는 Object 를 갖으며 개별 요소(1개의 Object)가 엑셀에서 1행을 나타냅니다.

Object 는 text, height, style 의 필드를 갖으며 다음은 이에 대한 설명입니다.

• text (String) : 엑셀에 표시할 텍스트입니다.
• height (Number) : 엑셀에서 행의 높이를 지정합니다.(px 단위, 실제 엑셀은 pt 입니다. 그리드가 px 를 pt 로 변환하므로 px 단위로 지정하십시오.)
• style (Object) : 행의 스타일을 지정합니다.
  • fontSize (Number) : 폰트 사이즈
  • textAlign (String) : 텍스트 정렬 (유효값 : "left", "center", "right")
  • verticalAlign (String) : 텍스트의 수직 정렬 (유효값 : "top", "middle", "bottom")
  • color (String) : 폰트 색상 RGB
  • background (String) : 배경 색상 RGB
  • fontStyle (String) : 이탤릭 스타일 여부 (유효값: "normal", "italic")
  • fontWeight (String) : 볼드체 스타일 여부(유효값 : "normal", "bold)
  • underline (Boolean) : 언더라인 여부

rectangles 는 Object 로 그 요소는 text, dimension, style 의 필드를 갖습니다. 이에 대한 설명입니다.

• text (String) : 텍스트 상자에 출력할 텍스트입니다.
• dimension (Object) : 텍스트 상자 위치에 관한 정보입니다.
  • fromColIdx (Number) : 상자가 위치할 시작 columnIndex (즉, 가로의 시작 점)
  • toColIdx (Number) : 상자가 끝날 columnIndex(즉, 가로의 끝점)
  • fromRowIdx (Number) : 상자가 위치할 시작 rowIndex(즉, 세로의 시작 점)
  • toRowIdx (Number) : 상자가 끝날 rowIndex(즉, 세로의 끝점)
  • fromRowOff, toRowOff, fromColOff, toColOff (Number) : 각각 해당 인덱스에서 몇 px 만큼의 여백을 가질지 지정 (즉, offset 값)
• style: 텍스트 상자의 스타일을 지정합니다.
  • fontSize (Number) : 폰트 사이즈
  • textAlign (String) : 텍스트 정렬 (유효값 : "left", "center", "right")
  • verticalAlign (String) : 텍스트의 수직 정렬 (유효값 : "top", "middle", "bottom")
  • color (String) : 폰트 색상 RGB
  • background (String) : 배경 색상 RGB
  • fontStyle (String) : 이탤릭 스타일 여부 (유효값: "normal", "italic")
  • fontWeight (String) : 볼드체 스타일 여부(유효값 : "normal", "bold")
  • underline (Boolean) : 언더라인 여부
  • borderColor (String) : 테두리 색상 RGB
  • borderThickness (Number) : 테두리 두께

// 엑셀 내보내기 속성
 const exportProps = {
        // 저장하기 파일명
        fileName : "2024년_지역별_매출_내역(AUIGrid)",
        // 저장 할 때 dataField 가 name, product 인 칼럼들 저장에서 제외시킴.
        exceptColumnFields : ["name", "product"],
        // price 칼럼의 너비를 200 으로 지정하여 내보내기
        columnSizeOfDataField : { "price" : 200 },
        // 헤더 내용
        headers : [{
             text : "", height:20 // 첫행 빈줄
        }, {
             text : "2024년 지역별 매출 내역", height:24, style : 
                  { fontSize:20, textAlign:"center", fontWeight:"bold", underline:true, background:"#DAD9FF"}
        }, {
             text : "작성자 : 에이유아이", style : { textAlign:"right"}
        }, {
             text : "작성일 : 2025. 03. 29", style : { textAlign:"right"}
        }, {
             text : "", height:5, style : { background:"#555555"} // 빈줄 색깔 경계 만듬
        }],
        // 푸터 내용
        footers : [{
             text : "", height:5, style : { background:"#555555"} // 빈줄 색깔 경계 만듬
        }, {
             text : "참고 : 문의 사항은 전산팀으로 연락 하십시오.", style : { fontSize:15, color:"#2F9D27"}
        }, {
             text : "Copyright AUISoft", height:24, style : 
                  { textAlign:"right", fontWeight:"bold", color:"#ffffff", background:"#222222"}
        }]
 };
 // 내보내기 실행
 AUIGrid.exportToXlsx(myGridID, exportProps);

밴드형의 rowHeight 옵션은 데이터 한 행 전체의 높이입니다. 숨긴 칼럼을 제외하려면 exceptColumnFields를 지정하십시오.

화면 테마와 별도로 밝은 기본 서식을 적용하고 강조 클래스의 색상을 변경하는 예입니다.

const exportProps = {
    useExportStyle: true,
    exportStyle: {
        "my-strong-style": { backgroundColor: "#cdcdcd", color: "#FF0000" }
    }
};
AUIGrid.exportToXlsx(myGridID, exportProps);

styleFunction이 객체를 반환하면 그 값을 그대로 사용합니다. 객체의 var() 값은 계산하지 않으므로 색상은 완성된 값으로 지정하십시오.

exportWithStyle이 false이면 내보내기 전용 스타일도 적용하지 않습니다.

관련 데모 보기 | 관련 데모 보기 | 관련 데모 보기 | 관련 데모 보기

여러 그리드의 현재 데이터를 하나의 Excel 파일(.xlsx)에 내보냅니다. 각 그리드의 데이터는 별도의 시트에 배치됩니다.

bodyLayoutMode, useExportStyle과 exportStyle은 각 시트의 exportProps에 지정합니다. bodyLayoutMode는 v3.0.19부터 지원하며 해당 시트의 레이아웃만 변경합니다.

파라메터 설명

• subGridIds (Array) : 시트(Sheets)에 각각 같이 내보내기 할 서브 그리드들의 pid 배열
• exportProps (Array) : 각각 그리드들의 내보내기 속성 정의 배열

■ exportProps 파라메터 작성 설명 ■

exportProps 파라메터는 Object 를 요소로 갖는 Array 를 정의합니다. 개별 Object 는 다음의 속성을 갖습니다.

배열의 첫번째 요소는 1번 시트로 마스터 그리드에 해당되고, 두번째 요소부터 서브 그리드에 해당됩니다.

마스터 그리드의 exportProps 작성은 exportToXlsx 의 exportProps 를 참고하십시오.

다음은 서브 그리드들에서 작성 가능한 exportProps 에 대한 구체적인 속성입니다.

• bodyLayoutMode (String) : 해당 시트의 "flat", "flatAll", "band" 레이아웃을 지정합니다. 생략하면 해당 그리드의 현재 화면 모드를 따릅니다.
• exceptColumnFields (Array) : 엑셀로 저장 할 때 포함 시키지 않을 칼럼들의 dataField 를 지정합니다.
• exportWithStyle (Boolean) : 엑셀로 내보내기 할 때 스타일 정보(폰트 및 컬러 등)을 함께 내보내기 할지 여부를 나타냅니다.
• exportStyle (Object) : useExportStyle이 true일 때 클래스별로 덮어쓸 스타일을 지정합니다. 키는 점(.)을 제외한 클래스명이며, 값은 color, backgroundColor 등의 스타일 객체입니다. 각 파일 형식에서 지원하는 기존 스타일 속성을 사용합니다. 지정하지 않은 속성은 기존 클래스의 값을 유지합니다. (v3.0.18 이상)
• useExportStyle (Boolean) : 화면 테마 대신 CSS의 -for-export 기본 클래스를 사용합니다. 기본값은 false입니다. 사용자 클래스는 exportStyle로 재정의할 수 있습니다. (v3.0.18 이상)
• isRowStyleFront(Boolean) : 행에 적용된 스타일이 열에 적용된 스타일 보다 상위에 적용될지 여부를 지정합니다.(기본값 : true)
• sheetName (String) : 엑셀로 내보내기 할 때 엑셀의 시트명을 지정합니다. (기본값 : Sheet 1)
• fixedColumnCount (Number) : 엑셀로 내보내기 할 때 엑셀 상의 틀고정 열(column)을 임의로 지정합니다.
• fixedRowCount (Number) : 엑셀로 내보내기 할 때 엑셀 상의 틀고정 행(row)을 임의로 지정합니다.
• headers (Array) : 그리드 상단에 표시할 추가 행들을 지정합니다. 제목이나 부제목과 같은 내용이 될 수 있습니다.
• footers (Array) : 그리드 하단에 표시할 추가 행들을 지정합니다.

const exportProps = [{
     sheetName : "일반 데이터"
 }, {
     sheetName : "그룹핑 셀병합 Type 1"
 }, {
     sheetName : "그룹핑 셀병합 Type 2",
 }, {
     sheetName : "그룹핑 셀병합 Type 3"
 }];
 // 다수의 그리드를 1개의 엑셀로 내보내기 하기
 AUIGrid.exportToXlsxMulti(myGridID1, [myGridID2, myGridID3, myGridID4], exportProps);

관련 데모 보기 | 관련 데모 보기

현재 그리드 데이터를 XML 형식으로 내보냅니다.

파라메터 설명

• exportProps (Object) : 내보내기 할 때 파일명 등을 지정할 수 있는 파라메터입니다.

■ exportProps 파라메터 설명 ■

exportProps 파라메터는 Object 로 그 요소는 다음과 같습니다.

• afterRequestCallback (Function) : 내보내기 후 호출될 콜백함수를 지정합니다.
• beforeRequestCallback (Function) : 내보내기 전 호출될 콜백함수를 지정합니다.
• fileName (String) : 내보내기 할 때 파일명을 지정하면 해당 파일명을 서버 사이드에서 파라메터로 받을 수 있습니다.
• localControl(Boolean) : 다운로딩 처리가 아닌 데이터를 Blob 으로 반환할지 여부를 지정합니다.(기본값 : false)
• localControlFunc(Function) : localControl 를 true 설정한 경우 그리드가 XML 서식 작성 완료 후 Blob 으로 반환하는 함수입니다.
• localAsText (Boolean) : localControl 를 true 설정한 경우 localControlFunc 의 파라메터를 Blob 대신 String 으로 대체할지 여부를 지정합니다.(기본값 : false)

관련 데모 보기

현재 진행 중인 셀 편집을 코드에서 완료하거나 취소합니다.

이 메소드는 (더블)클릭 또는 F2 키 등과 같이 편집 진입한 상태인 경우에만 유효합니다.

사용자 정의 편집 렌더러(customEditRenderer) 를 사용했을 때 편집 렌더러의 값을 강제적으로 완료 또는 취소로 만들고자 한다면 이 메소드를 사용하세요.

현재 편집 인풋터(inputer)에 있는 값으로 편집 완료 상태로 만들고자 한다면 value 를 null 로 설정하십시오.

파라메터 설명

• value (Object) : 설정하고자 하는 값
• cancel (Boolean) : 이 값이 true 라면 에디팅 취소(cancel) 가 적용됩니다.

관련 데모 보기

그리드 생성 후 추가된 칼럼의 dataField를 배열로 반환합니다.

사용자가 임의로 열을 추가한 후, 다시 삭제하였다면 추가된 열에 포함되지 않습니다.

Return : (Array) 추가된 열의 dataField 들

관련 데모 보기

그리드에 추가된 행 아이템을 배열로 반환합니다.

Return : (Array) 추가된 행 아이템들

관련 데모 보기

트리 그리드에서 지정한 행의 모든 조상 행을 배열로 반환합니다. 대상 행은 rowIdField의 고유 값으로 지정합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)

Return : (Array) 주어진 행 고유 값(rowIdField 값)에 따른 모든 조상 행 아이템들

관련 데모 보기

행과 필드에 해당하는 바디 셀의 종류를 반환합니다.

파라메터 설명

• rowIndex : (Number) 정렬과 필터가 적용된 전체 데이터 뷰의 행 인덱스. 0부터 시작
• dataField : (String) 칼럼의 데이터 필드명

반환값은 다음과 같습니다.

• "branch" : band에서 bodyCell:true인 상위 셀
• "leaf" : 하위 셀 또는 flat과 flatAll의 일반 셀
• null : 유효하지 않은 행이나 필드, 바디 셀이 없는 상위 칼럼

const kind = AUIGrid.getBodyCellKind(myGridID, 0, "team");

관련 데모 보기

행과 칼럼 인덱스로 지정한 셀의 DOM 요소(TD)를 반환합니다.

파라메터 설명

• rowIndex : (Number) 셀의 행 인덱스
• columnIndex : (Number) 셀의 열 인덱스

Return : (Element Object) 해당 셀의 TD 엘리먼트

화면 밖으로 가상화되어 DOM이 없는 셀은 null을 반환합니다. 데이터 값만 필요하면 getCellValue() 또는 getCellFormatValue()를 사용하십시오.

지정한 셀에 표시되는 포매팅된 값을 반환합니다.

파라메터 설명

• rowIndex (Number) : 얻고자하는 행 인덱스
• dataField or columnIndex(String or Number) : 얻고자 하는 칼럼의 dataField 또는 칼럼 인덱스

// 0번째 행의 price 칼럼의 포매팅된 값 얻기
 const myValue = AUIGrid.getCellFormatValue(myGridID, 0, "price");
 // 3번째 행의 1 번째 칼럼 즉, (3, 1) 의 셀의 포매팅된 값 얻기
 const otherValue = AUIGrid.getCellFormatValue(myGridID, 3, 1);

Return : 선택 셀 포매팅된 값

참고 : getCellValue 과 getCellFormatValue 의 차이는 값의 포매팅 여부 입니다.

예를 들어 칼럼에 labelFunction 이나 formatString 으로 값의 출력 형식을 변경했을 때,

getCellValue 는 원래 값이 반환되고, getCellFormatValue 는 labelFunction 또는 formatString 이 적용된 값을 반환합니다.

Also See : getItemByRowIndex, setCellValue, getCellValue

지정한 셀의 데이터 값을 반환합니다. 포매팅된 표시 값이 필요하면 getCellFormatValue()를 확인하십시오.

파라메터 설명

• rowIndex (Number) : 얻고자하는 행 인덱스
• dataField or columnIndex(String or Number) : 얻고자 하는 칼럼의 dataField 또는 칼럼 인덱스

Return : 선택 셀 값

// 0번째 행의 name 칼럼의 값 얻기
 const myValue = AUIGrid.getCellValue(myGridID, 0, "name");
 // 3번째 행의 1 번째 칼럼 즉, (3, 1) 의 셀의 값 얻기
 const otherValue = AUIGrid.getCellValue(myGridID, 3, 1);

참고 : getCellValue 과 getCellFormatValue 의 차이는 값의 포매팅 여부 입니다.

예를 들어 칼럼에 labelFunction 이나 formatString 으로 값의 출력 형식을 변경했을 때

getCellValue 는 원래 값이 반환되고, getCellFormatValue 는 labelFunction 또는 formatString 이 적용된 값을 반환합니다.

Also See : getItemByRowIndex, setCellValue, getCellFormatValue

관련 데모 보기

행 체크박스로 체크한 행의 데이터와 행 인덱스를 배열로 반환합니다.

Return : (Array) 체크된 행 아이템 및 행 인덱스 배열

관련 데모 보기

행 체크박스로 체크한 행 아이템을 배열로 반환합니다.

즉, getCheckedRowItems 메소드는 행 아이템과 행인덱스 배열을 반환하지만 이 메소드는 순수 행 아이템을 요소로 갖는 배열을 반환합니다.

트리 그리드인 경우, 체크된 행이 부모의 열기/닫기로 인해 숨겨진 경우 getCheckedRowItems() 는 숨겨진 행 아이템을 반환하지 않습니다.

트리 그리드에서 숨겨진 행 아이템들도 얻고자 하는 경우 getCheckedRowItemsAll() 를 사용하십시오.

Return : (Array) 체크된 행 아이템 배열

관련 데모 보기

현재 그리드에서 출력하는 칼럼의 전체 개수를 반환합니다.

Return : (Number) 전체 열(columns) 수

지정한 칼럼의 값에서 중복을 제거한 목록을 반환합니다.

참고 : getColumnDistinctValues 메소드는 중복을 제거한 값을 반환하는 반면 getColumnValues 메소드는 모든 값을 반환합니다.

파라메터 설명

• dataField : (String) 칼럼의 dataField 명
• total : (Boolean) 그리드의 원래 데이터를 대상으로 할지 여부. 즉, 필터링이 된 경우 필터링 된 상태의 값만 원한다면 false 지정

Return : (Array) 해당 칼럼이 출력하고 있는 모든 값들(중복된 값이 제거된 고유 값들만 반환)

관련 데모 보기

데이터 필드명에 해당하는 칼럼의 현재 인덱스를 반환합니다.

파라메터 설명

• dataField : (String) 데이터 필드명

Return : (Number) 칼럼 인덱스. 없는 필드 또는 flat의 상위 그룹 칼럼은 -1

band의 상위 칼럼은 첫 하위 칼럼의 인덱스를 반환합니다. 숫자 인덱스로 다시 조회하면 하위 칼럼이 반환되므로 상위 셀은 dataField로 지정하십시오.

숨긴 하위 칼럼도 인덱스에 포함됩니다. flatAll에서는 펼친 상위 칼럼도 일반 칼럼 인덱스를 가지므로 모드를 바꾼 뒤 다시 조회하십시오.

관련 데모 보기

현재 출력 중인 칼럼 정보를 1차원 배열로 반환합니다.

만약 칼럼 레이아웃을 그룹형(계층형)으로 설정한 경우 이 메소드의 반환 값은 최하위 자식들의 정보만을 담은 배열입니다.

그룹형이 아닌 경우, 이 반환값은 getColumnLayout() 메소드의 값과 같습니다.

Return : (Array) 현재 그리드 칼럼 레이아웃

dataField에 해당하는 칼럼 레이아웃의 객체를 반환합니다.

파라메터 설명

• dataField : (String) 컬럼이 출력하고 있는 데이터필드명

Return : (Object) 칼럼 레이아웃의 칼럼 객체

band의 상위 그룹 칼럼도 columnIndex에 첫 하위 leaf의 인덱스, depth에 헤더 기준 깊이(최상위 1)를 제공합니다. 상위 칼럼의 식별에는 dataField를 사용합니다.

관련 데모 보기

columnIndex에 해당하는 칼럼 레이아웃의 객체를 반환합니다.

파라메터 설명

• columnIndex : (Number) 컬럼이 출력되고 있는 인덱스

Return : (Object) 칼럼 레이아웃의 칼럼 객체

현재 표시하는 칼럼 레이아웃을 반환합니다. flatAll에서는 펼친 칼럼 목록을 반환합니다.

Return : (Array) 칼럼 레이아웃

관련 데모 보기

지정한 칼럼의 값 목록을 반환합니다.

참고 : getColumnDistinctValues 메소드는 중복을 제거한 값을 반환하는 반면 getColumnValues 메소드는 모든 값을 반환합니다.

파라메터 설명

• dataField : (String) 칼럼의 dataField 명
• total : (Boolean) 그리드의 원래 데이터를 대상으로 할지 여부. 예로 필터링이 된 경우 필터링 무시하고 전체 데이터 대상 원한다면 true 지정

Return : (Array) 해당 칼럼이 출력하고 있는 모든 값들

dataField에 해당하는 칼럼의 현재 너비를 반환합니다.

파라메터 설명

• dataField : (String) 데이터 필드명

Return : (Number) 칼럼의 현재 너비(width)

// "name" 의 현재 width 값 얻기
 const width = AUIGrid.getColumnWidthByDataField(myGridID, "name");

현재 출력 중인 칼럼의 너비를 배열로 반환합니다.

Return : (Array) 칼럼의 모든 너비(width) 배열

페이징(usePaging=true)을 사용하는 경우, 현재 페이지에 표시되는 행의 데이터만 반환합니다. 전체 필터 결과를 반환하는 getGridData()와 조회 범위가 다릅니다.

지정한 칼럼 인덱스에 해당하는 dataField를 반환합니다.

파라메터 설명

• columnIndex : (Number) 칼럼 인덱스

Return : (String) 데이터 필드명

관련 데모 보기

행 ID에 해당하는 트리 행의 깊이를 반환합니다.

파라메터 설명

• rowId : (String) rowIdField로 지정한 행의 고유 값

Return : (Number or null or undefined) 반환값은 다음과 같습니다.

• Number : 최상위가 1인 행 깊이
• null : 트리에서 해당 행을 찾지 못한 경우
• undefined : 일반 그리드
• -1 : 행 ID를 생략하거나 null로 전달한 경우, 또는 유효하지 않은 그리드

트리 그리드에서 지정한 행의 모든 자손 행을 배열로 반환합니다. 대상 행은 rowIdField의 고유 값으로 지정합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)

Return : (Array) 주어진 행 고유 값(rowIdField 값)에 따른 모든 자손 행 아이템들

관련 데모 보기

수정된 행에서 수정한 필드의 정보를 배열로 반환합니다.

getEditedRowItems() 과 다르게 이 메소드는 행 아이템 전체를 반환하지 않습니다. 예를들어 칼럼이 총 10개 있다고 했을 때 그 중 2개 칼럼만 수정했다면 해당 2개 칼럼만을 반환합니다.

행 아이템 전체를 얻고자 한다면 getEditedRowItems() 메소드를, 행에서 진짜로 수정된 칼럼들만 얻고자 한다면 이 메소드를 사용하십시오.

수정된 아이템은 최초의 데이터에서 addRow 메소드로 추가된 아이템을 수정한 경우 포함되지 않습니다.

addRow 메소드로 추가된 아이템은 수정했더라도 최종적으로 추가된 아이템에 해당되기 때문입니다.(getAddedRowItems으로 확인 가능)

Return : (Array) 수정된 행 아이템들

Also See : getEditedRowItems

관련 데모 보기

수정된 행 아이템을 배열로 반환합니다.

수정된 아이템은 최초의 데이터에서 addRow 메소드로 추가된 아이템을 수정한 경우 포함되지 않습니다.

addRow 메소드로 추가된 아이템은 수정했더라도 최종적으로 추가된 아이템에 해당되기 때문입니다.(getAddedRowItems으로 확인 가능)

Return : (Array) 수정된 행 아이템들

Also See : getEditedRowColumnItems

관련 데모 보기

현재 필터 조건을 객체로 반환합니다. 보관한 조건은 setFilterCache()로 복원할 수 있습니다.

• 일반 값 필터 : 필드별 선택값 배열
• numeric 필터 : 숫자 조건 문자열
• 트리 계층 필터 : { type: "tree", rowIds: [...] }
• 그룹 계층 필터 : { type: "group", fields: [...], paths: [...] }

rowIds는 선택한 행 ID, paths는 fields 순서의 값 경로입니다. 함수 기반 필터는 setFilter()로 별도 설정하십시오.

Return : (Object) 필터 조건

관련 데모 보기

현재 필터 결과의 데이터 행 수를 반환합니다. 접힌 자손 행을 포함하고, 그룹핑으로 생성한 제목 행과 소계 행은 제외합니다.

필터가 없으면 전체 데이터 행 수를 반환하며, 페이징 사용 시에도 모든 페이지를 기준으로 합니다. 일반 트리 데이터에서는 필터 결과에 남아 있는 실제 부모 행도 셉니다.

Return : (Number) 데이터 행 수. 데이터가 없거나 pid가 유효하지 않으면 0

var count = AUIGrid.getFilteredRowCount(myGridID);

화면에 표시되는 그룹 제목 행을 포함한 행 수는 getRowCount를 사용합니다. 필터 결과의 데이터 자체가 필요하면 getTreeFilteredFlatData를 사용합니다.

인라인 필터 입력란에 현재 설정된 텍스트를 반환합니다.

이 메소드는 일반적으로 setFilterInlineTexts 메소드와 같이 사용 합니다.

Return : (Array) 인라인 필터로 필터링 된 칼럼들에 대한 텍스트값들

Also See : setFilterInlineTexts

관련 데모 보기

지정한 칼럼의 텍스트 길이에 맞는 너비를 반환합니다.

텍스트가 아닌 ImageRenderer, TemplateRenderer 와 같은 렌더러는 설정한 widthFit 값이 적용됩니다.

파라메터 설명

• dataField : (String) : 칼럼 데이터 필드명

Return : (Number) 해당 칼럼의 사이즈

헤더 텍스트를 포함한 셀의 텍스트 길이를 조사하여 각 칼럼에 맞는 너비를 배열로 반환합니다. 내용에 맞춰 칼럼 너비를 정할 때 참고할 수 있습니다.

최적의 칼럼 사이즈의 의미는 해당 칼럼에 출력된 텍스트의 길이에 맞는 칼럼 사이즈를 의미합니다.

텍스트가 아닌 ImageRenderer, TemplateRenderer 와 같은 렌더러는 설정한 widthFit 값이 적용됩니다.

파라메터 설명

• fitToGrid (Boolean) : 모든 칼럼 사이즈들의 총합이 그리드 전체 크기보다 작은 경우 그리드 크기에 맞출지 여부를 지정합니다. (기본값: false)

Return : (Array) 모든 칼럼들의 크기를 담은 배열

참고 : getFitColumnSizeList 메소드로 얻은 값을 setColumnSizeList 메소드로 활용하십시오.

관련 데모 보기

현재 표시 중인 푸터 데이터를 객체의 배열로 반환합니다. 각 객체에서 확인할 수 있는 항목은 아래와 같습니다.

반환형은 Object 를 요소로 갖는 배열입니다.

개별 Object 는 다음과 같은 key-value 로 이루어집니다.

• index : 출력된 값의 칼럼 인덱스 값 ("#base" 로 행 번호 칼럼에 출력된 푸터 값은 index 가 -1입니다.)
• value : 푸터의 값이 포매팅 전의 순수 값 (labelFunction 으로 사용자가 임의 지정한 경우 value 는 text 와 같습니다.)
• text : 실제로 푸터의 셀에 출력된 포매팅 된 값

Return : (Array) 출력된 푸터 데이터

관련 데모 보기

푸터의 지정한 필드에 표시되는 포매팅된 값을 반환합니다.

파라메터 설명

• dataField : (String) 푸터의 출력 위치 dataField

Return : (String) 해당 열의 푸터 포매팅된 값

// name 열의 푸터  포매팅된 값 얻기
 const myValue = AUIGrid.getFooterFormatValueByDataField(myGridID, "name");

참고 : getFooterValueByDataField 과 getFooterFormatValueByDataField 의 차이는 값의 포매팅 여부 입니다.

setFooter()로 설정한 푸터 레이아웃을 반환합니다.

Return : (Array) 사용자가 설정한 푸터 객체(푸터 레이아웃)

푸터의 지정한 필드 값을 반환합니다. 포매팅된 표시 값이 필요하면 getFooterFormatValueByDataField()를 확인하십시오.

파라메터 설명

• dataField : (String) 푸터의 출력 위치 dataField

Return : (Number or String) 해당 열의 푸터 값

// name 열의 푸터  값 얻기
 const myValue = AUIGrid.getFooterValueByDataField(myGridID, "name");

참고 : getFooterValueByDataField 과 getFooterFormatValueByDataField 의 차이는 값의 포매팅 여부 입니다.

그리드의 데이터 목록을 행 객체의 배열로 반환합니다. 현재 페이지의 행은 getCurrentPageData()로 조회합니다.

필터링, 정렬 등으로 현재 그리드에 보여지는 데이터가 변했다면, 그 상태의 모습 그대로를 반환합니다.

필터링, 정렬 등으로 변한 데이터가 아닌 전체 데이터를 얻고자 한다면 getOrgGridData 메소드를 사용하십시오.

Return : (Array) 현재 그리드 행 아이템들

관련 데모 보기

현재 그리드 데이터를 행의 추가, 삭제, 수정 상태 정보와 함께 반환합니다.

그리드에 보여지는 현재 데이터 그대로에 행 상태 정보가 포함되어 반환합니다.

추가된 행은 "added", 삭제된 행은 "removed", 수정된 행은 "edited" 값으로 반환합니다.

삭제된 행은 소프트삭제 모드인 경우(softRemoveRowMode=true 인 경우)만 상태가 포함됩니다.

파라메터 설명

• stateField (String) : 상태 정보가 추가될 필드명
• option (Object) : stateField 의 값으로 사용 될 상태 값들 재정의

// 그리드 데이터에 state 필드 상태 정보 포함시켜 반환
 const gridDataWithState = AUIGrid.getGridDataWithState(myGridID, "state");
 // 추가, 삭제, 수정된 상태 정보 값들을 각각 "a", "r", "e" 로 변경하여 반환 (state 필드에 각각 "a", "r", "e" 로 존재함)
 const customGridDataWithState = AUIGrid.getGridDataWithState(myGridID, "state", {added:"a", removed:"r", edited:"e"});

Return : (Array) 상태 정보가 포함된 현재 그리드 행 아이템들

현재 숨겨진 칼럼의 dataField 목록을 반환합니다.

Return : (Array) 숨겨진 칼럼(hidden Columns)들의 dataField 를 담은 배열

관련 데모 보기

현재 숨겨진 칼럼의 인덱스(columnIndex) 목록을 반환합니다.

Return : (Array) 숨겨진 칼럼(hidden Columns)들의 칼럼 인덱스를 담은 배열

JavaScript의 네이티브 마우스 이벤트(MouseEvent)로부터 그리드의 인덱스 정보를 반환합니다.

파라메터 설명

• mouseEvent : (MouseEvent) 마우스 이벤트

Return : (Object) { startRowIndex, startColumnIndex, endRowIndex, endColumnIndex } 의 key 를 갖는 그리드 인덱스 정보 Object

수정된 셀의 변경 전 최초 값을 반환합니다. 행은 rowId, 칼럼은 dataField로 지정합니다.

파라메터 설명

• rowId : (String) 행 아이템의 rowId 값
• dataField : (String) 열의 dataField

Return : (String or Object) 변경 전 원래 셀의 값

// "#Cust1" 이 행의 ID 이고, 데이터 필드명이 "name" 인 열인 셀의 원래 값 반환
  const orgValue = AUIGrid.getInitCellValue(myGridID, "#Cust1", "name");

관련 데모 보기

수정된 행의 변경 전 최초 값을 가진 행 아이템을 반환합니다.

파라메터 설명

• rowId : (String or Array) 행 아이템의 rowId 값

Return : (Object or Array) 수정 전의 행 아이템(들), 만약 해당 행이 수정되지 않았다면 null 반환

// rowId 가 "#Cust0" 인 행의 원본 행 아이템 반환
 if(AUIGrid.isEditedById(myGridID, "#Cust0")) { // 먼저 수정되었는지 체크
     const orgItem = AUIGrid.getInitValueItem(myGridID, "#Cust0");
 }
 // rowId 가 "#Cust0", "#Cust1"인 행들의 원본 행 아이템들 반환 - 복수 사용 예
 const orgItems = AUIGrid.getInitValueItem(myGridID, ["#Cust0", "#Cust1"]);

행의 고유 값(rowIdField 값)에 해당하는 행 아이템을 반환합니다.

파라메터 설명

• rowId (String) : 행 고유 값(rowIdField 값)

Return : (Object) 행아이템 객체

관련 데모 보기

지정한 행 인덱스에 해당하는 행 아이템을 반환합니다.

파라메터 설명

• rowIndex (Number) : 행인덱스

Return : (Object) 행아이템 객체

관련 데모 보기

지정한 값에 해당하는 행 아이템을 찾아 반환합니다.

파라메터 설명

• dataField : (String) 행 아이템에서 얻고자하는 필드명
• value : (String) 행 아이템에서 얻고자 하는 필드의 값(value)

예를 들어 이름(name) 이 "Anna" 라는 사람의 행 아이템을 얻고자 한다면 다음과 같습니다.

const rowItems = AUIGrid.getItemsByValue(myGridID, "name", "Anna");

Return : (Array) 조건에 맞는 행 아이템 묶음

참고 : 복수의 값 즉, 이름이 "Anna", "Emma" 등의 복수 값에 대한 행 아이템을 얻고자 한다면 getRowsByValue 메소드를 사용하십시오.

관련 데모 보기

가로로 병합된 셀의 마지막 칼럼 인덱스를 반환합니다.

파라메터 설명

• rowIndex : (Number) 가로 병합된 셀의 행 인덱스
• columnIndex : (Number) 가로 병합된 셀의 열 인덱스

Return : (Number) 셀이 가로 병합된 셀인 경우 병합 마지막 인덱스 반환

주어진 셀이 가로 병합된 셀이 아닌 경우 -1을 반환합니다.

// (10, 0) 셀이 가로 병합된 셀인 경우 병합 마지막 칼럼 인덱스 반환
 const startRowIndex = AUIGrid.getMergeEndColumnIndex(myGridID, 10, 0);

세로로 병합된 셀의 마지막 행 인덱스를 반환합니다.

파라메터 설명

• rowIndex : (Number) 세로 병합된 셀의 행 인덱스
• columnIndex : (Number) 세로 병합된 셀의 열 인덱스

Return : (Number) 셀이 세로 병합된 셀인 경우 병합 마지막 행 인덱스 반환

주어진 셀이 세로 병합된 셀이 아닌 경우 -1을 반환합니다.

// (10, 0) 셀이 세로 병합된 셀인 경우 병합 마지막 행 인덱스 반환
 const startRowIndex = AUIGrid.getMergeEndRowIndex(myGridID, 10, 0);

관련 데모 보기

지정한 셀이 세로로 병합되어 있으면, 그 병합에 포함된 행 아이템을 모두 반환합니다.

파라메터 설명

• rowIndex : (Number) 셀의 행 인덱스
• columnIndex : (Number) 셀의 열 인덱스

Return : (Array) 해당 셀로 세로 병합된 모든 행 아이템들

가로로 병합된 셀의 시작 칼럼 인덱스를 반환합니다.

파라메터 설명

• rowIndex : (Number) 가로 병합된 셀의 행 인덱스
• columnIndex : (Number) 가로 병합된 셀의 열 인덱스

Return : (Number) 셀이 가로 병합된 셀인 경우 병합 시작 인덱스 반환

주어진 셀이 가로 병합된 셀이 아닌 경우 -1을 반환합니다.

// (10, 0) 셀이 가로 병합된 셀인 경우 병합 시작 칼럼 인덱스 반환
  const startRowIndex = AUIGrid.getMergeStartColumnIndex(myGridID, 10, 0);

세로로 병합된 셀의 시작 행 인덱스를 반환합니다.

파라메터 설명

• rowIndex : (Number) 세로 병합된 셀의 행 인덱스
• columnIndex : (Number) 세로 병합된 셀의 열 인덱스

Return : (Number) 셀이 세로 병합된 셀인 경우 병합 시작 인덱스 반환

주어진 셀이 세로 병합된 셀이 아닌 경우 -1을 반환합니다.

// (10, 0) 셀이 세로 병합된 셀인 경우 병합 시작 행 인덱스 반환
 const startRowIndex = AUIGrid.getMergeStartRowIndex(myGridID, 10, 0);

[deprecated Ver 3.0.4] 수정되기 전의 셀 값을 반환합니다.

Also See : getInitCellValue

필터링, 정렬로 바뀐 표시 목록이 아닌 전체 원본 데이터 목록을 반환합니다.

이 메소드는 필터링, 정렬 등으로 현재 그리드에 보여지는 데이터가 아닌 전체 데이터를 반환합니다.

현재 보여지는 데이터를 얻고자 한다면 getGridData 메소드를 사용하십시오.

Return : (Array) 현재 그리드 행 아이템들

관련 데모 보기

[deprecated Ver 3.0.4] 수정되기 전 원래의 값을 갖는 행 아이템을 반환합니다.

Also See : getInitValueItem

관련 데모 보기

그룹 헤더에서 지정한 칼럼의 부모 그룹 칼럼을 반환합니다.

파라메터 설명

• dataField (String) : 칼럼의 데이터 필드명

Return : (Object) 그룹 칼럼 아이템

// name 헤더의 부모에 해당되는 그룹 칼럼 얻기
 const groupColumn = AUIGrid.getParentColumnByDataField(myGridID, "name");

트리 그리드에서 지정한 행의 부모 행 아이템을 반환합니다. 대상 행은 rowIdField의 고유 값으로 지정합니다.

부모 아이템이 없는 루트(root)에 해당되는 행인 경우 null 을 반환합니다.

파라메터 설명

• rowId (String) : 행 고유 값(rowIdField 값)

Return : (Object) 부모 행 아이템

관련 데모 보기

플러그인 공통 런타임의 외부 접근은 현재 비활성화되어 있습니다.

getPluginRuntime(apiVersion)은 인수와 관계없이 code가 AUI_GRID_PLUGIN_RUNTIME_DISABLED인 Error를 발생시키며 공통 생성자와 함수를 반환하지 않습니다. 그리드 설정이나 전역 변수로 활성화할 수 없습니다.

Pivot 및 Gantt 플러그인의 제공 일정은 미정입니다. 일반 AUIGrid 및 사용자 정의 렌더러는 기존 방식으로 사용합니다. 메소드 이름과 연결 계약의 선언은 제공 재개를 위해 보존합니다.

플러그인 공통 런타임 상태 안내

지정한 그리드 속성의 값을 반환합니다.

파라메터 설명

• name (String) : 속성명

Return : (Object) 속성값

Also See : setProp

화면 적용 전이라도 setProp()으로 지정한 값을 반환합니다. 화면에 적용하려면 refresh()를 호출하십시오.

관련 데모 보기

삭제된 칼럼의 dataField를 배열로 반환합니다.

삭제된 열이란 최초 칼럼 레이아웃 작성 시 정의한 칼럼을 삭제 한 것을 말합니다.

즉, 사용자가 임의로 추가한 후 삭제하였다면 삭제된 열에 포함되지 않습니다.

Return : (Array) 삭제된 열의 dataField 들

관련 데모 보기

삭제된 행 아이템을 배열로 반환합니다.

기본적으로, 삭제된 아이템은 최초의 데이터에서 addRow 메소드로 추가된 아이템을 삭제한 경우 포함되지 않습니다.

즉, 최초 그리드에 삽입된 데이터를 삭제한 행 아이템만 반환합니다.

만약, 추가된 행을 삭제 했을 때 그 추가된 행까지 얻고자 한다면 includeAdded 파라메터를 true 로 설정하십시오.

파라메터 설명

• includeAdded (Boolean) : 최초의 데이터에서 사용자에 의해 추가된 행을 다시 사용자가 삭제한 경우, 해당 아이템까지 반환 여부

Return : (Array) 삭제된 행 아이템들

관련 데모 보기

그리드 생성 후 추가했다가 다시 삭제한 행 아이템을 배열로 반환합니다.

즉, 최초 그리드에 삽입된 데이터가 아닌 addRow 메소드나 Insert 키와 같은 방식으로 최초 이후 추가된 행이 삭제된 경우 그 행 아이템들만 반환합니다.

Return : (Array) 추가된 후 삭제된 행 아이템들

현재 그리드에서 출력하는 행의 전체 개수를 반환합니다.

만약 트리 그리드로 출력하고 있다면 접혀진 브랜치(branch) 행 그대로 개수를 반환합니다. 예를 들어 브랜치 행이 모두 닫혀져 3개만 보이고 있을 때 3이 반환됩니다.

Return : (Number) 전체 행 수

관련 데모 보기

지정한 칼럼에서 값이 일치하는 행을 모두 찾아 행 인덱스를 반환합니다.

파라메터 설명

• dataField : (String) 찾고자 하는 칼럼의 dataField 명
• values : (String or Array) dataField 에서 찾고자 하는 값( 복수의 값인 경우 Array )

예를 들어 "이름이 Anna, Lawrence 인 사람의 행 인덱스 모두 반환" 하고자 한다면 다음과 같습니다.

const rows = AUIGrid.getRowIndexesByValue(myGridID, "name", ["Anna", "Lawrence"]);

Return : (Array) 해당 dataField 에서 주어진 값(values) 와 일치하는 모든 행 아이템들의 rowIndex

참고 : 행 아이템을 얻고자 한다면 getRowsByValue 메소드 참고

세로 스크롤이 있는 경우, 현재 화면의 최상단에 표시되는 행의 인덱스를 반환합니다.

수직 스크롤이 생성되지 않은 경우 이 값은 0 을 반환합니다.

Return : (Number) 최상단 행 인덱스

관련 데모 보기

지정한 칼럼에서 값이 일치하는 행을 모두 찾아 반환합니다.

파라메터 설명

• dataField : (String) 찾고자 하는 칼럼의 dataField 명
• values : (String or Array) dataField 에서 찾고자 하는 값( 복수의 값인 경우 Array )

예를 들어 "이름이 Anna, Lawrence 인 사람의 행 아이템 모두 반환" 하고자 한다면 다음과 같습니다.

const rows = AUIGrid.getRowsByValue(myGridID, "name", ["Anna", "Lawrence"]);

Return : (Array) 해당 dataField 에서 주어진 값(values) 와 일치하는 모든 행 아이템들

참고 : 행인덱스을 얻고자 한다면 getRowIndexesByValue 메소드 참고

관련 데모 보기

그리드에 설정된 scaleFactor 값을 반환합니다.

See Also : scaleFactor

Return : (Number) scale 값

블록으로 선택된 셀 범위의 시작, 종료 칼럼 인덱스를 반환합니다.

Return : (Array) 선택한 셀(들)의 시작 칼럼 인덱스, 종료 칼럼 인덱스 배열

// 선택된 셀의 시작, 종료 칼럼 인덱스 얻기
 const colIndexes = AUIGrid.getSelectedColIndexes(myGridID);

참고 : getSelectedRowIndexes 메소드를 이용하면 선택 블럭의 행, 열 인덱스를 알 수 있습니다.

See Also : getSelectedRowIndexes

활성 셀의 행 인덱스와 칼럼 인덱스를 배열로 반환합니다.

반환 형식은 [rowIndex, columnIndex]이며 선택이 없으면 [-1, -1]입니다. 다중 선택에서는 선택을 시작한 셀을 반환합니다.

밴드형 상위 셀의 columnIndex는 첫 하위 칼럼의 인덱스입니다. 상위 셀의 필드와 값은 getSelectedItems()의 isPrimeCell:true인 항목으로 확인하십시오.

const index = AUIGrid.getSelectedIndex(myGridID);
console.log(index[0], index[1]); // 활성 셀의 행, 칼럼 인덱스

관련 데모 보기

선택한 셀 또는 행의 정보를 배열로 반환합니다.

파라메터 설명

• performanceMode : (Boolean) 빠른 조회 모드 사용 여부. 기본값 false

true이면 행 데이터를 복사하지 않고 결과를 정렬하지 않습니다. 반환된 item을 직접 수정하면 원본 데이터가 바뀌므로 수정하지 마십시오.

반환 배열의 각 항목은 다음 정보를 갖습니다.

• rowIndex : 행의 인덱스
• columnIndex : 하위 칼럼의 인덱스. 밴드형 상위 셀은 첫 하위 leaf의 인덱스
• depth : 헤더 기준 칼럼 계층 깊이. 최상위는 1
• dataField : 선택 칼럼이 출력하고 있는 그리드 데이터의 필드명
• headerText : 선택 칼럼의 헤더 텍스트
• rowIdValue : rowIdField로 지정한 행 고유 값
• editable : 선택 칼럼의 수정 가능 여부
• value : 선택 셀의 현재 그리드 값
• item : 선택 행 아이템들을 갖는 Object
• bodyCellKind : "branch" 또는 "leaf"
• isPrimeCell : 선택을 시작한 활성 셀이면 true

// 활성 셀의 필드와 값을 확인합니다.
const selected = AUIGrid.getSelectedItems(myGridID);
const active = selected.find(cell => cell.isPrimeCell);
if (active) console.log(active.dataField, active.value);

관련 데모 보기

셀 병합으로 선택 영역이 조정된 경우, 조정 결과에 해당하는 대표 셀의 인덱스를 반환합니다.

rowIndex 는 반환값의 0 번째, columnIndex 는 반환값의 1 번째 요소입니다.

Return : (Array) rowIndex, columnIndex 를 갖는 배열(배열 요소 2개임 0번째는 rowIndex, 1번째는 columnIndex)

참고 : 셀 병합(가로 병합, 세로 병합)이 아닌 경우는 getSelectedIndex() 메소드의 반환 값과 동일합니다.

블록으로 선택된 셀 범위의 시작, 종료 행 인덱스를 반환합니다.

Return : (Array) 선택한 셀(들)의 시작 행 인덱스, 종료 행 인덱스 배열

// 선택된 셀의 시작, 종료 행 인덱스 얻기
 const colIndexes = AUIGrid.getSelectedRowIndexes(myGridID);

참고 : getSelectedColIndexes 메소드를 이용하면 선택 블럭의 행, 열 인덱스를 알 수 있습니다.

See Also : getSelectedColIndexes

현재 선택된 행의 데이터 아이템을 반환합니다.

셀 선택 모드라 하더라도 해당 셀의 행 아이템이 반환됩니다.

반환값은 배열로 배열요소는 순수 행 아이템들의 묶음(Array)입니다.

const selectedRows = AUIGrid.getSelectedRows(myGridID);
 console.log(selectedRows);

Return : (Array) 선택된 행 아이템들을 요소로 갖는 배열

Also See : getSelectedItems

선택한 셀 값을 탭(\t)과 줄바꿈(\r\n)으로 구분한 문자열로 반환합니다.

copyDisplayValue와 copyDisplayFunction 설정을 따릅니다. 여러 칸을 차지하는 셀은 왼쪽 위 칸에만 값을 넣습니다.

Return : (String) 선택한 셀의 텍스트

관련 데모 보기

현재 정렬에 사용하는 문자열 비교기(Intl.Collator) 객체를 반환합니다.

Return : (Intl.Collator | null) 문자열 비교기 설정된 경우 Intl.Collator 객체 반환. 설정되지 않은 경우 null 반환

현재 정렬에 사용 중인 필드 정보를 배열로 반환합니다.

Return : (Array) 정렬 필드 정보 배열

band의 상위 칼럼을 정렬한 경우 sortingFields 항목의 columnIndex는 첫 하위 leaf의 인덱스입니다. 정렬할 칼럼은 dataField로 식별합니다.

관련 데모 보기

그리드의 추가, 삭제, 수정 상태 정보를 반환합니다.

반환된 정보는 syncGridData 메소드에서 사용할 수 있습니다.

Return : (Object) 추가, 삭제, 변경된 상태 정보 캐시

Also See : syncGridData

현재 그리드의 값을 포매팅이 적용된 문자열 데이터로 반환합니다.

Return : (Array) 현재 그리드 텍스트 데이터

필터링된 트리 데이터를 자손 행까지 포함한 1차원 배열로 반환합니다.

부모 행(들)의 펼쳐진 상태와 무관하게 현재 데이터의 필터링 규칙에 맞는 자손행들까지 모두 반환합니다.

Return : (Array) 필터링된 상태의 행 아이템들

Also See : getTreeGridData | getTreeFlatData

트리 데이터를 자손 행까지 포함한 1차원 배열로 반환합니다.

그리드의 현재 상태가 정렬 또는 필터링 된 상태와 무관하게 전체 데이터를 1차원 배열 형태로 반환합니다.

Return : (Array) 전체 행 아이템들

Also See : getTreeGridData | getTreeFilteredFlatData

트리 그리드의 데이터를 계층 구조로 반환합니다.

Return : (Array) 계층적 구조 행 아이템들

Also See : getTreeFlatData

트리 데이터 또는 그룹핑으로 만든 계층 데이터의 전체 깊이(depth)를 반환합니다.

Return : (Number) 전체 depth

dataField로 지정한 칼럼을 숨깁니다.

복수의 칼럼을 보이지 않도록 지정하고자 한다면 배열로 설정하십시오. (예: ["name", "country", "product"] )

파라메터 설명

• dataField (String or Array) : 칼럼의 데이터 필드명(들)

Also See : showColumnByDataField

관련 데모 보기

그룹 헤더에서 지정한 그룹에 속한 모든 자손 칼럼을 숨깁니다.

파라메터 설명

• dataField (String) : 칼럼의 데이터 필드명

Also See : showColumnGroup

관련 데모 보기

지정한 엑스트라 칼럼을 숨깁니다. 대상은 행 드래그 손잡이(showDragKnobColumn), 행 번호(showRowNumColumn), 행 상태(showStateColumn), 행 체크박스(showRowCheckColumn)입니다.

파라메터 설명

• propName (String) : 보이지 않게 변경 할 엑스트라 칼럼 속성명

// 엑스트라 칼럼인 행 드래그&드랍 손잡이(showDragKnobColumn)를 보이지 않게 합니다.
 AUIGrid.hideExtraColumn(myGridID, "showDragKnobColumn");
 // 엑스트라 칼럼인 행 번호 칼럼(showRowNumColumn)를 보이지 않게 합니다.
 AUIGrid.hideExtraColumn(myGridID, "showRowNumColumn");

See Also : changeExtraColumnOrders | changeExtraColumnWidth | showExtraColumn

관련 데모 보기

표시 중인 그리드의 푸터를 숨깁니다. 다시 표시하려면 showFooterLater()를 확인하십시오.

Also See : showFooterLater

편집 가능한 그리드에서 선택한 행을 들여써 상단 행의 자식으로 배치합니다.

그리드의 현재 상태가 정렬 또는 필터링 된 상태 그리고 그룹핑 된 상태에서는 사용 할 수 없습니다.

관련 데모 보기

지정한 행 인덱스(rowIndex)를 행의 고유 값(rowIdField 값)으로 변환하여 반환합니다.

파라메터 설명

• rowIndex : (Number) 행 인덱스

Return : rowId : (String) 행 고유 값(rowIdField 값)

Also See : rowIdToIndex

관련 데모 보기

행의 고유 값(rowIdField 값)으로 지정한 행이 추가된 행인지 확인합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)

Return : (Boolean) 추가된 행인 경우 true 반환.

행 인덱스(rowIndex)로 지정한 행이 추가된 행인지 확인합니다.

파라메터 설명

• rowIndex : (Number) 행 인덱스

Return : (Boolean) 추가된 행인 경우 true 반환.

관련 데모 보기

현재 브라우저에서 그리드의 기능인 PDF 내보내기(Export) 사용 가능 여부를 반환합니다.

완전히 HTML5 를 지원하는 브라우저에서 true를 반환합니다. 즉, 완전히 HTML5 를 지원하는 브라우저에서 PDF 내보내기 사용 가능합니다.

Return : (Boolean) PDF 내보내기 가능 여부

관련 데모 보기

엑셀(xlsx), CSV, TXT 등으로 내보내기 할 때 로컬(Local) 자원만을 갖고 다운로딩 처리 가능한지 여부를 반환합니다.

완전히 HTML5 를 지원하는 브라우저에서 true를 반환합니다. 즉, 완전히 HTML5 를 지원하는 브라우저에서 서버사이드 거치지 않고 바로 내보내기 가능합니다.

Return : (Boolean) 로컬 다운로드 가능 여부

관련 데모 보기

행 체크박스를 사용하는 경우, 행의 고유 값(rowIdField 값)으로 지정한 행의 체크 여부를 확인합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)

Return : (Boolean) 현재 체크 박스에 체크된 행인지 여부

관련 데모 보기

지정한 그리드가 생성되어 있는지 확인합니다.

const isCreated = AUIGrid.isCreated("#myGrid1");

예를 들어 위와 같이 작성한다면 myGrid1 을 id 로 갖는 Div 에 그리드가 생성되었는지 여부를 반환합니다.

Return : (Boolean) 생성되었는지 여부

관련 데모 보기

행의 고유 값(rowIdField 값)으로 지정한 행이 수정된 행인지 확인합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)

Return : (Boolean) 수정된 행인 경우 true 반환.

행 인덱스(rowIndex)로 지정한 행이 수정된 행인지 확인합니다.

파라메터 설명

• rowIndex : (Number) 행 인덱스

Return : (Boolean) 수정된 행인 경우 true 반환.

행의 고유 값(rowIdField 값)과 dataField로 지정한 셀이 수정되었는지 확인합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)
• dataField : (String) 열의 dataField

Return : (Boolean) 수정된 셀인 경우 true 반환.

// "#Cust1" 이 행의 ID 이고, 데이터 필드명이 "name" 인 열인 셀이 현재 수정되었는지 여부 반환
 const isEdited = AUIGrid.isEditedCell(myGridID, "#Cust1", "name");
 console.log(isEdited);

행과 칼럼 인덱스로 지정한 셀이 수정되었는지 확인합니다.

파라메터 설명

• rowIndex : (Number) 셀의 행 인덱스
• columnIndex : (Number) 셀의 열 인덱스

Return : (Boolean) 수정된 셀인 경우 true 반환.

현재 그리드 데이터에 필터링이 적용되어 있는지 확인합니다.

Return : (Boolean) 필터링 여부 반환

관련 데모 보기

행 ID에 해당하는 트리 행이 자식 행을 가진 브랜치인지 반환합니다.

파라메터 설명

• rowId : (String) rowIdField로 지정한 행의 고유 값

Return : (Boolean or null or undefined) 반환값은 다음과 같습니다.

• true : 브랜치 행
• false : 말단 행, 생략하거나 null인 행 ID, 유효하지 않은 그리드
• null : 트리에서 해당 행을 찾지 못한 경우
• undefined : 일반 그리드

행 ID에 해당하는 트리 행의 펼침 상태를 반환합니다.

파라메터 설명

• rowId : (String) rowIdField로 지정한 행의 고유 값

Return : (Boolean or null or undefined) 반환값은 다음과 같습니다.

• true : 펼쳐진 브랜치
• false : 접힌 브랜치, 생략하거나 null인 행 ID, 유효하지 않은 그리드
• null : 트리에서 해당 행을 찾지 못한 경우
• undefined : 일반 그리드 또는 펼침 상태가 없는 말단 행

관련 데모 보기

행 고유 값(rowIdField 값)에 해당하는 행의 표시 상태를 반환합니다. 일반 그리드와 트리 그리드는 표시 상태를 판단하는 기준이 다릅니다.

• 일반 그리드 : 현재 표시 영역에 있는 행이면 true, 영역 밖의 행이면 false를 반환합니다. 고정 행은 스크롤 후에도 표시 대상으로 취급합니다.
• 트리 그리드 : 트리의 펼침, 접힘에 따른 행 표시 상태를 반환합니다. 펼쳐진 자식 행은 스크롤로 화면 밖에 있어도 true이며, 상위 행을 접어 숨겨진 자식 행은 false입니다. 트리 행이 현재 화면 안에 보이는지 판단하는 용도로는 사용하지 마십시오.

해당 rowId의 행을 데이터에서 찾지 못하면 null을 반환합니다. 일반 그리드에서 필터로 제외된 행은 데이터에 존재하므로 false를 반환합니다.

참고 : rowId를 생략하거나 null로 전달한 경우, 또는 pid가 생성된 그리드를 가리키지 않는 경우에는 false를 반환합니다.

파라메터 설명

• rowId (String) : 행 고유 값(rowIdField 값)

Return : (Boolean or null) 그리드 유형에 따른 행 표시 상태. 데이터에 해당 ID의 행이 없으면 null입니다.

treeLazyMode에서 지정한 행의 자식 데이터를 이미 요청했는지 확인합니다.

파라메터 설명

• rowIndex : (Number) 행 인덱스

Return : (Boolean) 요청 완료하였다면 true, 아직 요청 전이라면 false 반환/p>

관련 데모 보기

지정한 셀이 병합된 셀인지 확인합니다.

파라메터 설명

• rowIndex : (Number) 셀의 행 인덱스
• columnIndex : (Number) 셀의 열 인덱스

Return : (Boolean) 주어진 셀이 병합된 셀인지 여부 반환

// (10, 0) 셀이 병합된 셀인지 여부 반환
 const isMerged = AUIGrid.isMergedCell(myGridID, 10, 0);

지정한 셀이 가로로 병합되어 있는지 확인합니다.

파라메터 설명

• rowIndex : (Number) 셀의 행 인덱스
• columnIndex : (Number) 셀의 열 인덱스

Return : (Boolean) 주어진 셀이 가로 병합된 셀인지 여부 반환

// (10, 0) 셀이 가로 병합된 셀인지 여부 반환
 const isMerged = AUIGrid.isMergedCellByColumn(myGridID, 10, 0);

지정한 셀이 세로로 병합되어 있는지 확인합니다.

파라메터 설명

• rowIndex : (Number) 셀의 행 인덱스
• columnIndex : (Number) 셀의 열 인덱스

Return : (Boolean) 주어진 셀이 세로 병합된 셀인지 여부 반환

// (10, 0) 셀이 세로 병합된 셀인지 여부 반환
 const isMerged = AUIGrid.isMergedCellByRow(myGridID, 10, 0);

필터 메뉴가 현재 열려 있는지 확인합니다.

Return : (Boolean) 현재 열려 있는지 여부 반환

Also See : openFilterLayer, closeFilterLayer

관련 데모 보기

행의 고유 값(rowIdField 값)으로 지정한 행이 삭제된 행인지 확인합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)

Return : (Boolean) 삭제된 행인 경우 true 반환.

행 인덱스(rowIndex)로 지정한 행이 삭제된 행인지 확인합니다.

파라메터 설명

• rowIndex : (Number) 행 인덱스

Return : (Boolean) 삭제된 행인 경우 true 반환.

셀 선택모드(selectionMode)를 "multipleCells", "multipleRows" 로 설정한 경우 현재 선택이 역방향으로 선택되었는지 여부를 반환합니다.

예로 사용자가 현재 5행부터 시작하여 1행까지를 선택한 경우 역방향으로 선택되어 true를 반환합니다.

Return : (Boolean) 셀 선택을 행 기준 역방향으로 선택한 경우 true 반환, 그 외에는 false 반환

현재 그리드 데이터에 정렬이 적용되어 있는지 확인합니다.

Return : (Boolean) 정렬 여부 반환

현재 그리드가 트리 형태로 데이터를 표시하는지 확인합니다.

트리 그리드는 사용자가 계층형 데이터를 삽입한 경우 또는 그룹핑을 실행한 경우 트리 그리드입니다.

Return : (Boolean) 현재 그리드의 상태가 트리 그리드인지 여부

지정한 값이 해당 칼럼의 전체 데이터에서 고유한 값인지 확인합니다.

여기서 고유 값의 의미는 현재 그리드의 값으로 존재하지 않아 고유한지를 의미합니다.

파라메터 설명

• dataField : (String) 고유 값인지 보고자 하는 데이터의 데이터필드명
• value : (Object) 고유 값인지 알고자 하는 값(value)

Return : (Boolean) 검사하는 값이 고유 값이면 true, 중복된 값이 있다면 false 반환.

예로 다음처럼 사용할 때

AUIGrid.isUniqueValue(myGridID, "name", "ABC");

"name" 이라는 칼럼에 "ABC" 값이 유니크한지를 검사합니다. 즉, "name" 이라는 칼럼에 현재 "ABC" 값이 없는지를 검사합니다.

검사하려는 값 "ABC"가 존재 하지 않을 때 유니크하게 됩니다.

따라서 해당 값이 현재 그리드의 "name" 칼럼에 존재하지 하지 않으면 true, 1개 이상 존재하면 false 반환합니다.

관련 데모 보기

페이징(usePaging=true)을 사용하는 그리드에서 지정한 페이지로 이동합니다.

파라메터 설명

• pageNum (Number) : 이동하고자 하는 페이지 번호
• keepVScrollPos (Boolean) : 이동할 때 수직 스크롤의 위치 유지 여부(기본값:false)
• keepHScrollPos (Boolean) : 이동할 때 수평 스크롤의 위치 유지 여부(기본값:false)

관련 데모 보기

선택한 행을 한 단계 아래로 이동합니다.

행 이동은 일반 그리드 뿐만 아니라 트리 그리드(계층형 데이터)에서도 적용이 가능합니다.

브랜치(Branch) 를 이동시키는 경우 아래 자손들도 함께 따라 움직입니다. 트리 그리드에서 리프(Leaf)의 이동은 자신의 부모를 벗어 날 수 없습니다.

그리드의 현재 상태가 정렬 또는 필터링 된 상태 그리고 그룹핑 된 상태에서는 사용 할 수 없습니다.

Also See : moveRowsToUp

관련 데모 보기

선택한 행을 한 단계 위로 이동합니다.

행 이동은 일반 그리드 뿐만 아니라 트리 그리드(계층형 데이터)에서도 적용이 가능합니다.

브랜치(Branch) 를 이동시키는 경우 아래 자손들도 함께 따라 움직입니다. 트리 그리드에서 리프(Leaf)의 이동은 자신의 부모를 벗어 날 수 없습니다.

그리드의 현재 상태가 정렬 또는 필터링 된 상태 그리고 그룹핑 된 상태에서는 사용 할 수 없습니다.

Also See : moveRowsToDown

관련 데모 보기

지정한 한 개의 행을 원하는 행 인덱스(rowIndex)로 이동합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)
• toRowIndex : (Object) 이동시킬 곳의 행 인덱스

다음은 사용 예를 나타냅니다.

// rowId 가 #Cust0 인 행을 0번 인덱스로 이동 시키기
 AUIGrid.moveRowToIndex(myGridID, "#Cust0", 3); 

참고 : 트리 그리드(계층형 데이터)인 경우 해당 메소드는 무시됩니다.

현재 선택된 셀의 편집기를 열고 달력이나 콤보박스 등의 추가 목록도 펼칩니다.

즉, 처음 진입 시 오픈 시킬 수 있는 모든 요소가 사용자에게 펼쳐진 채 셀 수정 진입 상태로 만듭니다.

Also See : openInputer

dataField에 해당하는 칼럼의 필터 메뉴를 엽니다.

만약, 동일한 칼럼의 필터 레이어(필터 메뉴)가 이미 열려진 경우, 이 메소드는 닫는 역할(즉, 토글 역할)을 하게 됩니다.

파라메터 설명

• dataField (String) : 칼럼의 dataField 명

// 이름 칼럼의 필터 레이어(필터 메뉴)를 오픈합니다.
 AUIGrid.openFilterLayer(myGridID, "name");

Also See : closeFilterLayer, isOpenFilterLayer

관련 데모 보기

현재 선택된 셀의 편집기를 엽니다.

예로 달력, 콤보박스 등과 같은 에디트렌더러(editRenderer)를 사용하는 경우 해당 메소드는 달력이나 하단 리스트를 오픈시키지 않습니다. 사용자가 F2, 마우스 (더블) 클릭과 같이 최초 진입 상태로 만듭니다.

만약 달력이나 하단 리스트까지 오픈 시키려면 openEditDownListLayer 메소드를 사용하십시오.

Also See : openEditDownListLayer

관련 데모 보기

편집 가능한 그리드에서 선택한 행을 내어써 계층 관계를 변경합니다.

내어 쓰기 된 행은 부모 행(branch) 이 될 수가 있습니다.

그리드의 현재 상태가 정렬 또는 필터링 된 상태 그리고 그룹핑 된 상태에서는 사용 할 수 없습니다.

관련 데모 보기

데이터 목록의 앞쪽에 데이터를 추가합니다.

파라메터 설명

• additionalData (Array) : 추가시키고자 하는 데이터

Also See : appendData

편집 가능한 그리드에서 실행 취소한 작업을 다시 실행합니다. enableUndoRedo=true인 경우 사용합니다.

Also See : undo

관련 데모 보기

다시 실행(Redo)할 수 있는 작업이 있는지 확인합니다.

Return : (Boolean) 다시 실행 가능 여부

Also See : undo, redo, undoable

관련 데모 보기

변경한 그리드 설정을 화면에 다시 적용합니다.

셀 내용만 갱신하려면 update()를 사용하십시오.

// 행 높이를 변경하고 화면에 적용합니다.
AUIGrid.setProp(myGridID, "rowHeight", 40);
AUIGrid.refresh(myGridID);

Also See : setProp

관련 데모 보기

표시 중인 그리드에서 지정한 행의 데이터를 갱신합니다.

예를 들어 변경된 데이터를 DB Select 할 수 있다면, 이 메소드를 통해 특정 행만 갱신할 수 있습니다.

기존에 출력된 데이터와 형식이 같아야만 유효합니다.

예를 들어 rowIdField 를 id 로 설정한 경우, id 가 20, 21, 30 인 행을 찾아 특정 셀만 업데이트 하고자 한다면 다음과 같습니다.

const items = [{ id : 20, price : 2000, name : "A" },
               { id : 21, price : 1000, name : "B" },
               { id : 30, price : 4000, name : "C" }];
 AUIGrid.refreshRows(myGridID, items, "my-flash-style", 200); 

파라메터 설명

• items (Array or Object) : 복수 또는 1개의 행을 갱신 합니다.
• flashStyle (String) : 갱신 시 갱신된 셀이 깜빡이도록 표시해 주는 CSS 클래스명(스타일)을 지정합니다.
• flashTime (Number) : flashStyle 이 출력되는 시간을 밀리세컨드 단위로 지정합니다. 예를 들어 이 값이 300 이라면 0.3 초 후 flashStyle 이 사라집니다.

기존 데이터 양이 수만행 이상이라면 전체 데이터 갱신(setGridData) 하는게 성능면에서 유리합니다.

참고 : refreshRows 메소드는 updateRowsById 메소드와 같은 기능을 합니다.(셀 수정 마커 표시 항상 false, 변경 셀에 깜빡이는 스타일 지정 가능이 다름)

Also See : updateRowsById

관련 데모 보기

그리드에 표시한 로딩 표시를 제거합니다.

관련 데모 보기

엑스트라 행 체크박스에서 체크한 행을 삭제 처리합니다.

관련 데모 보기

지정한 칼럼을 그리드에서 삭제합니다. 칼럼을 잠시 숨기는 hideColumnByDataField()와 구분하여 사용하십시오.

파라메터 설명

• columnIndex (Number, Array or String) : 삭제할 칼럼의 인덱스 또는 인덱스 배열입니다. 배열로 전달하면 여러 칼럼을 삭제합니다. columnIndex 대신 "selectedIndex" 문자열을 설정한 경우 현재 선택된 열이 삭제됩니다.

예1 : AUIGrid.removeColumn(myGridID, 5); // columnIndex 5 삭제
 예2 : AUIGrid.removeColumn(myGridID, "selectedIndex"); // 현재 선택된 열(들) 삭제
 예3 : AUIGrid.removeColumn(myGridID, [0,1,2]); // columnIndex 0, 1, 2 삭제(즉, 3개의 열 삭제)

관련 데모 보기

그리드에 표시한 안내 메시지를 제거합니다.

Also See : showInfoMessage

관련 데모 보기

지정한 행을 그리드에서 삭제 처리합니다.

파라메터 설명

• rowIndex (Number or String) : 삭제하고자 하는 행의 인덱스, rowIndex 대신 "selectedIndex" 문자열을 설정한 경우 현재 선택된 행이 삭제됩니다.

예1 : AUIGrid.removeRow(myGridID, 5); // rowIndex 5 삭제
 예2 : AUIGrid.removeRow(myGridID, "selectedIndex"); // 현재 선택된 행(들) 삭제
 예3 : AUIGrid.removeRow(myGridID, [0,1,2]); // rowIndex 0, 1, 2 삭제(즉, 3개의 행 삭제)

Also See : removeRowByRowId

관련 데모 보기

행의 고유 값(rowIdField 값)으로 지정한 행을 삭제 처리합니다.

파라메터 설명

• rowId (Array or String) : 삭제하고자 하는 행 고유 값(rowIdField 값). 만약 복수를 삭제하고자 할 때 rowId 값을 배열로 묶으십시오.

Also See : removeRow

관련 데모 보기

소프트 삭제(softRemoveRowMode=true)로 삭제 표시만 남아 있는 행을 그리드에서 완전히 제거합니다.

파라메터 설명

• rowIds (String or Array) : 삭제할 행의 rowId 값(들) (단수 또는 복수)

만약 파라메터인 rowIds 를 넣지 않으면 삭제 표시된 행 전체를 그리드에서 제거합니다.

참고 : 삭제 정보를 초기화 하는 메소드는 resetUpdatedItems 메소드입니다.

관련 데모 보기

특정 셀에 표시한 메시지를 제거합니다.

Also See : showToastMessage

관련 데모 보기

treeLazyMode에서 이미 자식 데이터를 요청한 행의 요청 상태를 초기화합니다.

기존 요청한 하위(자식) 데이터를 초기화(제거)하고 다시 요청할 수 있는 닫혀진 상태로 만듭니다.

따라서 다시 요청 아이콘 클릭하면 treeLazyRequest 이벤트가 발생합니다.

관련 데모 보기

칼럼의 추가, 삭제 내역으로 보관된 dataField 기록을 초기화합니다.

파라메터 설명

• option (String) : 추가, 삭제된 해당 캐시를 초기화 할 옵션을 지정합니다. 유효 값은 "c", "d", "a" 입니다.

  "c" : 추가된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "d" : 삭제된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "a" : 추가, 삭제 모두 흔적을 제거하고 초기화 시킵니다. (기본값)

특정 행의 추가, 수정, 삭제 상태 기록을 초기화합니다.

그러나 그리드 속성 softRemoveRowMode 를 false 설정한 경우 삭제 상태는 초기화 할 수 없습니다.

파라메터 설명

• rowId (String) : 상태를 초기화 할 행의 rowId 값
• option (String) : 추가, 수정, 삭제된 해당 데이터 캐시를 초기화 할 옵션을 지정합니다. 유효 값은 "c", "u"("e"), "d", "a" 입니다.

  "c" : 추가된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "u"(or "e") : 수정된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "d" : 삭제된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "a" : 추가, 수정, 삭제 모두 흔적을 제거하고 초기화 시킵니다. (기본값)

참고 : resetUpdatedItems 메소드는 전체 행을 대상으로 상태를 초기화합니다.

관련 데모 보기

그리드 데이터의 추가, 수정, 삭제 상태 기록을 초기화합니다.

대상은 전체 데이터를 대상으로 합니다.

예를 들어 그리드에 추가, 수정, 삭제된 데이터를 DB에 모두 저장 했을 때 유용할 수 있습니다.

파라메터 설명

• option (String) : 추가, 수정, 삭제된 해당 데이터 캐시를 초기화 할 옵션을 지정합니다. 유효 값은 "c", "u"("e"), "d", "a" 입니다.

  "c" : 추가된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "u"(or "e") : 수정된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "d" : 삭제된 데이터만 흔적을 제거하고 초기화 시킵니다.

  "a" : 추가, 수정, 삭제 모두 흔적을 제거하고 초기화 시킵니다. (기본값)

참고 : resetUpdatedItemById 메소드는 지정한 단일 행을 대상으로 상태를 초기화합니다.

관련 데모 보기

그리드의 너비와 높이를 변경합니다.

파라메터 설명

• width (Number) : 변경시키고자 하는 가로 사이즈
• height (Number) : 변경시키고자 하는 세로 사이즈

만약 파라메터 없이 resize 메소드 호출 시 부모 Div의 크기를 다시 계산하여 그에 맞게 사이즈를 변경합니다.

부모(조상) Div 가 보이지 않는 상태(display : none)인 경우 부모 Div 의 크기를 알 수 없습니다. 이런 경우 그리드는 기본 크기로 변경 시킵니다.

따라서 파라메터 없이 resize 메소드 호출 시는 반드시 부모 Div 가 DOM 영역에서 보여졌을 때 호출해야 합니다.

관련 데모 보기

수정된 셀의 값을 최초 입력 당시의 값으로 되돌립니다.

파라메터 설명

• cells (Array or String) : 행인덱스와 dataField 를 각각 0, 1 요소로 갖는 배열, "selectedIndex" 문자열을 설정한 경우 현재 선택된 셀들이 복구됩니다

// 현재 선택된 셀들 전체 수정 취소(복구)
 AUIGrid.restoreEditedCells(myGridID, "selectedIndex");
 // 행인덱스 5 의 dataField="country" 인 셀의 값을 수정 취소(복구)
 AUIGrid.restoreEditedCells(myGridID, [5, "country"] );
 // 복수의 셀 값들 지정 예제
 AUIGrid.restoreEditedCells(myGridID, [[2, "country"], [3, "country"], [3, "product"]] );

관련 데모 보기

수정된 행의 셀 값을 최초 입력 당시의 값으로 되돌립니다.

파라메터 설명

• rowIndex (Number(Array) or String) : 삭제하고자 하는 행의 인덱스, rowIndex 대신 "selectedIndex" 문자열을 설정한 경우 현재 선택된 행이 복구됩니다.

// 현재 선택된 행을 수정 취소(복구)
 AUIGrid.restoreEditedRows(myGridID, "selectedIndex");
 // 행인덱스 5의 행을 수정 취소(복구)
 AUIGrid.restoreEditedRows(myGridID, 5);
 // 행인덱스 5,6,7 의 복수 행을 수정 취소(복구)
 AUIGrid.restoreEditedRows(myGridID, [5, 6, 7]);

관련 데모 보기

소프트 삭제(softRemoveRowMode=true)로 삭제 표시된 행을 복원합니다.

이 메소드로 복원된 행은 더 이상 삭제 아이템이 아니게 되며, 기존 상태로 복구됩니다.

기존 상태의 의미는 이 행이 사용자에 의해 추가되었다면 추가 아이템, 이 행이 삭제 되기 전 변경 되었다면 수정 아이템이 됩니다.

파라메터 설명

• option (Number(Array) or String) : 복구할 대상을 지정할 수 있는 옵션. 유효 값은 "selectedIndex", "all", rowIndex 입니다.
• "selectedIndex" : 현재 선택되어 있는 행을 복구 합니다.(선택된 행이 삭제 표시된(softRemoveRow) 아이템이여야 함)
• "all" : 그리드의 모든 삭제 표시된 행을 복구합니다.
• rowIndex : 지정된 행 인덱스(들)의 삭제 표시된 행(들)을 복구합니다.(Number or Array)

// 현재 선택된 행 소프트 삭제 복구
 AUIGrid.restoreSoftRows(myGridID, "selectedIndex");
 // 그리드 모든 소프트 삭제 행들 복구 
 AUIGrid.restoreSoftRows(myGridID, "all");
 // 행인덱스 5 소프트 삭제 복구 
 AUIGrid.restoreSoftRows(myGridID, 5);
 // 행인덱스 5,6,7 소프트 삭제 복구
 AUIGrid.restoreSoftRows(myGridID, [5, 6, 7]);

관련 데모 보기

행의 고유 값(rowIdField 값)에 해당하는 행 인덱스(rowIndex)를 반환합니다.

파라메터 설명

• rowId : (String) 행 고유 값(rowIdField 값)

Return : rowIndex : (Number) 행 인덱스

Also See : indexToRowId

관련 데모 보기

특정 칼럼에서 문자열을 검색합니다.

최소 1글자 이상의 문자열을 검색합니다.

파라메터 설명

• dataField : (String) 검색하고자 하는 칼럼의 데이터필드명
• term : (String) 검색하고자 하는 문자열
• options : (Object) 검색 옵션

검색 옵션(options) 은 다음과 같은 필드를 갖습니다.

• direction (기본값 : true) : 검색 방향 (true : 다음, false : 이전 검색)
• caseSensitive (기본값 : false) : 대소문자 구분 여부 (true : 대소문자 구별, false : 무시)
• wholeWord (기본값 : false) : 온전한 단어 여부
• wrapSearch (기본값 : true) : 끝에서 되돌리기 여부

// 이름(name) 칼럼에서 "anna" 찾기
 //options 를 지정하지 않으면 기본값이 적용됨(기본값은 direction : true, wrapSearch : true)
 AUIGrid.search(myGridID, "name", "anna");

관련 데모 보기

그리드의 전체 칼럼에서 문자열을 검색합니다.

최소 1글자 이상의 문자열을 검색합니다.

이 메소드는 트리그리드 또는 그룹핑이 설정된 상태에서는 무시됩니다.

파라메터 설명

• term : (String) 검색하고자 하는 문자열
• options : (Object) 검색 옵션

검색 옵션(options) 은 다음과 같은 필드를 갖습니다.

• direction (기본값 : true) : 검색 방향 (true : 다음, false : 이전 검색)
• caseSensitive (기본값 : false) : 대소문자 구분 여부 (true : 대소문자 구별, false : 무시)
• wholeWord (기본값 : false) : 온전한 단어 여부
• wrapSearch (기본값 : true) : 끝에서 되돌리기 여부

// 그리드 전체 칼럼에서 "a" 찾기
 //options 를 지정하지 않으면 기본값이 적용됨(기본값은 direction : true, wrapSearch : true)
 AUIGrid.searchAll(myGridID, "a");

관련 데모 보기

행의 고유 값으로 지정한 행을 선택합니다.

행 아이템을 선택할 때 rowId 로 지정합니다.

파라메터 설명

• rowIds : (Array 또는 String) 선택하고자 하는 행 고유 값(rowIdField 값)들

관련 데모 보기

엑스트라 행 체크박스(showRowCheckColumn=true)의 전체 체크 상태를 설정합니다. true는 전체 체크, false는 전체 체크 해제를 의미합니다.

파라메터 설명

• checked : (Boolean) true 또는 false, true인 경우 전체 선택, false 인 경우 전체 해제

관련 데모 보기

셀 병합 기능을 활성화하거나 비활성화합니다.

파라메터 설명

• flag (Boolean) : true 인 경우 셀 병합 활성화, false 인 경우 비활성화

관련 데모 보기

지정한 셀의 값을 변경합니다.

파라메터 설명

• rowIndex (Number) : 변경하고자 하는 행 인덱스
• dataField or columnIndex(String or Number) : 변경하고자 하는 칼럼의 dataField 또는 칼럼 인덱스
• value (Object) : 변경하고자 하는 값

// 0번째 행의 name 칼럼의 값을 "이름 고침" 으로 변경
 AUIGrid.setCellValue(myGridID, 0, "name", "이름 고침");
 // 3번째 행의 1 번째 칼럼 즉, (3, 1) 의 셀의 값을 "이름 고침" 으로 변경
 AUIGrid.setCellValue(myGridID, 3, 1, "이름 고침");

절대 반복문법(for, while 등) 안에서 이 메소드를 사용하지 마십시오.

다수의 셀 값을 변경하고자 하는 경우 updateRow, updateRows, updateRowsById 메소드를 사용하십시오.

Also See : updateRow, updateRows, updateRowsById, getCellValue

관련 데모 보기

행의 고유 값(rowIdField 값)으로 체크할 행을 지정합니다. 기존 체크 상태를 새로 지정한 행들로 교체할 때 사용합니다.

이 메소드는 기존에 체크된 항목이 제거되고 새로 설정된 값으로만 체크됩니다.

파라메터 설명

• rowIds : (Array) 행 고유 값(rowIdField 값)들을 요소로 갖는 배열

참고 : 기존 체크 항목에 누적해서 체크를 넣고자 한다면 addCheckedRowsByIds 메소드를 사용하십시오.

관련 데모 보기

지정한 dataField의 값과 일치하는 행만 체크합니다. 기존 체크 상태를 새 조건에 맞는 행들로 교체할 때 사용합니다.

이 메소드는 기존에 체크된 항목이 제거되고 새로 설정된 값으로만 체크됩니다.

예를 들어 이름(name) 이 "Anna" 라는 사람만을 체크하고자 한다면 다음과 같습니다.

AUIGrid.setCheckedRowsByValue(myGridID, "name", "Anna");

파라메터 설명

• dataField : (String) 행 아이템에서 체크하고자 하는 필드명
• values : (Array or String) 행 아이템에서 체크하고자 하는 필드의 값(value), 복수의 값을 체크하고자 한다면 배열로 설정(예: ["Anna", "Steve"])

참고 : 기존 체크 항목에 누적해서 체크를 넣고자 한다면 addCheckedRowsByValue 메소드를 사용하십시오.

관련 데모 보기

그룹 칼럼에 속한 자식 칼럼의 표시 순서를 지정합니다. 그룹 내부의 칼럼 배치를 바꿀 때 사용합니다.

파라메터 설명

• dataFields (Array) : 그룹 칼럼의 자식의 순서를 표현하는 dataField 값들

// c1, c2, c3 를 dataField 로 갖는 칼럼이 Group 으로 되어 있는 경우, 순서를 c3, c1, c2 로 출력 시킴.
 AUIGrid.setColumnChildOrder(myGridID, ["c3", "c1", "c2"]);
 // 그룹 칼럼의 자식들 중 c2를 자식들 중 처음으로 위치시킴.
 AUIGrid.setColumnChildOrder(myGridID, ["c2"] );

관련 데모 보기

칼럼의 표시 순서를 지정합니다.

파라메터 설명

• dataFields (Array) : 칼럼의 순서를 표현하는 dataField 값들

// 칼럼의 순서를 차례로 Counry, Name, Price, Date 순으로 출력시킴.
 AUIGrid.setColumnOrder(myGridID, ["country", "name", "price", "date"]);
 // 칼럼의 순서를 Date 를 맨 앞으로 출력하고, 나머지 칼럼은 기존 순서 유지 시킴.
 AUIGrid.setColumnOrder(myGridID, ["date"] );

관련 데모 보기

최초 칼럼 레이아웃의 columnIndex에 해당하는 칼럼 속성을 변경합니다.

파라메터 설명

• columnIndex (Number) : 변경하고자 하는 칼럼 인덱스
• propObj (Object) : 변경하고자 하는 칼럼의 속성명과 값을 갖는 Object

예를 들어 1 번째 칼럼의 헤더 텍스트(headerText) 와 너비(width) 를 변경하고자 한다면 다음과 같습니다.

// 인덱스 1번째 칼럼의 헤더 명과 너비를 각각 "헤더 텍스트 변경", 100 으로 변경
 AUIGrid.setColumnProp( myGridID, 1, { headerText : "헤더 텍스트 변경", width : 100 } );

참고 : setColumnProp 으로 renderer, children 등 DOM 이 변경되는 속성의 설정을 바꿀 수는 없습니다. 이런 경우는 destroy 후 다시 새로운 칼럼 레이아웃으로 create 하십시오.

관련 데모 보기

최초 칼럼 레이아웃의 dataField에 해당하는 칼럼 속성을 변경합니다.

파라메터 설명

• dataField (String) : 변경하고자 하는 칼럼의 데이터필드명
• propObj (Object) : 변경하고자 하는 칼럼의 속성명과 값을 갖는 Object

예를 들어 "name" 칼럼의 헤더 텍스트(headerText) 와 너비(width) 를 변경하고자 한다면 다음과 같습니다.

// "name" 칼럼의 헤더 명과 너비를 각각 "헤더 텍스트 변경", 100 으로 변경
 AUIGrid.setColumnPropByDataField( myGridID, "name", { headerText : "헤더 텍스트 변경", width : 100 } );
 // "myGroupHeader" 를 dataField 로 갖는 그룹 헤더의 헤더 텍스트 변경
 AUIGrid.setColumnPropByDataField( myGridID, "myGroupHeader", { headerText : "그룹 헤더 텍스트 변경" } );

참고 : setColumnPropByDataField 으로 renderer, children 등 DOM 이 변경되는 속성의 설정을 바꿀 수는 없습니다. 이런 경우는 destroy 후 다시 새로운 칼럼 레이아웃으로 create 하십시오.

관련 데모 보기

그리드 칼럼의 너비를 지정합니다.

파라메터 설명

• sizeList : (Array) 변경할 가로 사이즈들

다음은 사용 예를 나타냅니다.

// 그리드의 칼럼 사이즈들을 강제로 지정합니다.
 AUIGrid.setColumnSizeList(myGridID, [100, 100, 100, 100, 100, 100, 100, 100, 100]);
 // 만약 특정 인덱스의 사이즈는 유지하고 싶다면 다음처럼 null 삽입
 AUIGrid.setColumnSizeList(myGridID, [100, 100, null, null, 100, 100, 100, 100]);
 // 0, 1번째 칼럼만 100, 100으로 지정합니다. 나머지 칼럼은 기존 유지
 AUIGrid.setColumnSizeList(myGridID, [100, 100]);

관련 데모 보기

CSV 형식의 데이터를 그리드에 설정합니다.

파라메터 설명

• csvData (String) : 그리드가 표현할 CSV 데이터
• isSimpleMode (Boolean) : 단순 컴마 구분자로 CSV 가 있는지 여부. 만약 컴마 구분자가 데이터의 값으로 존재한다면 이 속성을 false 로 처리하십시오.

Also See : setGridData, setXmlGridData

관련 데모 보기

현재 셀 편집기에 입력된 값을 설정합니다. editable=true인 그리드에서 사용합니다.

이 값 설정은 (더블)클릭 또는 F2 키 등과 같이 편집 진입한 상태인 경우에만 유효합니다.

사용자 정의 편집 렌더러(customEditRenderer) 를 사용했을 때 편집 렌더러의 값에 따라 그리드의 input 값을 이 메소드를 통해 동적으로 변경 가능합니다.

파라메터 설명

• value (Object) : 설정하고자 하는 값

지정한 칼럼에 필터 조건을 설정하고 적용합니다.

enableFilter 속성이 true 설정되어야 가능합니다.

파라메터 설명

• dataField (String) : 칼럼이 출력하고 있는 데이터의 필드명
• filterFunction (Function) : 필터링 비교 함수
  

  // dataField : 칼럼이 출력하고 있는 데이터의 필드명
   // value : 행의 dataField 에 맞는 값.
   // item : 행 전체 아이템
   AUIGrid.setFilter(myGridID, "name",  function(dataField, value, item) {
        return value > 10 ? true : false; // 10 보다 큰 값만 출력 
   });

관련 데모 보기

지정한 칼럼의 값 목록을 기준으로 필터링합니다.

filter.type이 "numeric"인 칼럼에는 사용할 수 없습니다. 숫자 조건은 setFilter()의 비교 함수로 지정하십시오. dataType이 "numeric"이어도 일반 값 필터에는 사용할 수 있습니다.

enableFilter 속성이 true 설정되어야 가능합니다.

파라메터 설명

• dataField (String) : 칼럼이 출력하고 있는 데이터의 필드명
• values (String or Array) : 해당 dataField 에서 필터링하고자 하는 값(들)
  

// 이름의 값이 Anna, Emma 만 필터링 하기
 AUIGrid.setFilterByValues(myGridID, "name",  ["Anna", "Emma"]);

참고 : 정규식 및 비교 문(if) 등으로 필터링을 결정하고자 한다면 setFilter 메소드를 사용하십시오.

계층형 필터 메뉴를 사용해도 이 메소드는 값으로 필터링합니다. 부모가 다른 동일 값도 함께 선택합니다. 특정 경로를 복원하려면 getFilterCache()와 setFilterCache()를 사용하십시오.

관련 데모 보기

getFilterCache()로 보관한 필터 조건을 복원합니다.

파라메터 설명

• cache : (Object) getFilterCache()로 얻은 필터 조건

같은 dataField와 필터 유형을 사용하는 그리드에 적용하십시오. 트리 필터는 행 ID가 같아야 하며 그룹 필터는 저장한 필드와 원본 값을 유지해야 합니다. 함수 기반 필터는 setFilter()로 다시 설정하십시오.

// 필터 조건을 보관한 뒤 필요할 때 복원합니다.
const cache = AUIGrid.getFilterCache(myGridID);
AUIGrid.setFilterCache(myGridID, cache);

관련 데모 보기

인라인 필터 입력란의 텍스트를 설정하고 필터링에 적용합니다.

이 메소드는 일반적으로 getFilterInlineTexts 메소드와 같이 사용 합니다.

파라메터 설명

• inlineTexts (Array) : 인라인 필터의 텍스트들 정보

// 인라인 필터의 텍스트들 얻기.
 const inlineTexts = AUIGrid.getFilterInlineTexts(myGridID);
 // const inlieTexts = [{dataField : "name", text : "a" }, {dataField : "country", text : "대한"}];
 // 인라인 필터링 텍스트들 설정 시켜 필터링 실행하기.
 AUIGrid.setFilterInlineTexts(myGridID, inlineTexts);

Also See : getFilterInlineTexts

관련 데모 보기

가로 스크롤에도 위치를 유지할 고정 칼럼의 개수를 지정합니다.

0 인 경우 지정된 고정칼럼이 해제됩니다.

파라메터 설명

• count : (Number) 고정칼럼(FixedColumn) 실행시킬 개수

밴드형에서 고정 경계가 상위 셀을 가르면 마지막 하위 칼럼까지 자동으로 늘립니다. 예를 들어 인덱스 1~3의 하위 칼럼을 포함하는 상위 셀은 2를 지정해도 4개가 고정됩니다.

적용된 개수는 getProp(myGridID, "fixedColumnCount")로 확인할 수 있습니다.

관련 데모 보기

세로 스크롤에도 위치를 유지할 고정 행의 개수를 지정합니다.

0 인 경우 지정된 고정행이 해제됩니다.

파라메터 설명

• count : (Number) 고정행(FixedRow) 실행시킬 개수

관련 데모 보기

그리드에 키보드 포커스를 설정합니다.

그리드의 속성인 enableFocus 를 false 로 설정했다면, setFocus 메소드 호출은 의미가 없습니다.

관련 데모 보기

그리드에 표시할 푸터 레이아웃을 설정합니다.

푸터 레이아웃 작성에 대한 자세한 사항은 푸터(Footer) 레이아웃 작성에 대하여 를 참고하십시오.

파라메터 설명

• footerLayout (Array) : 푸터 출력을 위한 푸터 설정 레이아웃

관련 데모 보기

그리드에 표시할 데이터를 행 객체의 배열로 설정합니다. 빈 배열을 전달하면 데이터를 비우며, 기존 데이터에 행을 추가하려면 addRow()를 사용하십시오.

만약 XML 을 데이터로 사용하고자 하는 경우 setXmlGridData() 를, CSV 데이터를 사용하고자 한다면 setCsvGridData()를 사용하십시오.

파라메터 설명

• data (Array) : 그리드가 표현할 데이터 배열

Also See : setXmlGridData, setCsvGridData

관련 데모 보기

지정한 데이터 필드를 기준으로 그룹핑합니다.

그룹핑 실행 시 소계 정보를 다시 설정할 수 있습니다. 소계 정보를 재설정하고자 한다면 groupingSummary 를 작성하십시오.

groupingSummary 작성은 그리드 속성인 groupingSummary 을 참고하여 작성하십시오.

파라메터 설명

• groupingFields (Array) : 그룹핑을 하고자 하는 필드명을 요소로 갖는 배열
• groupingSummary (Object) : 그룹핑 시 소계를 출력하고자 하는 경우, 소계 정보 객체

// Country, Product 순으로 그룹핑을 하고자 하는 경우 다음과 같습니다.
 AUIGrid.setGroupBy(myGridID, ["country", "product"] );
 
 // Country 로 그룹핑하고, Price 에 대하여 소계를 출력함. 단, 소계명은 "가격 합계" 로 출력 시킴
 AUIGrid.setGroupBy(myGridID,  ["country"], {
         dataFields : [ "price" ],
         labelTexts : ["가격 합계"]
 });

See Also : groupingSummary

관련 데모 보기

최초 칼럼 레이아웃의 columnIndex에 해당하는 headerRenderer 속성을 변경합니다.

파라메터 설명

• columnIndex (Number) : 변경하고자 하는 칼럼 인덱스
• propObj (Object) : 변경하고자 하는 헤더렌더러(headerRenderer)의 속성명과 값을 갖는 Object

예를 들어 1번째 칼럼의 headerRenderer 를 다음처럼 CheckBoxHeaderRenderer 로 정의한 경우 속성 변경이 가능합니다.

{
 dataField : "field2",
 headerRenderer : { // 헤더 렌더러
     type : "CheckBoxHeaderRenderer",
     checked : true, // 최초 체크 여부
 }
}

위 설정으로 그리드를 생성한 후 다음과 같이 호출합니다. 칼럼 레이아웃 중 대상 칼럼의 설정을 발췌한 예입니다.

// 인덱스 1번째 칼럼의 헤더 체크박스 렌더러의 checked 속성 변경
 AUIGrid.setHeaderRendererProp(myGridID, 1, {"checked" : false} );

참고 : setHeaderRendererProp 으로 headerRenderer 의 기본인 type 설정을 바꿀 수는 없습니다.

최초 칼럼 레이아웃의 dataField에 해당하는 headerRenderer 속성을 변경합니다.

파라메터 설명

• dataField (String) : 변경하고자 하는 칼럼 데이터 필드명
• propObj (Object) : 변경하고자 하는 헤더렌더러(headerRenderer)의 속성명과 값을 갖는 Object

예를 들어 dataField 를 "field2" 로 설정한 headerRenderer 를 다음처럼 CheckBoxHeaderRenderer 로 정의한 경우 속성 변경이 가능합니다.

{
 dataField : "field2",
 headerRenderer : { // 헤더 렌더러
     type : "CheckBoxHeaderRenderer",
     checked : true, // 최초 체크 여부
 }
}

위 설정으로 그리드를 생성한 후 다음과 같이 호출합니다. 칼럼 레이아웃 중 대상 칼럼의 설정을 발췌한 예입니다.

// 칼럼의 헤더 체크박스 렌더러의 checked 속성 변경
 AUIGrid.setHeaderRendererPropByDataField(myGridID, "field2", {"checked" : false} );

참고 : setHeaderRendererPropByDataField 으로 headerRenderer 의 기본인 type 설정을 바꿀 수는 없습니다.

관련 데모 보기

마우스 포인터가 셀이나 행 위에 있을 때 적용하는 hoverMode를 변경합니다.

파라메터 설명

• hoverMode (String) : 설정하고자 하는 hoverMode(유효값 : "singleCell", "singleRow", "none")

관련 데모 보기

가로 스크롤이 있는 경우, 칼럼 인덱스를 기준으로 가로 스크롤 위치를 변경합니다. 픽셀 위치를 지정하려면 setHScrollPositionByPx()를 확인하십시오.

파라메터 설명

• columnIndex (Number) : 수평 스크롤의 시작점이 될 칼럼의 인덱스

관련 데모 보기

가로 스크롤이 있는 경우, 픽셀 단위로 가로 스크롤 위치를 변경합니다. 칼럼 인덱스 단위의 setHScrollPosition()과 구분하여 사용하십시오.

소수 위치는 소수 부분을 버린 뒤 스크롤 가능한 범위 안에서 적용합니다. 예를 들어 8.5를 지정하면 8px 위치로 이동합니다.

파라메터 설명

• pixel (Number) : 수평 스크롤이 이동할 픽셀 단위의 값

관련 데모 보기

[deprecated Ver 3.0.4]

Also See : showInfoMessage

페이징을 사용하는 그리드에서 한 페이지에 표시할 행 수를 변경합니다.

파라메터 설명

• pageRowCount : (Number) 1 페이지에 출력 시킬 행의 개수

그리드의 속성을 변경합니다.

파라메터 설명

• name : (String) 변경할 속성 이름
• value : (*) 변경할 값
• propObj : (Object) 여러 속성의 이름과 값을 담은 객체

단일 속성은 setProp(myGridID, name, value), 여러 속성은 setProp(myGridID, propObj)로 변경합니다. 화면 구성 설정을 적용하려면 refresh()를 호출하십시오.

생성 시에만 설정 가능한 속성: rowIdField, treeIdField, treeIdRefField, flat2tree, treeLazyMode, forceTreeView, wordWrap, processValidData.

// 편집을 허용합니다.
AUIGrid.setProp(myGridID, "editable", true);

// 행 높이를 변경하고 화면에 적용합니다.
AUIGrid.setProp(myGridID, { rowHeight: 40 });
AUIGrid.refresh(myGridID);

useSmoothScroll은 refresh() 없이 즉시 적용합니다.

Also See : getProp | refresh

관련 데모 보기

cellMergeLabelPosition는 setProp으로 변경한 뒤 refresh를 호출하여 적용합니다.

useLegacyColSpanMoving은 refresh() 없이 다음 헤더 드래그부터 적용합니다.

enableDragCells, nullMergeOthersByDrop 및 dragCellsTooltipFunction은 refresh() 없이 다음 셀 드래그부터 적용합니다.

hideGroupingColumns는 setProp으로 변경한 뒤 refresh를 호출하여 그룹 필드 칼럼의 표시를 갱신합니다.

최초 칼럼 레이아웃의 columnIndex에 해당하는 renderer 속성을 변경합니다.

renderer 속성의 기본인 type 을 제외한 속성을 변경할 수 있습니다.

파라메터 설명

• columnIndex (Number) : 변경하고자 하는 칼럼 인덱스
• propObj (Object) : 변경하고자 하는 렌더러(renderer)의 속성명과 값을 갖는 Object

예를 들어 1번째 칼럼의 renderer 를 다음처럼 BarRenderer 로 정의한 경우 BarRenderer 의 세부 속성 변경이 가능합니다.

{
 dataField : "field2",
 headerText : "-100 ~ 100 범위",
 renderer : {
     type : "BarRenderer",
     min : -100,
     max : 100
 }
}

위 설정으로 그리드를 생성한 후 다음과 같이 호출합니다. 칼럼 레이아웃 중 대상 칼럼의 설정을 발췌한 예입니다.

// 인덱스 1번째 칼럼의 renderer 인 BarRenderer 의 min, max 속성 변경
 AUIGrid.setRendererProp( myGridID, 1, { min : 0, max : 150 } );

참고 : setRendererProp 으로 renderer 의 기본인 type 설정을 바꿀 수는 없습니다. type 설정을 변경하고자 한다면, 전체 그리드를 destroy 후 다시 create 하여 새로운 칼럼 레이아웃으로 그리드를 재생성 하십시오.

관련 데모 보기

세로 스크롤이 있는 경우, 지정한 rowIndex의 행을 화면 최상단에 표시하도록 이동합니다.

페이징 모드(usePaging=true)인 경우 최상단이 아닌 해당 행이 현재 화면에 없는 경우 보이도록 이동 합니다.

파라메터 설명

• rowPosition (Number) : 그리드 상단으로 위치할 rowIndex

관련 데모 보기

그리드 상위 요소에 transform 배율이 적용된 경우, 같은 배율을 그리드에 설정하여 좌표 기준을 맞춥니다.

파라메터 설명

• scaleFactor (Number) : transform 에 적용될 값

See Also : scaleFactor

관련 데모 보기

그리드의 현재 데이터를 전체 선택합니다.

selectionMode 를 "multipleCells" 또는 "multipleRows" 로 설정해야 하며 enableSelectionAll 속성을 반드시 true 설정해야 합니다.

위의 2가지 속성이 설정되면 Ctrl + A 단축키로 전체 선택 역시 활성화 됩니다.

수천 개 이상의 데이터를 전체 선택할 경우, 브라우저 성능 저하, 일시적인 멈춤 현상 또는 스크립트 중단 등의 문제가 발생할 수 있습니다. 따라서 해당 기능은 데이터 양을 고려하여 신중하게 사용해야 합니다.

See Also : selectionMode | enableSelectionAll

관련 데모 보기

행과 칼럼 인덱스로 선택할 셀 영역을 지정합니다.

이 메소드는 selectionMode 를 "multipleCells" 로 설정했을 때 사용자의 의도대로 출력됩니다.

만약 "multipleCells" 가 아닌 다른 값이라면 해당 속성값에 맞게 선택이 자동 변경되어 지정됩니다.

파라메터 설명

• startRowIndex (Number) : 블록을 만들 시작 행 인덱스
• endRowIndex (Number) : 블록을 만들 종료 행 인덱스
• startColumnIndex (Number) : 블록을 만들 시작 칼럼 인덱스
• endColumnIndex (Number) : 블록을 만들 종료 칼럼 인덱스

// (1,1) 셀에서 시작하여 (4,4) 셀에서 끝나는 선택 블록 지정하기
 AUIGrid.setSelectionBlock(myGridID, 1, 4, 1, 4);

관련 데모 보기

시작 행과 끝 행, 시작 필드와 끝 필드로 연속 셀 영역을 선택합니다.

selectionMode가 "multipleCells"일 때 사용하며 시작 셀이 활성 셀이 됩니다.

파라메터 설명

• startRowIndex : (Number) 시작 행 인덱스
• endRowIndex : (Number) 끝 행 인덱스
• startColDataField : (String) 시작 칼럼의 데이터 필드명
• endColDataField : (String) 끝 칼럼의 데이터 필드명

행 인덱스는 정렬과 필터가 적용된 데이터 기준이며 0부터 시작합니다.

// 이름부터 생년월일까지 처음 세 행을 선택합니다.
AUIGrid.setSelectionBlockByDataField(myGridID, 0, 2, "name", "birth");

관련 데모 보기

행 인덱스와 필드명으로 셀을 선택합니다.

파라메터 설명

• rowIndex : (Number) 정렬과 필터가 적용된 데이터의 행 인덱스. 0부터 시작
• dataField : (String) 선택할 칼럼의 데이터 필드명

selectionMode가 "singleCell" 또는 "multipleCells"일 때 사용합니다.

// 두 번째 행의 소속 셀을 선택합니다.
AUIGrid.setSelectionByDataField(myGridID, 1, "team");

관련 데모 보기

행과 칼럼 인덱스로 셀 또는 행을 선택합니다.

파라메터 설명

• rowIndex : (Number) 선택할 행 인덱스. 0부터 시작
• columnIndex : (Number) 선택할 하위 칼럼 인덱스. 생략하면 0

셀 선택 모드에서는 해당 셀을, 행 선택 모드에서는 해당 행을 선택합니다. 밴드형 상위 셀을 선택하려면 setSelectionByDataField()를 사용하십시오.

// 첫 번째 행의 세 번째 하위 칼럼을 선택합니다.
AUIGrid.setSelectionByIndex(myGridID, 0, 2);

Also See : getSelectedItems()

관련 데모 보기

그리드의 현재 데이터에서 지정한 칼럼 전체를 선택합니다.

selectionMode 를 "multipleCells" 로 설정해야 하며 enableSelectionAll 속성을 반드시 true 설정해야 합니다.

수천 개 이상의 데이터를 전체 선택할 경우, 브라우저 성능 저하, 일시적인 멈춤 현상 또는 스크립트 중단 등의 문제가 발생할 수 있습니다. 따라서 해당 기능은 데이터 양을 고려하여 신중하게 사용해야 합니다.

파라메터 설명

• startColIdx (Number) : 전체 선택할 칼럼 시작 인덱스
• endColIdx (Number) : 전체 선택할 칼럼 종료 인덱스

// 1번째 칼럼 인덱스 전체 선택
 AUIGrid.setSelectionColumn(myGridID, 1, 1);
 // 1, 2, 3 칼럼 인덱스 전체 선택
 AUIGrid.setSelectionColumn(myGridID, 1, 3);

주의 : 수천 개 이상의 셀 데이터를 전체 선택할 경우 브라우저 성능 저하 또는 일시적인 멈춤 현상, 스크립트 중지 등이 발생할 수 있습니다.

See Also : selectionMode | enableSelectionAll

관련 데모 보기

그리드의 선택 모드(selectionMode)를 변경합니다.

파라메터 설명

• selectionMode (String) : 설정하고자 하는 selectionMode(유효값 : "singleCell", "singleRow", "multipleCells", "multipleRows", "none")

관련 데모 보기

정렬 기능에 사용할 국제화 문자열 비교기(Intl.Collator) 객체를 설정합니다. (Intl.Collator 는 JS 표준 API 입니다.)

이 기능을 통해 한글, 영문, 숫자, 대소문자, 악센트, 구두점 등의 정렬 기준을 보다 정교하게 제어할 수 있습니다.

즉, 단순 문자열 코드값 기준 정렬이 아닌 언어 규칙 기반 정렬(로케일 기반 정렬) 을 적용할 수 있습니다.

한 번 설정하면 해당 그리드 내 모든 정렬 동작에 공통적으로 적용됩니다.

파라메터 설명

• collator (Intl.Collator 객체) : 자바스크립트 표준 국제화 비교기 객체 (new Intl.Collator(locale, options))
  • locale(String) : 사용할 언어 코드 예: 'ko', 'en-US', 'ja', 'zh-CN'
  • options(Object)
    • sensitivity: (String) 대소문자 및 악센트 구분 수준을 지정 ('base', 'accent', 'case', 'variant')
    • ignorePunctuation: (Boolean) 구두점 무시 여부
    • numeric: (Boolean) 문자열 내 숫자를 실제 숫자처럼 인식 여부
    • caseFirst: (String) 대문자와 소문자 중 어느쪽을 우선 정렬할지 지정 ('upper', 'lower', 'false')

 // 한글 우선 정렬, 숫자 인식 정렬
 const collator = new Intl.Collator('ko', {
     sensitivity: 'case',   // 대소문자 구분만, 악센트 무시
     numeric: true       // 문자열 내 숫자를 실제 숫자처럼 인식
 });
 AUIGrid.setSortCollator(myGridID, collator);
 
 // 영문 알파벳 우선, 구두점 무시 정렬
 const collatorEn = new Intl.Collator('en', {
     sensitivity: 'base',
     ignorePunctuation: true,
     caseFirst: 'upper'
 });
 AUIGrid.setSortCollator(myGridID, collatorEn);
 
 // 정렬 문자열 비교기 초기화 (해제 방법)
 AUIGrid.setSortCollator(myGridID, null);

관련 데모 보기

정렬 기준을 설정하고 그리드 데이터에 적용합니다.

dataType="date"인 칼럼에 dateInputFormat이 설정되어 있으면 해당 형식으로 날짜 값을 해석하여 정렬합니다. 날짜 입력 형식은 칼럼 레이아웃의 dateInputFormat에 설정하십시오.

파라메터 설명

• sortingInfo (Array) : 정렬 실행 시킬 정보를 담은 배열
  정보를 담은 배열의 요소는 Object 로 다음 요소를 갖습니다.
  • dataField (String) : 정렬을 실행 시킬 데이터 필드명
  • sortType (Number) : 오름차순인 경우 1, 내림차순인 경우 -1
• onlyLastDepthSorting (Boolean) : 트리 그리드 인 경우 최하단 깊이(depth) 만 정렬 실행할 지 여부, 기본적으로 그리드의 onlyTreeLastDepthSorting 속성을 따름.

예를 들어 차례로 Country, Name, Price 에 대하여 각각 오름차순, 내림차순, 오름차순 지정하고자 한다면 다음과 같이 설정하십시오.

const sortingInfo = [];
 // 차례로 Country, Name, Price 에 대하여 각각 오름차순, 내림차순, 오름차순 지정.
 sortingInfo[0] = { dataField : "country", sortType : 1 }; // 오름차순 1
 sortingInfo[1] = { dataField : "name", sortType : -1 }; // 내림 차순 -1
 sortingInfo[2] = { dataField : "price", sortType : 1 };
 AUIGrid.setSorting(myGridID, sortingInfo);

위와 같이 원하는 개수만큼 다중 정렬 및 단일 정렬 sortingInfo 배열을 만들어 setSorting 파라메터로 지정하십시오.

관련 데모 보기

XML 형식의 데이터를 그리드에 설정합니다.

파라메터 설명

• xmlData (Object) : 그리드가 표현할 XML 데이터
• tagName (String) : XML 에서 개별 행(row)을 구성하는 태그명을 지정합니다. 예를 들어 "<item><col1>1</col1><col2>2</col2></item>" 과 같이 구성된 XML 인 경우 tagName 으로 "item" 을 지정하십시오.(기본값:"row")

Also See : setGridData, setCsvGridData

관련 데모 보기

그리드에 로딩 표시를 보여 줍니다.

관련 데모 보기

숨겨진 칼럼을 포함하여 원래 설정한 모든 칼럼을 표시합니다.

Also See : showColumnByDataField, hideColumnByDataField

관련 데모 보기

dataField로 지정한 칼럼을 표시합니다.

복수의 칼럼을 보이도록 지정하고자 한다면 배열로 설정하십시오. (예: ["name", "country", "product"] )

파라메터 설명

• dataField (String or Array) : 칼럼의 데이터 필드명(들)

Also See : hideColumnByDataField

관련 데모 보기

그룹 헤더에서 지정한 그룹에 속한 모든 자손 칼럼을 표시합니다.

파라메터 설명

• dataField (String) : 칼럼의 데이터 필드명

Also See : hideColumnGroup

관련 데모 보기

지정한 엑스트라 칼럼을 표시합니다. 대상은 행 드래그 손잡이(showDragKnobColumn), 행 번호(showRowNumColumn), 행 상태(showStateColumn), 행 체크박스(showRowCheckColumn)입니다.

파라메터 설명

• propName (String) : 보이게 변경 할 엑스트라 칼럼 속성명

// 엑스트라 칼럼인 행 드래그&드랍 손잡이(showDragKnobColumn)를 보이게 합니다.
 AUIGrid.showExtraColumn(myGridID, "showDragKnobColumn");
 // 엑스트라 칼럼인 행 번호 칼럼(showRowNumColumn)를 보이게 합니다.
 AUIGrid.showExtraColumn(myGridID, "showRowNumColumn");

See Also : changeExtraColumnOrders | changeExtraColumnWidth | hideExtraColumn

관련 데모 보기

생성 시 표시하지 않았던 푸터를 표시합니다.

Also See : hideFooterLater

그리드에 안내 메시지를 표시합니다. 메시지 제거는 removeInfoMessage()를 확인하십시오.

파라메터 설명

• msgHTML (String) : 그리드에 표시될 메세지를 포함한 HTML 구문입니다.

만약 데이터가 존재하지 않아 데이터가 없다는 메세지를 출력시키는 예는 다음과 같습니다.

Also See : removeInfoMessage

관련 데모 보기

트리 그리드를 지정한 깊이(depth)까지만 펼쳐 표시합니다.

깊이(depth) 는 Root 가 1에 해당되며 하위 브랜치로 내려갈 수록 1씩 증가합니다.

파라메터 설명

• depth (Number) : 표현하고자 하는 계층 깊이(depth)

관련 데모 보기

지정한 셀에 메시지를 표시합니다. 메시지를 제거하려면 removeToastMessage()를 사용하십시오.

파라메터 설명

• rowIndex (Number) : 행 인덱스
• columnIndex (Number) : 칼럼 인덱스
• message (String) : 행, 열로 대표되는 셀에 출력할 메시지

Also See : removeToastMessage

관련 데모 보기

칼럼 레이아웃이 같은 다른 그리드의 데이터와 추가, 삭제, 수정 상태를 함께 적용합니다.

이 메소드는 상태 정보를 갖는 getStateCache 메소드와 같이 사용해야 합니다.

파라메터 설명

• data (Array) : 삽입할 데이터
• cache (Object) : getStateCache 메소드로 얻은 상태 정보 캐시

// 그리드1에서 데이터 얻기
 const d = AUIGrid.getGridData(myGridID1);
 // 그리드1의 추가, 삭제, 변경된 정보 캐시 얻기
 const cache = AUIGrid.getStateCache(myGridID1);
 // 그리드2에 그리드1과 동일한 데이터 및 상태 정보(추가, 삭제, 변경) 캐시를 동기화 시켜 삽입하기
 AUIGrid.syncGridData(myGridID2, d, cache);

Also See : getStateCache

그리드에 연결한 이벤트 핸들러를 해제합니다.

파라메터 설명

• type : (String or Array) 언바인딩하고자 하는 이벤트 유형

예를 들면 cellClick 이벤트를 언바인당하고자 하는 경우 다음과 같습니다.

AUIGrid.unbind(myGridID, "cellClick"); 

편집 가능한 그리드에서 이전 작업을 실행 취소합니다. enableUndoRedo=true인 경우 사용합니다.

keepViewOnAdd:true로 추가한 행이나 삭제한 행을 복원할 때 정렬과 필터 조건을 유지합니다. 필터를 새로 지정하는 등 실행 취소 기록이 초기화된 뒤에는 이전 작업을 복원할 수 없습니다.

관련 데모 보기

실행 취소(Undo)할 수 있는 작업이 있는지 확인합니다.

Return : (Boolean) 실행 취소 가능 여부

Also See : undo, redo, redoable

관련 데모 보기

현재 출력된 셀의 표시 내용을 다시 계산하여 갱신합니다.

예를 들어 특정 칼럼에 labelFunction, formatString 등이 정의 되어 있다면, 해당 로직을 다시 실행해서 셀에 출력 시킵니다.

따라서 labelFunction 에 전역 변수를 참고하고 있을 경우, 전역 변수의 값이 변했을 때 사용하면 유효합니다.

기존 속성의 변경에 반응하지 않습니다. 기존 속성 변경을 한 경우 refresh 메소드를 사용하십시오.

관련 데모 보기

그리드 전체 데이터를 대상으로 지정한 dataField 의 값을 지정한 value 로 모두 변경합니다.

updateAllToValue 로 값을 변경할 때 updateRow 이벤트가 발생하지 않고, 셀 수정 마커와 행 상태 칼럼에 수정 표시가 나타나지 않습니다.

뿐만 아니라 getEditedRowItems, getEditedRowColumnItems 메소드로 수정된 행을 얻을 수 없습니다. getGridData 메소드를 활용하여 전체 데이터를 얻어야 합니다.

모든 행의 같은 필드에 동일한 값을 지정할 때 사용하십시오. 행마다 다른 값이나 여러 필드를 변경하려면 updateRows 또는 updateRowsById를 확인하십시오.

파라메터 설명

• dataField : (String) 데이터 필드 명
• value : (Object) 변경할 값

Also See : updateRowBlockToValue

칼럼 레이아웃에 정의된 모든 expFunction을 다시 호출하여 계산 결과를 갱신합니다.

현재 데이터에 맞춰 그룹핑과 소계를 다시 계산합니다.

그룹핑 및 소계를 설정한 경우 그리드 데이터의 값이 변경되어 재그룹핑 및 소계 계산이 필요한 경우 실행하십시오.

그룹핑 및 소계 설정을 변경하고자 하는 경우 setGroupBy 메소드를 사용하십시오. 이 메소드는 그룹핑 및 소계 설정은 유지하고 단순 갱신만을 합니다.

See Also : setGroupBy

관련 데모 보기

지정한 행의 데이터를 수정합니다.

그리드의 속성 editable 과 무관하게 이 메소드를 통해 아이템을 수정할 수 있습니다.

파라메터 설명

• item (Object) : 수정하고자 하는 행 아이템
• rowIndex (Number or String) : 수정하고자 하는 행의 인덱스, , rowIndex 대신 "selectedIndex" 문자열을 설정한 경우 현재 선택된 행이 수정됩니다.
• isMarkEdited (Boolean) : 값 변경을 행과 셀의 수정 상태로 기록할지 지정합니다. true이면 변경한 행과 셀을 수정 상태로 기록하고, false이면 값은 변경하지만 이번 변경을 수정 상태로 기록하지 않습니다. (기본값: true)

isMarkEdited가 false이면 이번 변경으로 행과 셀에 수정 표시를 추가하지 않으며 수정 내역 조회에도 새로 포함하지 않습니다. 이미 기록된 수정 상태는 유지합니다.

예를들어, 행인덱스(rowIndex) 5 인 행의 name 필드를 "우리" 로 바꾸고자 한다면 다음과 같습니다.

const item = { name : "우리" }; 
 AUIGrid.updateRow(myGridID, item, 5);

행인덱스(rowIndex) 5인 행의 name 필드를 "우리", country 필드를 "나라", product 필드를 "제품" 로 바꾸고자 한다면 다음과 같습니다.

const item = { name : "우리", country : "나라", product : "제품" }; 
 AUIGrid.updateRow(myGridID, item, 5);

절대 반복문법(for, while 등) 안에서 이 메소드를 사용하지 마십시오.

다수의 행에 대하여 값을 변경하고자 하는 경우 updateRows, updateRowsById 메소드를 사용하십시오.

Also See : updateRows, updateRowsById, updateRowBlockToValue

관련 데모 보기

지정한 여러 행에서 하나 또는 여러 dataFields의 값을 일괄 변경합니다.

다수의 행을 빠르게 변경할 뿐만 아니라 getEditedRowItems, getEditedRowColumnItems 메소드를 통하여 수정된 행으로 얻을 수 있습니다.

파라메터 설명

• startRowIndex : 시작 행 인덱스
• endRowIndex : 종료 행 인덱스
• dataFields : (String or Array) 데이터 필드 명
• values : (Object or Array) 변경할 값

dataFields 와 values 를 배열로 삽입하면 블록 단위의 행 일괄 수정이 가능합니다.

// 0~100 행의 name 필드를 "Anna" 로 일괄 수정
 AUIGrid.updateRowBlockToValue(myGridID, 0, 100, "name", "Anna");
 // 0~100 행의 name, country 필드를 각각 "Anna", "Korea" 로 일괄 수정
 AUIGrid.updateRowBlockToValue(myGridID, 0, 100, ["name", "country"], ["Anna", "Korea"]);
 // 0~100 행의 name 필드를 "Anna", "John", "Kim" 이 3행마다 반복되게 일괄 수정
 AUIGrid.updateRowBlockToValue(myGridID, 0, 100, "name", [["Anna"], ["John"], ["Kim"]]);
 // 0~100 행의 name, country 필드를 블럭으로 일괄 수정 
 AUIGrid.updateRowBlockToValue(myGridID, 0, 100, ["name", "country"], [["Anna", "USA"], ["John", "UK"], ["Kim", "Korea"]]);

관련 데모 보기

다수의 행에 대하여 지정한 필드(들)의 값을 일괄적으로 수정합니다.

여러 행의 변경 내용을 하나의 호출에 묶어 처리할 때 사용합니다. 각 행에서 변경할 필드만 지정할 수 있습니다.

그리드의 속성 editable 과 무관하게 이 메소드를 통해 다수의 행 아이템을 수정할 수 있습니다.

파라메터 설명

• items (Array) : 수정하고자 하는 복수의 행 아이템
• rowIndexes (Array) : 수정하고자 하는 행 인덱스(rowIndex) 의 묶음입니다.
• isMarkEdited (Boolean) : 값 변경을 행과 셀의 수정 상태로 기록할지 지정합니다. true이면 변경한 행과 셀을 수정 상태로 기록하고, false이면 값은 변경하지만 이번 변경을 수정 상태로 기록하지 않습니다. (기본값: true)

isMarkEdited가 false이면 이번 변경으로 행과 셀에 수정 표시를 추가하지 않으며 수정 내역 조회에도 새로 포함하지 않습니다. 이미 기록된 수정 상태는 유지합니다.

rowIndex 각각 1, 2, 3 에 해당되는 3개의 행에 대하여 각각 price, name 2개 필드들을 일괄 수정 시키고자 한다면 다음과 같습니다.

const items = [{ price : 2000, name : "우리" }, { price : 2001, name : "우리-1" }, { price : 2002, name : "우리-2" }];
 const rowIndexes = [1, 2, 3];
 AUIGrid.updateRows(myGridID, items, rowIndexes); // 행인덱스(rowIndex) 각각 1, 2, 3 인 행들 한번에 업데이트

Also See : updateRowsById, updateRowBlockToValue

관련 데모 보기

그리드 행 고유 값(rowIdField 값)에 해당되는 행(들)의 원하는 필드(들)를 수정합니다.

여러 행의 변경 내용을 하나의 호출에 묶어 처리할 때 사용합니다. 각 행에서 변경할 필드만 지정할 수 있습니다.

그리드의 속성 editable 과 무관하게 이 메소드를 통해 아이템을 수정할 수 있습니다.

파라메터 설명

• items (Array or Object) : 복수 또는 1개의 행을 업데이트 합니다.
• isMarkEdited (Boolean) : 값 변경을 행과 셀의 수정 상태로 기록할지 지정합니다. true이면 변경한 행과 셀을 수정 상태로 기록하고, false이면 값은 변경하지만 이번 변경을 수정 상태로 기록하지 않습니다. (기본값: true)

isMarkEdited가 false이면 이번 변경으로 행과 셀에 수정 표시를 추가하지 않으며 수정 내역 조회에도 새로 포함하지 않습니다. 이미 기록된 수정 상태는 유지합니다.

예를 들어 rowIdField 를 id 로 설정한 경우, id 가 20 인 행을 찾아 특정 셀(price, name 2개만) 업데이트 하고자 한다면 다음과 같습니다.

const item = { id : 20, price : 2000, name : "우리" }; // ID 가 20인 행을 찾아 price=2000, name=우리로 변경
 AUIGrid.updateRowsById(myGridID, item); // 1개 업데이트

다수의 행을 한번에 변경 시킬려면 다음처럼 배열로 정의하여 사용합니다.

const items = [{ id : 20, price : 2000, name : "우리" }, { id : 21, price : 2001, name : "우리-1" }, { id : 22, price : 2002, name : "우리-2" }];
 AUIGrid.updateRowsById(myGridID, items); // id 가 각각 20, 21, 22 인 행들 한번에 업데이트

Also See : updateRows, updateRowBlockToValue

관련 데모 보기

사용자가 수정하거나 추가한 행의 지정 필드에 빈값(undefined, null, "")이 있는지 검사합니다.

사용자가 반드시 입력해야 하는 값이 있다면 이 메소드로 체크 할 수 있습니다.

빈값에 해당되는 값이 존재한다면 해당 셀에 지정된 메세지를 띄우고 값을 입력 하도록 요구합니다.

파라메터 설명

• requireFields (String or Array) : 필수로 값이 있어야 하는 dataField 들. 즉, 모두 값이 채워 졌는지 체크 하고자 하는 dataField
• message (String) : 빈값, null 이 존재할 때 적용 시킬 toast alert 메세지. message 파라메터를 설정하지 않으면 toast 는 출력되지 않음.

Return : (Boolean) 빈값 없이 모두 정상적이라면 true 반환

// 수정, 추가한 행에 대하여 전체 필드에 대하여 검사
 // name 과 country 는 필수로 입력되어야 하는 필드임. 이것을 검사
 const isValid = AUIGrid.validateChangedGridData(myGridID, ["name", "country"], "반드시 유효한 값을 직접 입력해야 합니다.");
 // 다른 JS 에서 제공하는 toast 나 alert 으로 경고문을 띄우고자 하는 경우 다음처럼 message 파라메터 생략.
 // AUIGrid.validateChangedGridData(myGridID);
 if(isValid) {
     console.log("정상적으로 모두 입력됨. 서버로 전송하십시오.");
 }

관련 데모 보기

그리드 데이터의 지정 필드에 빈값(undefined, null, "")이 있는지 검사합니다.

사용자가 반드시 입력해야 하는 값이 있다면 이 메소드로 체크 할 수 있습니다.

빈값에 해당되는 값이 존재한다면 해당 셀에 지정된 메세지를 띄우고 값을 입력 하도록 요구합니다.

파라메터 설명

• requireFields (String or Array) : 필수로 값이 있어야 하는 dataField 들. 즉, 모두 값이 채워 졌는지 체크 하고자 하는 dataField
• message (String) : 빈값, null 이 존재할 때 적용 시킬 toast alert 메세지. message 파라메터를 설정하지 않으면 toast 는 출력되지 않음.

Return : (Boolean) 빈값 없이 모두 정상적이라면 true 반환

// name 과 country 는 필수로 입력되어야 하는 필드임. 이것을 검사
 const isValid = AUIGrid.validateGridData(myGridID, ["name", "country"], "필수 필드는 반드시 값을 직접 입력해야 합니다.");
 // 다른 JS 에서 제공하는 toast 나 alert 으로 경고문을 띄우고자 하는 경우 다음처럼 message 파라메터 생략.
 // AUIGrid.validateGridData(myGridID, ["name", "country"]);
 if(isValid) {
     console.log("정상적으로 모두 입력됨. 서버로 전송하십시오.");
 }

관련 데모 보기

지정한 조건에 맞지 않는 값이 있는지 그리드 데이터를 검사합니다.

사용자가 반드시 입력해야 하는 값 또는 수정되어야 하는 값 등이 있다면 이 메소드로 체크 할 수 있습니다.

조건에 맞지 않는 값이 존재한다면 해당 셀에 지정된 메세지를 띄우고 값을 입력(변경) 하도록 요구합니다.

파라메터 설명

• requireFields (String or Array) : 체크하고자 하는 dataField 들.
• validFunc (Function) : 조건에 맞지 않는 값을 체크 하는 함수.

  function signature(item, dataField) { }

• message (String) : 조건에 맞지 않는 값이 존재할 때 적용 시킬 toast alert 메세지. message 파라메터를 설정하지 않으면 toast 는 출력되지 않음.
• onlyByFunc (Boolean) : validFunc 반환값으로만 메세지 출력시킬지 여부. true를 설정하면 requireFields 가 null, "" 인 경우에도 validFunc 함수의 반환값으로만 결정함.

Return : (Boolean) 유효성 검사 통과한다면(모두 정상적이라면) true 반환

// name 은 필수로 입력되어야 하며 Anna 인 값은 수정되어야 함.
 const isValid = AUIGrid.validateGridDataByFunc(myGridID, ["name"], function(item, dataField) {
     const v = item[dataField];
     if(v === "Anna" || v === null || v === "") { // Anna 값, null 값 존재하면 안됨.
         return false; // false 반환하면 조건에 맞지 않는 값으로 정해진 toast 메세지 띄움
     }
 }, "Anna 값은 수정되어야 하며 공백으로 존재해선 안됩니다.");
 if(isValid) {
     console.log("정상적으로 모두 입력됨. 서버로 전송하십시오.");
 }

관련 데모 보기