使用 colId 设置 Ag Grid 中的 pinnedBottomRowData

Question

我在 ag-Grid Vue 2 中的固定行中显示数据时遇到问题。我使用

pinnedBottomRowData

为固定行提供数据，但即使固定行可见，该行仍为空。由于我的数据来自 JSON 文件，因此我在字段：属性中使用点表示法，如下所示：

field: "supplier.number"

。但是，

this.gridApi.setPinnedBottomRowData

不适用于点表示法，这就是我添加

colId: "supplierNumber"

的原因。但即便如此，它也不起作用。如果我删除点符号并使用

field: "supplierNumber"

，那么它就可以了。我无法修改 JSON，因为我从外部源获取它。

最坏的情况是使用 JSON 中的数据创建一个新对象，但我现在想避免这种情况。谁能帮我解决这个问题吗？

这是我的代码： 银网格

          <ag-grid-vue
            style="flex: auto; flex-direction: row; height: 650px"
            :class="cssClass"
            :columnDefs="columnDefs"
            :rowData="supplierList"
            :gridOptions="columnOptions"
            :alwaysShowHorizontalScroll="true"
            @grid-ready="onGridReady"
        ></ag-grid-vue>

列定义：

   columnDefs: [
        {
          headerName: "Information",
          children: [
            {
              headerName: "Description",
              colId: 'supplierDesc',
              field: "supplier.desc",
            },
            {
              headerName: "number",
              colId: "supplierNumber",
              field: "supplier.number"
            },
          ],
        },
        {
          headerName: "Header2",
          children: [
            {
                  headerName: "Supplier Budget",
                  colId:"supplierBudget",
                  field: "year2024.budget",
                  cellRenderer: (params) => this.currencyFormatter(params.value, "€"),
            },

              ],}, ],

onGridReady 函数

onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;

      this.createData('Total:', this.supplierList);
    },

这是 createData 函数

  createData(prefix,list) {
      let calcTotalCols = ['supplierDesc', 'supplierNumber','supplierBudget'];
      let total = [{}];
      // initialize all total columns to zero
      calcTotalCols.forEach(params => { total[0][params] = 0 });
      // calculate all total columns
      calcTotalCols.forEach(params => {
        list.forEach(line => {
          total[0][params] += line[params];
        });
      });
      let result = [];

      result.push({
        supplierDesc: prefix + total[0]['supplierDesc'],
        supplierNumber: prefix + total[0]['supplierNumber'],
        supplierBudget: prefix + total[0]['supplierBudget'],
      });

      this.gridApi.setPinnedBottomRowData(result);
    },

Answer 1

为了避免直接修改JSON数据，你可以这样做：

createData(prefix, list) {
  let calcTotalCols = ['supplierDesc', 'supplierNumber', 'supplierBudget'];
  let total = {};
  calcTotalCols.forEach(col => { total[col] = 0 });
  calcTotalCols.forEach(col => {
    list.forEach(line => {
      const fields = col.split('.');
      let value = line;
      fields.forEach(field => {
        if (value && typeof value === 'object') {
          value = value[field];
        }
      });
      total[col] += value || 0;
    });
  });

  let result = {};

  calcTotalCols.forEach(col => {
    result[col] = prefix + total[col];
  });

  this.gridApi.setPinnedBottomRowData([result]);
},