当前位置: 首页 > 工具软件 > AG Grid > 使用案例 >

AgGrid 上下文菜单栏使用(触发,自定义菜单)

淳于俊迈
2023-12-01

suppressContextMenu

作用:用户可以通过右键单击单元格来调出上下文菜单。默认情况下,上下文菜单提供“复制”、“粘贴”和“导出”。
值:默认为 false,表示支持右键点击弹出,设置为 true 表示禁用。
官方参考链接: AgGrid- suppressContextMenu

getContextMenuItems

作用:自定义上下文菜单,通过提供 getContextMenuItems() 的回调
用法:

...
const getContextMenuItems = useCallback((params) => {
	var result = [
	      {
	        // custom item
	        name: 'Alert ' + params.value,
	        action: () => {
	          window.alert('Alerting about ' + params.value);
	        },
	        cssClasses: ['redFont', 'bold'],
	      },
	      {
	        // custom item
	        name: 'Always Disabled',
	        disabled: true,
	        tooltip:
	          'Very long tooltip, did I mention that I am very long, well I am! Long!',
	      },
	      ...
     ]
}
...

return (
    <div style={containerStyle}>
      <div style={gridStyle} className="ag-theme-alpine">
        <AgGridReact
          ...
          allowContextMenuWithControlKey={true}
          getContextMenuItems={getContextMenuItems} // 定义自定义菜单栏的回调函数
          onGridReady={onGridReady}
        ></AgGridReact>
      </div>
    </div>
  );
 类似资料: