각도 그리드 ag-grid columnDefs 동적으로 변경

각도 그리드 ag-grid columnDefs 동적으로 변경

는 에에에 대해서.columnDefs동적으로 변화합니다. gridOptions my gridOptions:

$scope.gridOptions = {
  columnDefs: [],
  enableFilter: true,
  rowData: null,
  rowSelection: 'multiple',
  rowDeselection: true
};

그리고 서버에서 데이터를 가져올 때:

$scope.customColumns = [];

$http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).success(function (data) {
    angular.forEach(data.Columns, function (c) {
        $scope.customColumns.push(
            {
                headerName: c.Name,
                field: c.Value,
                width: c.Width
            }
        );
    });

    $scope.gridOptions.columnDefs = $scope.customColumns;

    $scope.gridOptions.rowData = data.Products;
    $scope.gridOptions.api.onNewRows();
}).error(function () {

});

주의: 여기 c는 서버로부터의 컬럼오브젝트입니다.

하여 $가 있지만 $scope.gridOptions.columnDefs는 공백 그리드를 사용합니다.$scope.customColumns배열은 오른쪽 생성된 열 개체로 채워집니다.이 버그가 맞습니까, 아니면 제가 잘못하고 있는 건가요?

은 grid.ag-grid 에서 한 번 됩니다.초기화 후 열을 변경할 경우 그리드에 알려야 합니다.는 '아까운'이라고 부르면 .gridOptions.api.setColumnDefs()

이 api 메서드의 자세한 내용은 ag-grid 문서를 참조하십시오.

이건 이미 고쳐진 것 같아요.

나는 지금 최신 앵글과 ag-grid로 이와 같은 것을 할 수 있다.여기서 ngx를 사용하고 있지만 이 경우 rowData에서 반환되는 데이터의 속성 이름에 따라 열 정의를 가져오므로 열 정의를 비동기적으로 가져올 수 있습니다.

먼저 백엔드 API에서 행 데이터를 가져옵니다.그런 다음 데이터를 가져오면 Select for 열에서 반환된 데이터의 헤더를 속성에 매핑하는 작업을 수행합니다.

데이터는 헤더 없이 표시되지 않습니다. 헤더가 있는 즉시 모든 열 정의와 데이터로 그리드를 다시 그립니다.

<ag-grid-angular 
    style="width: 100%; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData$ | async" 
    [columnDefs]="columnsDefs$ | async"
    >
</ag-grid-angular>


export class AgGridComponent {
    @Select(MyState.getColumnDefs) public columnsDefs$!: Observable<ReadonlyArray<any>>;

    @Select(MyState.getRowData) public rowData$!: Observable<ReadonlyArray<any>>;
}

각지다.
데모를 참조해 주세요.

해 주세요.ag-grid-angular컴포넌트의 columnDefs가 같은 이름의 컴포넌트의 속성에 바인딩되어 있습니다.

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 300px;"
    id="myGrid"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"

에 대한 .app.component.ag-Grid에 됩니다.를 들어, 의 첫 번째 하십시오.app.component의 컨스트럭터 함수 "컨스트럭터

constructor() {
    this.columnDefs = colDefsAthleteExcluded;
}

ag-Grid 인스턴스에서 열을 추가하거나 제거할 수 있습니다. columnDefs 바인딩 속성을 업데이트하여 새 열 정의 집합을 전달하기만 하면 됩니다.

• 이전에 존재하지 않았던 열이 ag-Grid 인스턴스에 추가됩니다.

• 새 집합에 포함되지 않은 열은 ag-Grid 인스턴스에서 제거됩니다.

"선수 열 포함" 및 "선수 열 제외" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// removes the athlete column
onBtExcludeAthleteColumn() {
    this.columnDefs = colDefsAthleteExcluded;
}

// adds the athlete column
onBtIncludeAthleteColumn() {
    this.columnDefs = colDefsAthleteIncluded;
}

컬럼 메서드를 ag-Grid API 메서드라고 .getColumnDefs()그리드의 현재 열에 대한 참조를 가져옵니다.그런 다음 columnDefs 바인딩 속성을 업데이트하기 전에 원하는 속성을 변경하여 열 위에 매핑합니다.

그런 다음 ag-Grid는 기존 열을 ag-Grid 인스턴스의 열과 일치시키고 변경된 열을 업데이트합니다.

"Set HeaderNames" 및 "Remove HeaderNames" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// sets each columns headerName property
setHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = "C" + index;
    });
    this.columnDefs = columnDefs;
}


// clears each columns headerName property
removeHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = undefined;
    });
    this.columnDefs = columnDefs;
}

반응하다.
데모를 참조해 주세요.

리액트 ag-Grid ag-Grid 。에서는 상태 를 만들고 을 알 수 columns 되는 ★★★agGridColumn을 펼칩니다.

