JSON에서 AG 메쉬 열 동적으로 만들기

이 블로그에서는 JSON 객체를 동적으로 구성하고 API 호출에서 AG 메쉬로 읽는 방법을 보여 줍니다.
API에서 JSON 정보를 읽고 반환된 JSON 객체의 키를 사용하여 열 머리글 이름을 구성하고 격자에 반환된 데이터를 표시합니다.

Short Answer

Example of Setting Column Definitions Dynamically From JSON

Abstracting Column Creation

A More Complicated Example

Using Default Column Definitions

Live Code

Summary

이 문제를 처리하는 데 필요한 정보는 저희 Updating Column Definitions의 문서에 포함되어 있습니다.AG Grid의 정상적인 사용은 특정한 데이터 집합을 제어된 방식으로 보여주는 것으로 열의 형식, 편집, 제목 이름 등을 미리 설정할 수 있다.
만약에 우리가 JSON 파일의 데이터를 동태적으로 설정한다면 우리는 풍부한 사용자 체험을 제공할 수 없다. 왜냐하면 우리는 어떤 데이터가 나올지 모르고 열의 이름 정보만 있기 때문이다.

간단한 대답

JSON에서 열 정의를 설정하는 방법은 다음과 같습니다.

JSON 데이터

에서 키 얻기

은 API를 사용하여 getColumnDefs()을 호출하여 격자에서 열 정의를 가져옵니다.

수정열 정의수 그룹 키

수정 배열을 사용하려면 API를 사용하여 setColumnDefs(colDefs) 설정 정의를 호출합니다.

열 정의 수조는 ColDef개의 대상을 포함하고 이 대상의 속성은 Column Def Properties의 문서에서 정의한다.
가장 중요한 속성은 field에서 비치는 rowData의 명칭이다.
예컨대

const columnDefs = [{field: 'make'}];

JSON에서 열 정의를 동적으로 설정하는 예

Getting Started in 5 Minutes with JavaScript 설명서의 예제를 사용합니다.
블로그 예시 미리 열 정의를 만듭니다.

    const columnDefs = [
        {headerName: 'Make', field: 'make'},
        {headerName: 'Model', field: 'model'},
        {headerName: 'Price', field: 'price', editable: true}
    ];

이것은 API 호출에서 반환된 데이터를 매핑하고 field 값을 사용하여 열을 데이터에 연결합니다.

[
  { "make": "Porsche", "model": "Boxter", "price": 72000 },
  { "make": "Ford", "model": "Mondeo", "price": 32000 },
  { "make": "Ford", "model": "Mondeo", "price": 32000 },
  { "make": "Toyota", "model": "Celica", "price": 35000 },
  { "make": "Toyota", "model": "Celica", "price": 35000 },
  ...
]  

그리고 예시 코드는 JSON에서 데이터를 가져와 격자 행 데이터로 사용합니다.

    fetch('https://www.ag-grid.com/example-assets/row-data.json').then(function (response) {
        return response.json();
    }).then(function (data) {
        gridOptions.api.setRowData(data);
    })

JSON에서 데이터를 동적으로 설정할 때 격자에 있는 editable: true 속성을 잃어버립니다.
미리 정의된 열 정의를 삭제하면 JSON 파일을 읽을 때 다음과 같이 구성할 수 있습니다.

    const columnDefs = [
    ];

예제 데이터를 읽고 헤더를 설정하고 채우려면 다음과 같이 하십시오.

    fetch('https://www.ag-grid.com/example-assets/row-data.json').
    then(function (response) {

        return response.json();

    }).then(function (data) {

        // set the column headers from the data

        const colDefs = gridOptions.api.getColumnDefs();
        colDefs.length=0;
        const keys = Object.keys(data[0])
        keys.forEach(key => colDefs.push({field : key}));
        gridOptions.api.setColumnDefs(colDefs);

        // add the data to the grid

        gridOptions.api.setRowData(data);
    })

