如何使用vue js从带有服务器端行模型（数据源）的ag-grid获取总行数？

Question

我正在使用 ag-grid 和 vue，以及服务器端行模型。

我想显示所有行的计数，不仅是显示的行，而且实际上是数据库中所有行的计数。该值 (

rowCount: response.data.lastRow

) 在

createServerSideDatasource()

中可用，但该函数位于我的组件之外，因此我无法在

data()

部分访问该值。我想做这样的事情：

this.totalRows = response.data.lastRow

（参见下面的代码摘录）。

我已经尝试在

cont vm = this

函数中添加

createServerSideDatasource()

，但我没有解决我的问题，因为

vm.totalRows

部分中仍然无法访问

data()

。

这是我的问题：

• 如何在

  response.data.lastRow

  部分中获取外部函数的值（此处为

  data()

  值）？

<template>
    <p>{{ totalRows }}</p>
    <ag-grid
        rowModelType="serverSide"
        ...
    >
    </ag-grid>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue3'
import 'ag-grid-enterprise'
import 'ag-grid-community/styles/ag-grid.css'

export default {
    name: 'list',
    components: {
        AgGridVue
    },  
    data() {
        return {
            gridApi: null,
            totalRows: 0, //==>get the value from createServerSideDatasource()
        }
    },
    
    methods() {
        onGridReady(params) {
            this.gridApi = params.api
            this.gridApi.setGridOption("serverSideDatasource", createServerSideDatasource())
        }
    },
}

function createServerSideDatasource() {
  return {
    getRows: function(params) {
      let sortColumn = null
      let sortDirection = null
      if (params.request.sortModel.length > 0) {
        sortColumn = params.request.sortModel[0].colId
        sortDirection = params.request.sortModel[0].sort
      }

      User.list(params.request.startRow, params.request.endRow, sortColumn, sortDirection, window.searchText).then((response) => {
        if (response.data.success) {
        
          params.success({
            rowData: response.data.rows,
            rowCount: response.data.lastRow,
          })

          //==>make something like that : this.totalRows = response.data.lastRow
          
        }
        else {
          params.fail()
        }
      })
    },
  }
}
</script>

Answer 1

当您使用企业版时，您有状态栏。
在状态栏中，您必须使用以下属性：

{ statusPanel: 'agTotalRowCountComponent' },   

在文档的这一页上，还有一个有关服务器端信息的部分。

关于你的问题，请尝试在函数内引用 vue 实例：

function createServerSideDatasource(vm) { // Receives the component reference
  return {
    getRows: function(params) {
      let sortColumn = null
      let sortDirection = null
      if (params.request.sortModel.length > 0) {
        sortColumn = params.request.sortModel[0].colId
        sortDirection = params.request.sortModel[0].sort
      }

      User.list(params.request.startRow, params.request.endRow, sortColumn, sortDirection, window.searchText).then((response) => {
        if (response.data.success) {
          params.success({
            rowData: response.data.rows,
            rowCount: response.data.lastRow,
          })

          vm.totalRows = response.data.lastRow; // Updates the totalRows property

        } else {
          params.fail()
        }
      })
    },
  }
}