const App = () => {
    const [columns, setColumns] = useState(colDefsAthleteExcluded);

    return (
        {columns.map(column => (
            <AgGridColumn {...column} key={column.field} />
        ))}

하려면 단순히 '열'을 .setColumnssetState 、 set set set set set set 。

• 이전에 존재하지 않았던 열이 ag-Grid 인스턴스에 추가됩니다.
• 새 집합에 포함되지 않은 열은 ag-Grid 인스턴스에서 제거됩니다.

"선수 열 포함" 및 "선수 열 제외" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// removes the athlete column
const onBtExcludeAthleteColumn = () => {
    setColumns(colDefsAthleteExcluded);
};

// adds the athlete column
const onBtIncludeAthleteColumn = () => {
    setColumns(colDefsAthleteIncluded);
};

컬럼 메서드를 ag-Grid API 메서드라고 .getColumnDefs()그리드의 현재 열에 대한 참조를 가져옵니다.열 위에 한 후 호출합니다.setColumns 할 수 있습니다.columns상태 변수

그런 다음 ag-Grid는 기존 열을 ag-Grid 인스턴스의 열과 일치시키고 변경된 열을 업데이트합니다.

"Set HeaderNames" 및 "Remove HeaderNames" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// sets each columns headerName property
const setHeaderNames = () => {
    const newColumns = gridApi.getColumnDefs();
    newColumns.forEach((newColumn, index) => {
        newColumn.headerName = "C" + index;
    });
    setColumns(newColumns);
};

// clears each columns headerName property
const removeHeaderNames = () => {
    const newColumns = gridApi.getColumnDefs();
    newColumns.forEach((newColumn, index) => {
        newColumn.headerName = undefined;
    });
    setColumns(newColumns);
};

Vue.
데모를 참조해 주세요.

아래를 보시면,ag-grid-vue컴포넌트의 columnDefs가 같은 이름의 컴포넌트의 속성에 바인딩되어 있습니다.

<ag-grid-vue
    style="width: 100%; height: 300px;"
    class="ag-theme-alpine"
    id="myGrid"
    :columnDefs="columnDefs"

「 」에 모든 columnDefsVue ag-Grid ag-Grid 。를 들어, 의 첫 번째 하십시오.beforeMount다음 중 하나:

beforeMount() { 
    this.columnDefs = colDefsAthleteExcluded;
}

인스턴스에 하려면 ag-Grid를 합니다.columnDefs바인딩된 속성, 새 열 정의 집합을 전달합니다.

• 이전에 존재하지 않았던 열이 ag-Grid 인스턴스에 추가됩니다.
• 새 집합에 포함되지 않은 열은 ag-Grid 인스턴스에서 제거됩니다.

"선수 열 포함" 및 "선수 열 제외" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// removes the athlete column
btnExcludeAthleteColumn() {
    this.columnDefs = colDefsAthleteExcluded;
},  
// adds the athlete column
btnIncludeAthleteColumn() {
    this.columnDefs = colDefsAthleteIncluded;
}

컬럼 메서드를 ag-Grid API 메서드라고 .getColumnDefs()그리드의 현재 열에 대한 참조를 가져옵니다. 열한 후 합니다.columnDefs속박된 속성.

그런 다음 ag-Grid는 기존 열을 ag-Grid 인스턴스의 열과 일치시키고 변경된 열을 업데이트합니다.

"Set HeaderNames" 및 "Remove HeaderNames" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// sets each columns headerName property
setHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = "C" + index;
    });
    this.columnDefs = columnDefs;
}


// clears each columns headerName property
removeHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = undefined;
    });
    this.columnDefs = columnDefs;
}

바닐라 JS
데모를 참조해 주세요.

바닐라 JS를 사용하는 경우 JavaScript에는 반응성 데이터에 대한 내장 메커니즘이 없기 때문에 열 정의를 애플리케이션 내의 속성에 바인딩할 수 없습니다. 메서드 ag-Grid API를 합니다.setColumnDefs()을 사용법

인스턴스에 하려면 ag-Grid를 합니다.setColumnDefsAPI, api 、 새 、 api 、 api api api api api api api 。

• 이전에 존재하지 않았던 열이 ag-Grid 인스턴스에 추가됩니다.
• 새 집합에 포함되지 않은 열은 ag-Grid 인스턴스에서 제거됩니다.

"선수 열 포함" 및 "선수 열 제외" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// removes athlete column
function onBtExcludeAthleteColumn() {
    gridOptions.api.setColumnDefs(colDefsAthleteExcluded);
}

// adds athlete column
function onBtIncludeAthleteColumn() {
    gridOptions.api.setColumnDefs(colDefsAthleteIncluded);
}

컬럼 메서드를 ag-Grid API 메서드라고 .getColumnDefs()그리드의 현재 열에 대한 참조를 가져옵니다.열 위에 한 후 호출합니다.setColumnDefs(colDefs)갱신된 컬럼을 전달합니다.

그런 다음 ag-Grid는 기존 열을 ag-Grid 인스턴스의 열과 일치시키고 변경된 열을 업데이트합니다.

"Set HeaderNames" 및 "Remove HeaderNames" 버튼의 이벤트 핸들러에서 이 코드를 참조하십시오.

// sets each columns headerName property
function setHeaderNames() {
    var columnDefs = gridOptions.api.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = "C" + index;
    });
gridOptions.api.setColumnDefs(columnDefs);
}

// clears each columns headerName property
function removeHeaderNames() {
    var columnDefs = gridOptions.api.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = undefined;
    });
    gridOptions.api.setColumnDefs(columnDefs);
}

웹 사이트의 블로그 투고 전문을 읽거나 문서를 참조하여 ag-Grid를 사용하여 구현할 수 있는 다양한 시나리오를 확인하십시오.

Ahmed Gadir | 개발자 @ ag-Grid

언급URL : https://stackoverflow.com/questions/31743534/angular-grid-ag-grid-columndefs-dynamically-change