在ag-grid中使用具有单个字段的多字段表单

// 列定义
var columnDefs = [
  { headerName: "字段1", field: "field1", cellRenderer: multiFieldFormRenderer },
  { headerName: "字段2", field: "field2", cellRenderer: multiFieldFormRenderer },
  { headerName: "字段3", field: "field3", cellRenderer: multiFieldFormRenderer }
];

// 单元格渲染器
function multiFieldFormRenderer(params) {
  var field1Id = 'field1_' + params.rowIndex;
  var field2Id = 'field2_' + params.rowIndex;
  var field3Id = 'field3_' + params.rowIndex;

  var html = '<form>';
  html += '<input type="text" id="' + field1Id + '" value="' + params.data.field1 + '">';
  html += '<input type="text" id="' + field2Id + '" value="' + params.data.field2 + '">';
  html += '<input type="text" id="' + field3Id + '" value="' + params.data.field3 + '">';
  html += '</form>';

  // 监听字段变化事件
  document.getElementById(field1Id).addEventListener('change', function(e) {
    params.data.field1 = e.target.value;
  });
  document.getElementById(field2Id).addEventListener('change', function(e) {
    params.data.field2 = e.target.value;
  });
  document.getElementById(field3Id).addEventListener('change', function(e) {
    params.data.field3 = e.target.value;
  });

  return html;
}

// 创建ag-grid实例
var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

// 将ag-grid实例绑定到DOM元素
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);