在 ag-grid 中獲取數據

Question

我能夠使用 bootstrap-vue 將數據提取到數據庫中。

我需要轉移到ag-grid，但我不知道該怎么做

有人幫我，這是ag-grid中的代碼：

<template v-if="instituicao">
    <div>
        <button @click="getSelectedRows()">Get Selected Rows</button>
        <ag-grid-vue style="width: 1000px; height: 500px;" 
            class="ag-theme-balham"
            v-model="instituicao.codigo" required
            :floatingFilter="true" 
            :gridReady="onGridReady" 
            :enableColResize="true" 
            :columnDefs="columnDefs" 
            :rowData="rowData" 
            :enableSorting="true" 
            :enableFilter="true">
        </ag-grid-vue>
    </div>
</template>

<script>
import PageTitle from '../template/PageTitle'
import axios from 'axios'
import { baseApiUrl, showError } from '@/global'
import { AgGridVue } from "ag-grid-vue"
import { transformHeader, transformRows } from '../../lib/grid.js'
/* import "ag-grid-enterprise" */

export default {
    name: 'InstituicaoAdmin',
    components: { AgGridVue, PageTitle },
    data() {
        return {
            columnDefs: null,
            rowData: null,
            mode: 'save',
            instituicao: {},
            instituicoes: [],
            fields: [
                { key: 'id', label: 'Id', sortable: true },
                { key: 'name', label: 'Name', sortable: true }
            ],
        }
    },
    methods: {
        onGridReady(params) {
            this.gridApi = params.api;
            this.columnApi = params.columnApi;
            this.gridApi.setHeaderHeight(50);
        },
            sizeToFit() {
            this.gridApi.sizeColumnsToFit();
            // this.autosizeHeaders();
        },
        autoSizeAll() {
            var allColumnIds = [];
            this.columnApi.getAllColumns().forEach(function(column) {
                allColumnIds.push(column.colId);
            });
            this.columnApi.autoSizeColumns(allColumnIds);
        },
        getSelectedRows() {
            const selectedNodes = this.gridApi.getSelectedNodes();
            const selectedData = selectedNodes.map(node => node.data);
            const selectedDataStringPresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');
            alert(`Selected nodes: ${selectedDataStringPresentation}`);
        },
        loadInstituicoes() {
            const url = `${baseApiUrl}/instituicao`
            axios.get(url).then(res => {
                this.instituicoes = res.data
            })
        },
        reset() {
            this.mode = 'save'
            this.instituicao = {}
            this.loadInstituicoes()
        },
        save() {
            const method = this.instituicao.id ? 'put' : 'post'
            const id = this.instituicao.id ? `/${this.instituicao.id}` : ''
            axios[method](`${baseApiUrl}/instituicao${id}`, this.instituicao)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        remove() {
            const id = this.instituicao.id
            axios.delete(`${baseApiUrl}/instituicao/${id}`)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        loadInstituicao(instituicao, mode = 'save') {
            this.mode = mode
            this.instituicao = { ...instituicao }
        }
    },
    beforeMount() {
        this.columnDefs = [
            {headerName: 'Id', field: 'id', sortable: true },
            {headerName: 'Name', field: 'name', sortable: true, filter: true },
            {headerName: 'Price', field: 'price', sortable: true, filter: true }
        ];

        fetch('https://api.myjson.com/bins/15psn9')
            .then(result => result.json())
            .then(rowData => this.rowData = rowData);
    },
    computed: {
        columnDefs() {
        return transformHeader(this.payload.header);
        },
        rowData() {
        return transformRows(this.payload.data.rows, this.columnDefs);
        }
    },    
    mounted() {
        this.loadInstituicoes()
    }
}
</script>

<style>
  @import "../../../node_modules/ag-grid/dist/styles/ag-grid.css";
  @import "../../../node_modules/ag-grid/dist/styles/ag-theme-balham.css";
</style>

我的問題是如何使用 ag-grid 框架進行 GET、PUT、POST 和 DELETE 操作。

Usando o bootstrap-vue, eu poderia executar ou obter o banco de dados através da propriedade "fields"。

<script>
import PageTitle from '../template/PageTitle'
import axios from 'axios'
import { baseApiUrl, showError } from '@/global'

export default {
    name: 'InstituicaoAdmin',
    components: { PageTitle },
    data: function() {
        return {
            mode: 'save',
            instituicao: {},
            instituicoes: [],
            fields: [
                { key: 'id', label: 'Id', sortable: true },
                { key: 'name', label: 'Name', sortable: true }
            ]
        }
    },
    methods: {
        loadInstituicoes() {
            const url = `${baseApiUrl}/instituicao`
            axios.get(url).then(res => {
                this.instituicoes = res.data
            })
        },
        reset() {
            this.mode = 'save'
            this.instituicao = {}
            this.loadInstituicoes()
        },
        save() {
            const method = this.instituicao.id ? 'put' : 'post'
            const id = this.instituicao.id ? `/${this.instituicao.id}` : ''
            axios[method](`${baseApiUrl}/instituicao${id}`, this.instituicao)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        remove() {
            const id = this.instituicao.id
            axios.delete(`${baseApiUrl}/instituicao/${id}`)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        loadInstituicao(instituicao, mode = 'save') {
            this.mode = mode
            this.instituicao = { ...instituicao }
        }
    },
    mounted() {
        this.loadInstituicoes()
    }
}
</script>

Answer 1

我能夠使用 axios 使用解構來解決問題：

    beforeMount() {
        this.columnDefs = [
            {headerName: 'Id', field: 'id', editable: true},
            {headerName: 'Name', field: 'name', editable: true}
        ];
        axios.get(`${baseApiUrl}/instituicao`)
            .then(({data}) => this.rowData = data)
    },