如何在点击AG Grid行时用行数据填充表单输入框（原生JS）

要实现点击AG Grid行时自动填充表单输入框，核心是利用AG Grid的行点击事件获取选中行数据，再将数据对应赋值给表单输入框的value属性。你提供的代码存在两处问题：定义了fillInput函数但未执行，且错误地给输入框的value变量赋值（正确方式是直接设置DOM元素的value属性）。

完整示例代码 #

HTML部分 #

<!-- AG Grid容器 -->
<div id="myGrid" style="height: 300px; width: 600px;" class="ag-theme-alpine"></div>

<!-- 表单输入框 -->
<form>
  <div>
    <label>品牌：</label>
    <input type="text" id="makeInput" />
  </div>
  <div>
    <label>型号：</label>
    <input type="text" id="modelInput" />
  </div>
  <div>
    <label>价格：</label>
    <input type="text" id="priceInput" />
  </div>
</form>

JavaScript部分 #

// 获取AG Grid容器DOM
const eGridDiv = document.querySelector('#myGrid');

const gridOptions = {
    columnDefs: [
        {field: "make", sortable: true, filter: true},
        {field: "model", sortable: true, filter: true},
        {field: "price", sortable: true, filter: true}
    ],
    rowData: [
        {make: "VW", model: "Jetta", price: "$25,000"},
        {make: "Honda", model: "Odyssey", price: "$35,000"},
        {make: "Audi", model: "Q2", price: "$45,000"}
    ],
    animateRows: true,
    // 监听行点击事件（点击整行任意位置都触发）
    onRowClicked: params => {
        // 获取当前点击行的完整数据
        const rowData = params.data;
        // 将数据填充到对应输入框
        document.querySelector('#makeInput').value = rowData.make;
        document.querySelector('#modelInput').value = rowData.model;
        document.querySelector('#priceInput').value = rowData.price;
    }
};

// 初始化AG Grid实例
new agGrid.Grid(eGridDiv, gridOptions);

关键要点 #

• 优先使用onRowClicked事件：相比onCellClicked，它在点击整行任意区域时都会触发，更贴合“点击行”的需求；
• 直接操作DOM元素的value属性：通过选择器获取输入框后，直接赋值给value即可完成填充；
• 确保输入框ID与代码选择器一致：否则无法定位到目标输入框，导致填充失败。

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