ag-grid 셀 편집기-백엔드에 데이터를 저장하는 방법

user3732317

각도 js에서 1 / 많은 셀을 편집 한 후 백엔드 서비스에 데이터를 저장하는 방법을 보여주는 예제로 저를 도와 주시겠습니까? 사용자 지정 셀 편집기를 작성하고 ag grid의 기본 셀 편집기를 사용하는 방법에 대한 예제를 찾았지만 편집 내용을 백엔드 서비스에 저장하는 코드를 어디에 어떻게 연결해야하는지 알 수 없습니까?

웬준

Ag-Grid에 데이터를 저장하는 방법에는 두 가지가 있습니다.

1) 모든 데이터를 가져 와서 모든 것을 백엔드로 보냅니다.

2) 변경 한 행만 가져 와서이 행을 백엔드로 보냅니다. 특정 행에 대한 특정 변경 사항을 수신하려면 onCellValueChanged구성 요소 템플릿에서 ag-grid 구성 요소를 정의 할 때 이벤트 바인딩 을 사용할 수 있습니다 . 기본적으로 셀에 변경 사항이있을 때마다 전체 행이 수정 된 것으로 '표시'됩니다 (사용자 정의 속성 modified을 true로 할당 ).

수정 된 행을 백엔드로 보내야하는 경우 모든 행 데이터를 가져 와서 'modified'속성이와 같은 행을 필터링합니다 true.

구성 요소에서 Ag-grid의 매개 변수 API를 초기화하십시오.

아래 코드는 # 2에 대한 것입니다.

 <ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)"
>

component.ts에서 변경할 때마다 onRowValueChanged 메서드가 실행됩니다.

export class YourComponent {
  private gridApi;
  private gridColumnApi;
   .
   . 
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }

  onCellValueChanged(event) {
    //console.log(event) to test it
    event.data.modified = true;
  }

  saveModifiedRows() {
    const allRowData = [];
    this.gridApi.forEachNode(node => allRowData.push(node.data));
    const modifiedRows = allRowData.filter(row => row['modified']);
    // add API call to save modified rows

  }

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

어떻게 경우 FireStore에서 서식있는 텍스트 편집기의 데이터를 저장하는 방법?

분류에서Dev

Ag-Grid 테이블에 동적 행 클래스를 추가하는 방법

분류에서Dev

셀 편집으로 트리거되는 비동기 메서드 완료 전후에 Ag Grid의 셀 스타일을 어떻게 변경합니까?

분류에서Dev

AG-GRID : 행에 확장 / 축소 기능이 있고 확장 영역에 사용자 지정 콘텐츠를 표시하는 방법이 있습니까?

분류에서Dev

Ag Grid Pivot 모드에서 다른 열 데이터를 도구 설명으로 표시하는 방법은 무엇입니까?

분류에서Dev

react js에서 ag-grid 행 셀의 기본 글꼴 크기를 변경하는 방법은 무엇입니까?

분류에서Dev

Angular ag-grid : 셀에서 HTML을 렌더링하는 방법은 무엇입니까?

분류에서Dev

ag-Grid에서 편집 된 셀의 스타일을 변경하는 방법은 무엇입니까?

분류에서Dev

ag-Grid 셀 편집기 내에서 사용자 지정 지시문을 사용할 때 writeValue () 전에 포커스 이벤트가 호출됩니다.

분류에서Dev

Ag Grid가 cellRendererSelector를 통해 빈 셀을 표시하도록하는 방법

분류에서Dev

Ag-Grid에서 셀 내용을 세로로 가운데로 만드는 방법은 무엇입니까?

분류에서Dev

ag-grid 셀 필드 값에 열거 형 값을 표시하는 방법은 무엇입니까?

분류에서Dev

이벤트에서 Ag-Grid를 다시 초기화하는 방법은 무엇입니까?

분류에서Dev

셀의 데이터와 동일한 값인 ag-grid에 기본 headerTooltip을 추가하는 방법은 무엇입니까?

분류에서Dev

Ag-Grid exportDataAsExcel의 기본 매개 변수를 설정하는 방법

분류에서Dev

동일한 행의 다른 셀에있는 데이터를 기반으로 한 셀에서 인라인 편집을 비활성화하는 방법

분류에서Dev

JComboBox를 셀 편집기로 사용하는 JTable 셀에서 포커스 편집

분류에서Dev

UI 그리드 편집 셀 기능에서 백엔드 나머지 API를 사용하여 업데이트 된 데이터 저장

분류에서Dev

편집 가능한 드롭 다운 셀로 ui-grid에 읽을 수있는 데이터 표시

