如何将菜单按钮添加到 ag-Grid 行? [英] How add menu button to ag-Grid row?
问题描述
我正在使用 ag-Grid Enterprise Vue.
我在
我更希望有一个特殊的专栏(
我该如何启用此功能?我在文档中没有找到任何示例.
包含菜单按钮的 Ag-grid Cell 是一个类似的问题,但没有答案.
来自 this comment 关于这个 ag-grid-enterprise 问题,我能够分叉这个例子,我认为它适用于我的情况.
相关代码为:
var gridOptions = {columnDefs: columnDefs,enableRangeSelection: 真,getContextMenuItems:getContextMenuItems,allowContextMenuWithControlKey: 真,onCellClicked: params =>{控制台日志(参数);if(params.column.colDef.field === '...'){params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)}},onCellContextMenu: 参数 =>{params.api.contextMenuFactory.hideActiveMenu()}};函数 getContextMenuItems(params) {console.log('getContextMenuItems', params);const 节点 = params.node;console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);变量结果 = [{名称:`警报'行${node.rowIndex + 1}'`,动作:函数(){window.alert(`行 ${node.rowIndex + 1}`);},cssClasses: ['redFont', 'bold']},'分隔器',{name: '检查',检查:正确,动作:函数(){console.log('选中已选中');},图标:'<img src="../images/skills/mac.png"/>'},'copy'//内置复制项];返回结果;}
I'm using ag-Grid Enterprise Vue.
I see in the docs how to enable a "context menu" that is available by right-clicking any individual cell.
I instead would love to have a special column (pinned to the right) that has a button (maybe looking like ⚙
or ...
) that opens a menu upon left-click.
How could I go about enabling this? I have found no examples in the docs.
Ag-grid Cell containing menu button is a similar question but has no answer.
From this comment on this ag-grid-enterprise issue, I was able to fork the example, and I think it will work for my situation.
The relevant code is:
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
getContextMenuItems: getContextMenuItems,
allowContextMenuWithControlKey: true,
onCellClicked: params => {
console.log(params);
if(params.column.colDef.field === '...'){
params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
}
},
onCellContextMenu: params => {
params.api.contextMenuFactory.hideActiveMenu()
}
};
function getContextMenuItems(params) {
console.log('getContextMenuItems', params);
const node = params.node;
console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
var result = [
{
name: `Alert 'Row ${node.rowIndex + 1}'`,
action: function() {
window.alert(`Row ${node.rowIndex + 1}`);
},
cssClasses: ['redFont', 'bold']
},
'separator',
{
name: 'Checked',
checked: true,
action: function() {
console.log('Checked Selected');
},
icon: '<img src="../images/skills/mac.png"/>'
},
'copy' // built in copy item
];
return result;
}
这篇关于如何将菜单按钮添加到 ag-Grid 行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!