메인으로 Controls 그리드

그리드dews-ui-grid

※ 그리드는 데이터소스와 밀접한 관계가 있으며, 대부분의 데이터 처리 관련 API는 데이터소스에서 제공하고 있으므로,
   그리드 API 뿐 아니라 데이터소스 API 를 함께 확인할 것을 추천합니다.

메서드

addRow행 추가

addRow() 새로운 행을 추가합니다.

cancelChanges변경내용 취소

cancelChanges() 그리드에서 변경된 내용을 취소합니다.

※ 삭제 및 수정된 항목은 복구되며, 추가된 항목은 제거됩니다.

cancelRow행 변경내용 취소

cancelRow() 에디트 모드에 있는 행의 변경된 내용을 취소하고 되돌립니다.

clearSelection선택 취소

clearSelection() 현재 선택된 행이나 셀의 선택을 취소합니다. (selection 모드에 영향을 받습니다.)

closeCell수정 모드 취소

closeCell(isCancel) 수정 모드에서 빠져나옵니다.

파라미터

  • isCancel boolean cancel 이벤트를 발생시킬 지 결정합니다. 기본값: false

dataItem데이터 가져오기

dataItem(row) 지정한 행의 데이터를 가져옵니다.

파라미터

  • row string|jQuery|Element 행을 지정하는 셀렉터 또는 jQuery 객체, TR의 엘리먼트입니다.

리턴 값

지정한 행에 바인딩 되어 있는 데이터를 가져옵니다.

dataItems데이터 가져오기

dataItems(row) 지정한 열 또는 그리드 전체에 바인된 데이터를 가져옵니다.

파라미터

  • row string|jQuery 데이터를 가져올 대상 열을 나타내는 셀렉터 또는 jQuery 객체 ※ 생략하면 그리드 전체 데이터를 가져옵니다.

리턴 값

그리드에 바인된 데이터

editCell수정 모드로 전환

editCell(cell) 지정한 셀을 수정모드로 변환하고, edit 이벤트를 발생시킵니다.

파라미터

  • cell jQuery 셀을 나타내는 jQuery 객체

getCellValue지졍한 셀의 데이터를 가져옵니다.

getCellValue(row, field) 지정한 셀에 설정된 데이터를 가져옵니다.

파라미터

  • row number|jQuery 셀이 포함된 행의 인덱스 또는 행을 나타내는 jQuery 객체
  • field string 셀을 나타내는 열의 필드 명

리턴 값

* 지정한 셀에 적용된 값을 가져옵니다.

getCheckedRows선택된 체크박스의 행 객체 목록을 반환

getCheckedRows(field) 전체 행 중에서 지정된 열의 체크박스가 체크된 행들만 가져옵니다. ※ 버추얼 스크롤링 이용시 사용금지

파라미터

  • field string 체크박스가 존재하는 그리드의 열

리턴 값

jQuery 체크박스가 체크된 행 목록

getCheckedValues선택된 체크박스 값 반환

getCheckedValues(field) 지정한 필드에 설정된 체크박스 중 선택된 항목들의 value에 설정된 값의 배열을 가져옵니다.

파라미터

  • field string 체크박스가 존재하는 그리드의 열

리턴 값

array 체크된 체크박스의 값

getCheckedDatas선택된 체크박스의 데이터 반환

getCheckedDatas(field) 지정한 필드에 설정된 체크박스 중 선택된 항목이 있는 행의 데이터의 배열을 가져옵니다.

파라미터

  • field string 체크박스가 존재하는 그리드의 열

리터 값

array 체크된 열의 데이터 배열

hideColumn열 숨김

hideColumn(column) 지정한 열을 숨깁니다.

파라미터

  • column number|string|object 숨길 열(number: 열 인덱스, string: 열 필드명, object: 열 컬렉션의 column 객체)

refresh새로 고침

refresh() 테이블의 모든 행을 현재 데이터를 기반으로 새로 그립니다.

removeRow행 삭제

removeRow(row) 그리드에서 행을 삭제하고, 데이터소스의 데이터도 삭제합니다.

파라미터

  • row string|jQuery|element 삭제할 행을 나타내는 셀렉터 또는 jQuery 객체, 행을 나타내는 요소입니다.

restoreCheckStates체크박스의 체크 상태를 유지

restoreCheckStates(field) 지정한 필드의 체크박스 행의 체크 상태를 유지하도록 만듭니다.

파라미터

  • field string 체크박스 행의 이름

※ 자세한 사항은 튜토리얼 > 그리드 관련 > 체크박스 컬럼 체크 상태 유지하기 를 참고하세요.

showProgress그리드에 로딩바를 출력

showProgress() 그리드 내에 로딩바를 출력합니다.

hideProgress그리드의 로딩바를 제거

hideProgress() 그리드 내의 로딩바를 제거합니다.

rows행 목록을 반환

rows(selector) 그리드에서 셀렉터를 이용하여 행 객체를 가져옵니다.

파라미터

  • row string 행을 선택하는 셀렉터 생략 시에는 전체 행을 반환

반환 값

행(tr)을 나타내는 jQuery 객체

saveAsExcel그리드를 엑셀로 저장

saveAsExcel(options) 그리드의 내용을 엑셀로 저장합니다.

파라미터

  • options object 엑셀 저장 관련 옵션
    • fileName string 저장할 파일명
    • allPages 페이징 시 전체 데이터 다운로드 여부 (기본값: true)

select행 또는 셀을 선택

select(rows) 선택된 행 또는 셀을 가져오거나, 행 또는 셀을 선택합니다.

파라미터

  • rows string|jQuery|element ※ 선택할 행 또는 셀 생략하면 선택된 항목을 가져옵니다.

리턴 값

jQuery 선택된 행 또는 셀 jQuery 객체

setCellValue셀 값 지정

setCellValue(row, field, value) 셀에 값을 설정합니다.

파라미터

  • row number|jQuery 대상 행을 지정합니다. ※ number: 행의 인덱스 번호, jQuery: 행을 나타내는 jQuery 객체
  • field string 대상 열을 나타내는 필드 명
  • value * 셀에 설정할 값

setColumns컬럼 구성을 변경합니다.

setColumns(columns, refresh) 컬럼의 구성을 변경합니다.

파라미터

  • columns object 새로 적용할 컬럼 구성 정보
  • refresh boolean 컬럼 재구성 후 그리드를 새로고침할 지 여부 ※ 기본값: true

setDataSource데이터소스 설정

setDataSource(dataSource) 그리드에 데이터소스를 설정합니다.

파라미터

  • dataSource dews.ui.dataSource 그리드에 바인딩할 데이터소스

showColumn지정한 열을 보여줍니다.

showColumn(column)

파라미터

  • column number|string|object 보여줄 열 (number: 열 인덱스, string: 열 필드명, object: 열 컬렉션의 column 객체)