文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用行上的数据填充指定的详细信息网格

问如何使用行上的数据填充指定的详细信息网格
EN

Stack Overflow用户

提问于 2021-04-24 00:21:44

回答 1查看 594关注 0票数 0

我对银格栅很陌生。我正在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>

grid

ag-grid

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-24 14:58:14

在初始化主网格时，完全没有必要拥有所有的数据。您可以仅用主网格所必需的数据初始化主网格。只有在扩展行时才会调用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67238205

复制

相似问题

问如何使用行上的数据填充指定的详细信息网格
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用行上的数据填充指定的详细信息网格EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用行上的数据填充指定的详细信息网格
EN