분류에서Dev

Kendo Grid : 현재 편집을 취소 한 후 다시 그리드 셀로 포커스를 설정하는 방법

분류에서Dev

나노 편집기를 사용하여 bash_profile에 저장하는 방법

분류에서Dev

scala.swing.Table에서 ComboBox를 셀 편집기로 추가하는 방법은 무엇입니까?

분류에서Dev

편집 셀의 AG 그리드 터치 이벤트

분류에서Dev

Java Swing JTable에서 이중 셀을 편집하는 방법

분류에서Dev

jqgrid-저장하기 전에 편집 할 때 손실 된 셀 데이터

분류에서Dev

편집 된 JTable 셀의 레코드를 데이터베이스로 업데이트하는 방법

분류에서Dev

tableview에서 편집하고 데이터베이스에 저장하는 방법

분류에서Dev

새 데이터를 기존 셀에 저장하는 방법은 무엇입니까?

분류에서Dev

편집 텍스트에서 기록 된 데이터를 조작하는 방법

Related 관련 기사

  1. 1

    어떻게 경우 FireStore에서 서식있는 텍스트 편집기의 데이터를 저장하는 방법?

  2. 2

    Ag-Grid 테이블에 동적 행 클래스를 추가하는 방법

  3. 3

    셀 편집으로 트리거되는 비동기 메서드 완료 전후에 Ag Grid의 셀 스타일을 어떻게 변경합니까?

  4. 4

    AG-GRID : 행에 확장 / 축소 기능이 있고 확장 영역에 사용자 지정 콘텐츠를 표시하는 방법이 있습니까?

  5. 5

    Ag Grid Pivot 모드에서 다른 열 데이터를 도구 설명으로 표시하는 방법은 무엇입니까?

  6. 6

    react js에서 ag-grid 행 셀의 기본 글꼴 크기를 변경하는 방법은 무엇입니까?

  7. 7

    Angular ag-grid : 셀에서 HTML을 렌더링하는 방법은 무엇입니까?

  8. 8

    ag-Grid에서 편집 된 셀의 스타일을 변경하는 방법은 무엇입니까?

  9. 9

    ag-Grid 셀 편집기 내에서 사용자 지정 지시문을 사용할 때 writeValue () 전에 포커스 이벤트가 호출됩니다.

  10. 10

    Ag Grid가 cellRendererSelector를 통해 빈 셀을 표시하도록하는 방법

  11. 11

    Ag-Grid에서 셀 내용을 세로로 가운데로 만드는 방법은 무엇입니까?

  12. 12

    ag-grid 셀 필드 값에 열거 형 값을 표시하는 방법은 무엇입니까?

  13. 13

    이벤트에서 Ag-Grid를 다시 초기화하는 방법은 무엇입니까?

  14. 14

    셀의 데이터와 동일한 값인 ag-grid에 기본 headerTooltip을 추가하는 방법은 무엇입니까?

  15. 15

    Ag-Grid exportDataAsExcel의 기본 매개 변수를 설정하는 방법

  16. 16

    동일한 행의 다른 셀에있는 데이터를 기반으로 한 셀에서 인라인 편집을 비활성화하는 방법

  17. 17

    JComboBox를 셀 편집기로 사용하는 JTable 셀에서 포커스 편집

  18. 18

    UI 그리드 편집 셀 기능에서 백엔드 나머지 API를 사용하여 업데이트 된 데이터 저장

  19. 19

    편집 가능한 드롭 다운 셀로 ui-grid에 읽을 수있는 데이터 표시

  20. 20

    Kendo Grid : 현재 편집을 취소 한 후 다시 그리드 셀로 포커스를 설정하는 방법

  21. 21

    나노 편집기를 사용하여 bash_profile에 저장하는 방법

  22. 22

    scala.swing.Table에서 ComboBox를 셀 편집기로 추가하는 방법은 무엇입니까?

  23. 23

    편집 셀의 AG 그리드 터치 이벤트

  24. 24

    Java Swing JTable에서 이중 셀을 편집하는 방법

  25. 25

    jqgrid-저장하기 전에 편집 할 때 손실 된 셀 데이터

  26. 26

    편집 된 JTable 셀의 레코드를 데이터베이스로 업데이트하는 방법

  27. 27

    tableview에서 편집하고 데이터베이스에 저장하는 방법

  28. 28

    새 데이터를 기존 셀에 저장하는 방법은 무엇입니까?

  29. 29

    편집 텍스트에서 기록 된 데이터를 조작하는 방법

뜨겁다태그

보관