时间戳

首页 > 解决方案 > 如何在行单击时用数据填充指定的详细信息网格

javascript - 如何在行单击时用数据填充指定的详细信息网格

问题描述

我是 Ag-Grid 的新手。我在 JavaScript 中使用它。我正在学习主/细节网格。
我想知道您是否能够在初始初始化之外使用行数据填充详细信息网格。
例如，在我的代码片段中，我有这个语句为所有详细网格设置数据：

getDetailRowData: function (params) {
      params.successCallback(params.data.callRecords);
    }

现在，如果我在网格选项声明中没有该语句怎么办，这将导致我的详细网格没有数据。是否可以在初始网格选项声明之外的详细网格中填充数据，或者可能在单独的函数中填充数据？下面的代码片段 

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,
};

function onFirstDataRendered(params) {
  // arbitrarily expand a row for presentational purposes
  setTimeout(function () {
    params.api.getDisplayedRowAtIndex(1).setExpanded(true);
  }, 0);
}

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

  agGrid
    .simpleHttpRequest({
      url: 'https://www.ag-grid.com/example-assets/master-detail-data.json',
    })
    .then(function (data) {
      gridOptions.api.setRowData(data);
    });
});
<link href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" rel="stylesheet"/>
<link href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css" rel="stylesheet"/>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JavaScript example</title>
        <meta charSet="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <style media="only screen">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                box-sizing: border-box;
                -webkit-overflow-scrolling: touch;
            }

            html {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                overflow: auto;
            }

            body {
                padding: 1rem;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="myGrid" class="ag-theme-alpine" style="height: 100%;">
        </div>
        <script>var __basePath = './';</script>
        <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@25.1.0/dist/ag-grid-enterprise.min.js">
        </script>
        <script src="main.js">
        </script>
    </body>
</html>

标签： javascripthtmlgridag-grid

解决方案

在初始化主网格时，根本不需要拥有所有数据。您可以仅使用主网格所需的数据来初始化主网格。 getDetailRowData仅在展开行时才会调用，此时您可以进行必要的 API 调用并更新详细信息网格，如下所示。

getDetailRowData: function (params) {
  // This can be API call
  Promise.resolve(data).then((res) => {
    params.successCallback(res);
  })
},


const data = [
    {
        "name": "Nora Thomas",
        "account": 177000,
        "calls": 24,
        "minutes": 25.65
    },
    {
        "name": "Mila Smith",
        "account": 177001,
        "calls": 24,
        "minutes": 26.216666666666665
    }
];
const callRecords = {
    "177000": [
        {
            "name": "susan",
            "callId": 555,
            "duration": 72,
            "switchCode": "SW3",
            "direction": "Out",
            "number": "(00) 88542069"
        },
        {
            "name": "susan",
            "callId": 556,
            "duration": 61,
            "switchCode": "SW3",
            "direction": "In",
            "number": "(01) 7432576"
        },
    ],
    "177001": [
        {
            "name": "susan",
            "callId": 579,
            "duration": 23,
            "switchCode": "SW5",
            "direction": "Out",
            "number": "(02) 47485405"
        },
        {
            "name": "susan",
            "callId": 580,
            "duration": 52,
            "switchCode": "SW3",
            "direction": "In",
            "number": "(02) 32367069"
        }
    ]
}

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) {
      Promise.resolve(callRecords[params.data.account]).then((res) => {
        params.successCallback(res);
      })
    },
  },
  onFirstDataRendered: onFirstDataRendered,
};

function onFirstDataRendered(params) {
  // arbitrarily expand a row for presentational purposes
  setTimeout(function () {
    params.api.getDisplayedRowAtIndex(1).setExpanded(true);
  }, 0);
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
  gridOptions.api.setRowData(data);
});
<link href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" rel="stylesheet" />
<link href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css" rel="stylesheet" />
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>JavaScript example</title>
  <meta charSet="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style media="only screen">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    
    html {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      overflow: auto;
    }
    
    body {
      padding: 1rem;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="myGrid" class="ag-theme-alpine" style="height: 100%;">
  </div>
  <script>
    var __basePath = './';
  </script>
  <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@25.1.0/dist/ag-grid-enterprise.min.js">
  </script>
  <script src="main.js">
  </script>
</body>

</html>

推荐阅读