코드를 더욱 상세하게 해석하다.const colDefs = gridOptions.api.getColumnDefs();격자에서 열 정의를 가져와 colDefs 그룹에 저장합니다.colDefs.length=0;길이를 설정하여 배열을 지웁니다.const keys = Object.keys(data[0])JSON의 첫 번째 객체에서 모든 키를 가져옵니다.keys.forEach(key => colDefs.push({field : key}));각 키를 colDefs 속성의 값으로 field 그룹에 추가합니다.gridOptions.api.setColumnDefs(colDefs);격자선에서 열 정의를 재설정합니다.gridOptions.api.setRowData(data);격자에 데이터를 설정합니다.

추상 칼럼 창작

만약 내가 자주 이렇게 한다면, 나는 그것을 하나의 함수로 추상화할 것이다.
객체를 지정하고 일치 키에 열 정의를 설정합니다.

function dynamicallyConfigureColumnsFromObject(anObject){
    const colDefs = gridOptions.api.getColumnDefs();
    colDefs.length=0;
    const keys = Object.keys(anObject)
    keys.forEach(key => colDefs.push({field : key}));
    gridOptions.api.setColumnDefs(colDefs);
}

더욱 복잡한 예

앞의 예에서 우리는 GET에서 요청한 간단한 JSON 파일만 처리했다.
동일한 프로세스를 사용하여 API를 처리하지만 fetch에 대한 맞춤형 구성이 더 필요할 수 있습니다.
이 예에서는 swapi.dev의 스타워즈 API를 사용합니다.api/people 엔드포인트를 호출하면 더 복잡한 JSON 객체가 반환됩니다.

{
    "count": 82,
    "next": "https://swapi.dev/api/people/?page=2",
    "previous": null,
    "results": [
        {
            "name": "Luke Skywalker",
            "height": "172",
            "mass": "77",
            ...
        }
    ]
}

전체 JSON이 아닌 results 배열을 처리해야 합니다.content-type에 GET 헤더를 추가해야 합니다. 그렇지 않으면 Swapi입니다.dev가 HTML 페이지를 반환합니다.
Swapi 보기:

    fetch('https://swapi.dev/api/people/',
        { 
            method: 'GET',
            headers: {
                        'Content-Type': 'application/json'
                    }
        }
  ).then(function (response) {
        return response.json();
    }).then(function (data) {
        dynamicallyConfigureColumnsFromObject(data.results[0])
        gridOptions.api.setRowData(data.results);
    })

기본 열 정의 사용

더욱 풍부한 사용자 체험을 추가하는 가장 간단한 방법은 모든 동적 생성 열에 적용될 default column definitions을 설정하는 것이다.
기본 열 정의를 사용하면 전역 단계에서 열을 설정할 수 있습니다.각 열을 정렬하고 필터링하기

const gridOptions = {

    defaultColDef: {
        sortable: true,
        filter: 'agTextColumnFilter',
        resizable: true
    },

필드에 있는 정보 형식에 대한 더 많은 정보를 얻을 수 있습니다. 날짜, 숫자, 열 크기 조정 등 특정한 필터 형식을 설정할 수 있습니다. 이것이 바로 우리가 열 정의를 미리 설정하는 경향이 있는 이유입니다.
API의 column properties을 사용하여 기본 열 정의를 구성합니다.

실시간 코드

Plunker에서 이 예의 코드를 찾을 수 있습니다:
https://plnkr.co/edit/8uZMkESggrlMFyox
그리고 dynamic-columns-json 폴더의 환매 협의 github.com/ag-grid/javascript-data-grid.

요약

AG Grid의 대부분의 용례에는 미리 정의된 열 제목이 있는데, 이것은 사용 가능한 격자 설정을 사용할 수 있기 때문이다. 예를 들어 칸 내 편집 등이다.
AG Grid API는 열 정의의 전체 구성을 제공합니다.

Column Definitions

Updating Column Definitions

이것은 실행할 때 열을 설정할 수 있도록 합니다.