如何在JavaScript ag-grid单元格点击事件中创建模态弹窗

这个需求可以直接通过ag-grid原生API配合自定义模态框实现，具体实现步骤如下：

实现步骤 #

• 第一步：在ag-grid配置中绑定单元格点击事件
  在gridOptions中添加onCellClicked回调，可指定触发弹窗的列，避免点击所有列都弹出窗口：

  const gridOptions = {
    columnDefs: [
      { field: 'id', headerName: 'ID' },
      { field: 'productName', headerName: '商品名称' },
      // 点击这个列的单元格触发弹窗
      { field: 'extInfo', headerName: '扩展信息', editable: false }
    ],
    onCellClicked: (params) => {
      // 只触发指定列的弹窗
      if (params.column.colId === 'extInfo') {
        openModal(params)
      }
    }
  }
  

• 第二步：构造模态框内容
  弹窗内可以按需求加载当前行的已有字段，同时新增额外字段的输入项，这里以原生JS实现的简易弹窗为例，可直接替换为对应框架的UI组件模态框：

  function openModal(gridParams) {
    // 获取当前行已有数据
    const rowData = gridParams.data
    // 构造弹窗表单
    const modal = document.createElement('div')
    modal.innerHTML = `
      <div class="modal-content">
        <h3>编辑扩展信息</h3>
        <!-- 已有列字段展示/编辑 -->
        <p>商品名称：<input type="text" id="productName" value="${rowData.productName || ''}"></p>
        <!-- 额外输入字段 -->
        <p>库存数量：<input type="number" id="stock" value="${rowData.extInfo?.stock || ''}"></p>
        <p>备注：<textarea id="remark">${rowData.extInfo?.remark || ''}</textarea></p>
        <button id="submitBtn">提交</button>
      </div>
    `
    document.body.appendChild(modal)
  
    // 提交按钮事件
    document.getElementById('submitBtn').addEventListener('click', () => {
      // 组装完整数据对象
      const fullData = {
        productName: document.getElementById('productName').value,
        stock: document.getElementById('stock').value,
        remark: document.getElementById('remark').value
      }
      // 将完整对象写入对应单元格
      gridParams.node.setDataValue('extInfo', fullData)
      // 移除弹窗
      document.body.removeChild(modal)
    })
  }
  

• 第三步：优化单元格展示（可选）
  因为单元格存储的是对象，直接展示会显示[object Object]，可以给对应列添加自定义渲染器：

  columnDefs: [
    {
      field: 'extInfo',
      headerName: '扩展信息',
      cellRenderer: (params) => {
        if (!params.value) return '-'
        return `库存：${params.value.stock} | 备注：${params.value.remark}`
      }
    }
  ]
  

注意事项 #

• 如果需要修改行的其他字段而非仅存储到单个单元格，可使用gridParams.node.setData()方法直接更新整行数据
• 重复点击已填写过的单元格时，会自动读取之前存储的对象数据回填到弹窗表单，无需额外处理

内容的提问来源于stack exchange，提问作者akash bharade