如果单元格不可见，则以编程方式打开编辑模式。 Ag Grid，Vue.js

Question

如果不可见一个单元格，我如何以编程方式打开编辑模式？

在我的情况下，由于大量列，该单元格不可见。 在

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { AgGridVue } from 'ag-grid-vue';
import Vue from 'vue';

const VueExample = {
  template: `
        <div style="height: 100%">
            <div class="example-wrapper">
                <div style="margin-bottom: 5px;">
                    <button style="font-size: 12px" v-on:click="onBtStartEditing()">Start Editing Line 2</button>
                    <button style="font-size: 12px" v-on:click="onBtStopEditing()">Stop Editing</button>
                </div>
                <ag-grid-vue
                
                style="width: 100%; height: 100%;"
                class="ag-theme-alpine"
                :columnDefs="columnDefs"
                @grid-ready="onGridReady"
                :defaultColDef="defaultColDef"
                :editType="editType"
                :rowData="rowData"
                @cell-value-changed="onCellValueChanged"
                @row-value-changed="onRowValueChanged"></ag-grid-vue>
            </div>
        </div>
    `,
  components: {
    'ag-grid-vue': AgGridVue,
  },
  data: function () {
    return {
      columnDefs: [
        {
          field: 'make',
          cellEditor: 'agSelectCellEditor',
          cellEditorParams: {
            values: ['Porsche', 'Toyota', 'Ford', 'AAA', 'BBB', 'CCC'],
          },
        },
        { field: 'model' },
        { field: 'field4', headerName: 'Read Only', editable: true },
        { field: 'price', cellEditor: NumericCellEditor },
        {
          headerName: 'Suppress Navigable',
          field: 'field5',
          suppressNavigable: true,
          minWidth: 200,
        },
        { headerName: 'Read Only', field: 'field6', editable: true },
      ],
      gridApi: null,
      columnApi: null,
      defaultColDef: {
        flex: 1,
        editable: true,
      },
      editType: null,
      rowData: null,
    };
  },
  created() {
    this.editType = 'fullRow';
    this.rowData = getRowData();
    for(let i = 0; i < 1000; ++i) {
      this.columnDefs.push({ headerName: 'Read Only', field: 'field6', editable: true });
    }
  },
  methods: {
    onCellValueChanged(event) {
      console.log(
        'onCellValueChanged: ' + event.colDef.field + ' = ' + event.newValue
      );
    },
    onRowValueChanged(event) {
      var data = event.data;
      console.log(
        'onRowValueChanged: (' +
          data.make +
          ', ' +
          data.model +
          ', ' +
          data.price +
          ', ' +
          data.field5 +
          ')'
      );
    },
    onBtStopEditing() {
      this.gridApi.stopEditing();
    },
    onBtStartEditing() {
      this.gridApi.setFocusedCell(1, 'make');
      this.gridApi.startEditingCell({
        rowIndex: 1,
        colKey: 'make',
      });
    },
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
    },
  },
};

window.getRowData = function getRowData() {
  var rowData = [];
  for (var i = 0; i < 10; i++) {
    rowData.push({
      make: 'Toyota',
      model: 'Celica',
      price: 35000 + i * 1000,
      field4: 'Sample XX',
      field5: 'Sample 22',
      field6: 'Sample 23',
    });
    rowData.push({
      make: 'Ford',
      model: 'Mondeo',
      price: 32000 + i * 1000,
      field4: 'Sample YY',
      field5: 'Sample 24',
      field6: 'Sample 25',
    });
    rowData.push({
      make: 'Porsche',
      model: 'Boxster',
      price: 72000 + i * 1000,
      field4: 'Sample ZZ',
      field5: 'Sample 26',
      field6: 'Sample 27',
    });
  }
  return rowData;
};

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

这里桌子。然后单击开始编辑行2按钮。结果是没有行被传输到编辑模式。这是因为make列从DOM删除。

现在，刷新页面，然后单击开始编辑行2按钮，而无需在任何地方滚动。结果是第二行进入编辑模式。

那么，如果不是所有的单元格，如何将行转移到编辑模式中？ IE在前一种情况下，我希望开始编辑第2行按钮以继续工作。

如果不可见该单元格，我希望不聚焦任何单元格，并且仍然在编辑模式下转移行。

Answer 1

您可以固定“ make”列（暂时或永久）

onBtStartEditing() {
  this.gridColumnApi.applyColumnState({
    state: [{ colId: 'make', pinned: 'left' }],
    defaultState: { pinned: null },
  });
  this.gridApi.setFocusedCell(1, 'make');
  this.gridApi.startEditingCell({
    rowIndex: 1,
    colKey: 'make',
  });
},

onBtStopEditing() {
  this.gridColumnApi.applyColumnState({
    state: [{ colId: 'make', pinned: null }],
    defaultState: { pinned: null },
  });
  this.gridApi.stopEditing();
},

Answer 2

我发现的另一个选项是将suppresscolumnvirtualisationation设置为true。这样，整个行一直都被吸引到HTML（即使是最正确的滚动）。这样，我们可以确定集中的单元格将一直存在，因此编辑模式将被打开。

更多详细信息在这里。