从 ag-grid 单元格模板访问范围

Posted 2023-03-28

【中文标题】从 ag-grid 单元格模板访问范围

【英文标题】：access scope from ag-grid cell template

【发布时间】：2021-01-14 04:27:14

【问题描述】：

如何从 ag-grid 单元格模板触发 Angular js 函数（ng-blur）？

下面是我对 ag-grid 的列定义

var columnDefs = [
          headerName: "Make", field: "make" , template:'<input type="text" class="form-control control-width-90 margin-left-5" ng-blur="alert(\'wewew\')"/>',
          headerName: "Model", field: "model",
          headerName: "Price", field: "price"
        ];

农业网格数据

var rowData = [
          make: "Toyota", model: "Celica", price: 35000,
          make: "Ford", model: "Mondeo", price: 32000,
          make: "Porsche", model: "Boxter", price: 72000
        ];

网格选项

$scope.gridOptions = 
              columnDefs: columnDefs,
              rowData: rowData
;

输出 [输出的 PFA][1] [1]：https://i.stack.imgur.com/WEttX.png

根据列定义，我可以渲染模板，但无法触发模糊事件。 谁能建议我如何从自定义模板触发事件或从 ag-grid 自定义模板访问范围？ 提前致谢！

【参考方案1】：

您想在单元格值更改时触发事件吗？ 然后就可以使用 ag grid 的 (cellValueChanged) 事件了。

【讨论】：

cellValueChanged 事件是使用 ag-grid 默认列定义触发的。在我的情况下，我有一个用于列定义的自定义单元格模板，并在我的输入元素模糊时触发一个事件。您可以查看我的列定义，其中我提到了字段“make”的模板。

在这种情况下使用 cellRenderer 而不是模板，如下所示： cellRenderer: (params) => let input = document.createElement("INPUT"); input.setAttribute("类型", "文本"); input.addEventListener('blur', (e) => this.onblur(); );返回输入；