新手求助：如何将PostgreSQL数据在ag-Grid中展示？

1. database.js 查询结果引用的问题 #

你的database.js存在多处关键错误，导致无法正确获取并返回查询结果：

• 异步查询中的callback未定义，无法传递结果
• client.end是方法，需调用client.end()才能关闭连接
• 当前的自执行函数导出逻辑错误，异步操作的结果无法被外部获取

修正后的database.js（改用Promise处理异步，更符合现代JS写法）：

const { Client } = require("pg");

const client = new Client({
  host: "<IPaddress>",
  user: "<username>",
  port: 5432,
  password: "<password>",
  database: "postgres"
});

// 封装查询方法为Promise，方便外部获取结果
async function getTestData() {
  try {
    await client.connect();
    const res = await client.query('select * from test1');
    return res.rows; // 返回查询到的行数据，格式为数组对象
  } catch (err) {
    console.error('查询出错:', err);
    throw err;
  } finally {
    await client.end(); // 确保数据库连接关闭
  }
}

module.exports = { getTestData };

2. 数据结构兼容性问题 #

ag-Grid要求的数据源是数组形式的对象集合，每个对象的属性名需与columnDefs中的field值完全匹配。
只要你的PostgreSQL表test1中存在make、model、price这三个字段，查询返回的res.rows就是符合要求的结构（每个元素是包含对应属性的对象），数据结构完全兼容。

核心注意：前后端分离的问题 #

你当前在前端main.js中直接require('database')是错误的——pg是Node.js后端模块，无法在浏览器环境运行。必须通过后端接口提供数据，前端通过HTTP请求获取：

步骤1：搭建简单后端（基于Express） #

1. 安装依赖：npm install express cors
2. 创建server.js：

const express = require('express');
const cors = require('cors');
const { getTestData } = require('./database');

const app = express();
app.use(cors()); // 允许前端跨域请求

// 定义接口返回数据库数据
app.get('/api/test-data', async (req, res) => {
  try {
    const data = await getTestData();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: '获取数据失败' });
  }
});

app.listen(3000, () => {
  console.log('后端服务运行在http://localhost:3000');
});

步骤2：修正前端main.js #

改用fetch请求后端接口，获取数据后加载到ag-Grid（如果你只是展示全量数据，用默认的clientSide行模型更简单）：

const columnDefs = [
  { headerName: 'Make', field: 'make', sortable: true, filter: true },
  { headerName: 'Model', field: 'model', sortable: true, filter: true },
  { headerName: 'Price', field: 'price', sortable: true, filter: true }
];

const gridOptions = {
  columnDefs: columnDefs,
  rowModelType: 'clientSide', // 全量数据场景用clientSide行模型更合适
};

// 初始化表格
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);

// 请求后端数据并加载到表格
fetch('http://localhost:3000/api/test-data')
  .then(response => response.json())
  .then(data => {
    gridOptions.api.setRowData(data); // 将数据设置到表格中
  })
  .catch(err => console.error('加载数据失败:', err));

运行步骤 #

1. 启动后端：node server.js
2. 在浏览器中打开你的HTML页面（确保已引入ag-Grid的CSS和JS文件）
3. 页面会自动请求后端接口，获取数据并展示在ag-Grid中

内容的提问来源于stack exchange，提问作者G.H.