본문 바로가기

카테고리 없음

AG-GRID, 선택한 행 데이터 추출 기능

 

 

1. onSelectionChanged: onSelectionChanged,

- 버튼에 적용할거면 코드 제외할 것

 

2. function 함수 추가

- 1) 또는 2) 선택 1

- gridOptions2 변수는 gridOptions로 수정 권고 :D

 

1) 하나의 행 데이터 추출시

하나의 행만 선택시 -> rowSelection: 'single'

하나의 행만 선택, 하나의 데이터만 출력시

 

function onSelectionChanged() {

  var selectedRows = gridOptions2.api.getSelectedRows();

  document.querySelector('#selectedRows').innerHTML =

    selectedRows.length === 1 ? selectedRows[0].spec_id2 : '';

}

 

2) 여러 행 데이터 추출시

여러 행 선택시 -> rowSelection: 'multiple'

여러 행 선택, 여러 컬럼 출력시

 

function onSelectionChanged() {

  var selectedRows = gridOptions2.api.getSelectedRows();

  var selectedRowsString = '';

  var maxToShow = 10;

 

  selectedRows.forEach(function(selectedRow, index) {

    if (index >= maxToShow) {

      return;

    }

 

    if (index > 0) {

      selectedRowsString += ' / ';

    }

 

    selectedRowsString += '분류 : '+selectedRow.equipment_f;

    selectedRowsString += ' , 날짜 : '+selectedRow.date_f;

    selectedRowsString += ' , 내용 : '+selectedRow.comment_f;

    selectedRowsString += ' , 작성자 : '+selectedRow.user_f;

  });

 

  if (selectedRows.length > maxToShow) {

    var othersCount = selectedRows.length - maxToShow;

    selectedRowsString +=

      ' and ' + othersCount + ' other' + (othersCount !== 1 ? 's' : '');

  }

 

  document.querySelector('#selectedRows').innerHTML = selectedRowsString;

}

 

3. body 태그 안에 추가

<span id="selectedRows"></span>


AG-GRID 연관 글

 

AG-GRID, AG-GRID 테이블 생성, 버튼 추가

: https://justdo-heal.tistory.com/23

 

AG-GRID, AG-GRID 행 넓이 자동 조절, 행 높이 설정, 행 여러 줄 기능

: https://justdo-heal.tistory.com/24

 

AG-GRID, 행 높이 자동 조절 추가 관련 조사

: https://justdo-heal.tistory.com/25

 

AG-GRID 버튼을 이용한 행 추가, 행 삭제 기능

: https://justdo-heal.tistory.com/26

 

AG-GRID 셀 편집 기능

: https://justdo-heal.tistory.com/27

 

AG-GRID, 콘솔 로그 기록 기능

: https://justdo-heal.tistory.com/28

 

AG-GRID,  수직 가운데 정렬

: https://justdo-heal.tistory.com/29

 

AG-GRID, 선택한 데이터 추출 기능

: https://justdo-heal.tistory.com/30

 

AG-GRID, 전체 행 색상 변경

: https://justdo-heal.tistory.com/31

 

AG-GRID, 추가된 행에 색상 적용

: https://justdo-heal.tistory.com/32

 

AG-GRID - 엑셀 내보내기 기능, CVS 내보내기 기능

: https://justdo-heal.tistory.com/33

 

AG-GRID, 체크 박스 기능 추가

: https://justdo-heal.tistory.com/34