AG Grid - 在不使用 JSON 文件的情况下将数据行添加到 Master Detail答案

【问题标题】：AG Grid - Add rows of data to Master Detail without using JSON fileAG Grid - 在不使用 JSON 文件的情况下将数据行添加到 Master Detail
【发布时间】：2021-01-13 14:26:15
【问题描述】：

我想知道如何将数据行添加到主从表中，但不使用外部 json 文件，而是通过 JS 内联写入行记录

任何人都知道如何解决这个问题

https://www.ag-grid.com/documentation/javascript/master-detail/

var gridOptions = {
  columnDefs: [
    // group cell renderer needed for expand / collapse icons
    { field: 'name', cellRenderer: 'agGroupCellRenderer' },
    { field: 'account' },
    { field: 'calls' },
    { field: 'minutes', valueFormatter: "x.toLocaleString() + 'm'" },
  ],
  defaultColDef: {
    flex: 1,
  },
  masterDetail: true,
  detailCellRendererParams: {
    detailGridOptions: {
      columnDefs: [
        { field: 'callId' },
        { field: 'direction', minWidth: 150 },
        { field: 'number' },
        { field: 'duration', valueFormatter: "x.toLocaleString() + 's'" },
        { field: 'switchCode', minWidth: 150 },
      ],
      defaultColDef: {
        flex: 1,
      },
    },
    getDetailRowData: function (params) {
      // simulate delayed supply of data to the detail pane
      setTimeout(function () {
        params.successCallback(params.data.callRecords);
      }, 1000);
    },
  },
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);

// I dont want to use the external json file
  agGrid
    .simpleHttpRequest({
      url: 'https://www.ag-grid.com/example-assets/master-detail-data.json',
    })
    .then(function (data) {
      gridOptions.api.setRowData(data);
    });
});

【问题讨论】：

当然，您可以随意添加数据，不确定我是否完全理解您的问题。 thisPlunker 有帮助吗？
是的，这正是我所追求的——谢谢

标签： ag-grid master-detail

【解决方案1】：

在gridOptions 上设置rowData 字段，如下所示：

var gridOptions = {
  columnDefs: [
    // group cell renderer needed for expand / collapse icons
    { field: 'name', cellRenderer: 'agGroupCellRenderer' },
    { field: 'account' },
    { field: 'calls' },
    { field: 'minutes', valueFormatter: "x.toLocaleString() + 'm'" },
  ],
  defaultColDef: {
    flex: 1,
  },
  masterDetail: true,
  detailCellRendererParams: {
    detailGridOptions: {
      columnDefs: [
        { field: 'callId' },
        { field: 'direction' },
        { field: 'number', minWidth: 150 },
        { field: 'duration', valueFormatter: "x.toLocaleString() + 's'" },
        { field: 'switchCode', minWidth: 150 },
      ],
      defaultColDef: {
        flex: 1,
      },
    },
    getDetailRowData: function (params) {
      params.successCallback(params.data.callRecords);
    },
  },
  onFirstDataRendered: onFirstDataRendered,
  rowData: myData
};

在这种情况下，myData 看起来像这样：

var myData = [
  {
    name: 'Nora Thomas',
    account: 177000,
    calls: 24,
    minutes: 25.65,
    callRecords: [
      {
        name: 'susan',
        callId: 555,
        duration: 72,
        switchCode: 'SW3',
        direction: 'Out',
        number: '(00) 88542069',
      },
    ],
  },
];

Demo.

【讨论】：