如何通过ag-grid中的角度材质菜单获取行数据

Posted 2023-03-28

【中文标题】如何通过ag-grid中的角度材质菜单获取行数据

【英文标题】：How to get row data through angular material menu inside ag-grid

【发布时间】：2016-06-13 18:29:49

【问题描述】：

我有一个要求，在 ag-grid 中，我需要打开一个菜单来添加/编辑/删除该行数据。我正在使用角度材质菜单组件作为单元格模板 url。但是当单击该菜单项时，它不会触发 ag-grid 中的 onCellClicked 事件以获取对单击的行数据的引用，但是如果我单击远离菜单项的像素，则会触发事件。 需要帮助弄清楚，如何在菜单点击时获取行数据。

我的 ag-grid 代码放在这里：

var columnDefs = [
    headerName: "", field: "icon", width:65,
    headerName: "Categories",field:"category_name", width:1025, cellRenderer:function(params)
    // my cell renderer code goes here
      ,
   onCellClicked:function(params)
      console.log("Cell is still getting click "+params.data);
  //This click does not work
    ,

    headerName: "", field: "options", width:87, suppressMenu: true, templateUrl:"partials/options.html"
  
];

options.html

<md-menu>
  <!-- <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="openMenu($mdOpenMenu, $event)">
    <md-icon md-svg-src="images/icons/options.svg" aria-label="android "></md-icon>
  </md-button> -->
  <a href="javascript:void(0)" class="option-btn" ng-click="openMenu($mdOpenMenu, $event)">options</a>
  <md-menu-content >
    <md-menu-item>
      <md-button ng-click="modifyOptions($event)">
        <md-icon md-svg-src="images/icons/add.svg" aria-label="android "></md-icon>
        Add
      </md-button>
    </md-menu-item>
    <md-menu-item>
      <md-button ng-click="toggleNotifications()">
        <md-icon md-svg-src="images/icons/edit.svg" aria-label="android "></md-icon>
        Edit
      </md-button>
    </md-menu-item>
    <md-menu-divider></md-menu-divider>
    <md-menu-item>
      <md-button disabled="disabled" ng-click="checkVoicemail()">
        <md-icon md-svg-src="images/icons/delete.svg" aria-label="android "></md-icon>
        Delete
      </md-button>
    </md-menu-item>
  </md-menu-content>

【参考方案1】：

我发现我的问题的答案并不难：单元格模板对每一行的数据对象都有引用，因此可以通过调用data.your_property 来访问属性。在这里，我根本不需要 onCellClicked 事件。以下是工作代码：

var columnDefs = [
    headerName: "", field: "icon", width:65,
    headerName: "Categories",field:"category_name", width:1025, cellRenderer:function(params)

      // Cell Renderer goes here
,

    headerName: "", field: "options", width:87, suppressMenu: true, templateUrl:"partials/options.html"
  
];

option.html

<md-menu>

  <a href="javascript:void(0)" class="option-btn" ng-    click="openMenu($mdOpenMenu, $event, **data**)">options</a>
<md-menu-content >
<md-menu-item>
  <md-button ng-click="modifyOptions($event, data)">
    <md-icon md-svg-src="images/icons/add.svg" aria-label="android "></md-icon>
    Add
  </md-button>
</md-menu-item>
<md-menu-item>
  <md-button ng-click="modifyCategory(data)">
    <md-icon md-svg-src="images/icons/edit.svg" aria-label="android "></md-icon>
    Edit
  </md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
  <md-button disabled="disabled" ng-click="deleteCategory(data)">
    <md-icon md-svg-src="images/icons/delete.svg" aria-label="android "></md-icon>
    Delete
  </md-button>
</md-menu-item>

【讨论】：

我也有同样的问题，能否请您复制一下您如何调用 cellRenderer，我真的很感激