拖放后的 AG-Grid 数据更新答案

【问题标题】：AG-Grid data update after drag & drop拖放后的 AG-Grid 数据更新
【发布时间】：2021-03-10 12:38:28
【问题描述】：

我是 AG-Grid 的新手，我正在尝试在我的 Vue 应用程序中使用它。我试图弄清楚为什么在拖放事件之后数据没有得到更新。我在这里创建了一个小例子：https://plnkr.co/edit/vLnMXZ5y1VTDrhd5

import Vue from 'vue';
import { AgGridVue } from '@ag-grid-community/vue';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

const VueExample = {
  template: `
        <div style="height: 100%">
            <button @click="logData">Log data</button>
            <ag-grid-vue
                style="width: 100%; height: 100%;"
                class="ag-theme-alpine"
                id="myGrid"
                :gridOptions="gridOptions"
                @grid-ready="onGridReady"
                :columnDefs="columnDefs"
                :defaultColDef="defaultColDef"
                :rowDragManaged="true"
                :animateRows="true"
                :modules="modules"
                :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    'ag-grid-vue': AgGridVue,
  },
  data: function () {
    return {
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      columnDefs: null,
      defaultColDef: null,
      modules: [ClientSideRowModelModule],
      rowData: null,
    };
  },
  beforeMount() {
    this.gridOptions = {};
    this.columnDefs = [
      {
        field: 'Month',
        rowDrag: true,
      },
      { field: 'Max temp (C)' },
      { field: 'Min temp (C)' },
      { field: 'Days of air frost (days)' },
      { field: 'Sunshine (hours)' },
      { field: 'Rainfall (mm)' },
      { field: 'Days of rainfall >= 1 mm (days)' },
    ];
    this.defaultColDef = {
      width: 100,
      sortable: true,
      filter: true,
    };
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.gridColumnApi = this.gridOptions.columnApi;
  },
  methods: {
    logData() {
      this.rowData.forEach(function(item) {
        console.log(item.Month);
      });
    },

    onGridReady(params) {
      const httpRequest = new XMLHttpRequest();
      const updateData = (data) => {
        this.rowData = data;
      };

      httpRequest.open(
        'GET',
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/weather_se_england.json'
      );
      httpRequest.send();
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          updateData(JSON.parse(httpRequest.responseText));
        }
      };
    },
  },
};

new Vue({
  el: '#app',
  components: {
    'my-component': VueExample,
  },
});

如果您单击“记录数据”按钮，您可以在控制台中看到数据未与视图同步更新。我怎样才能做到这一点？谢谢！

【问题讨论】：

标签： vue.js drag-and-drop ag-grid

【解决方案1】：

根据this page，改变网格中的行顺序不会改变rowData的顺序。

如果您想记录网格中月份的顺序，您可以使用this.gridApi.forEachNode(node, index)，如同一页面的状态 3 中所述。您可以像这样编写logData() 方法：

logData() {
  this.gridApi.forEachNode(node => console.log(node.data.Month));
}

【讨论】：

这不是“日志问题”，我不需要打印出来...我想让我的数据模型与视图同步

【解决方案2】：

我找到了添加@row-drag-end="rowDragEnd" 事件的解决方案；我在这里更新了示例：https://plnkr.co/edit/vLnMXZ5y1VTDrhd5

<ag-grid-vue
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    id="myGrid"
    :gridOptions="gridOptions"
    @grid-ready="onGridReady"
    :columnDefs="columnDefs"
    :defaultColDef="defaultColDef"
    :rowDragManaged="true"
    @row-drag-end="rowDragEnd"
    :animateRows="true"
    :modules="modules"
    :rowData="rowData"></ag-grid-vue>

rowDragEnd: function(event) {
  var itemsToUpdate = [];

  this.gridApi.forEachNodeAfterFilterAndSort(function (rowNode) {
    itemsToUpdate.push(rowNode.data);
  });

  this.rowData = itemsToUpdate;
},

【讨论】：