如何解决Ag-grid自定义工具提示不适用于网格单元
我想在项目中使用ag-grid自定义工具提示。根据ag-grid https://www.ag-grid.com/javascript-grid-tooltip-component/的文档,我为工具提示制作了一个js组件,并将其分配给const [state,dispatch] = React.useReducer(reducer,initialCount,init);
。自定义工具提示功能在列标题的悬停时被调用,但不在单元格悬停时不显示工具提示。如果有人知道,我在这里缺少什么,请引导我。
示例代码:
this.gridOptions = config
CSS
prepareConfig() {
config.enableBrowserTooltips = false;
config.defaultColDef= {
sortable: true,tooltipComponent: 'customTooltip'
},function CustomTooltip() {}
CustomTooltip.prototype.init = function (params) {
var eGui = (this.eGui = document.createElement('div'));
let color = 'white';
let data = params.rowIndex >= 0 ? params.api.getDisplayedRowAtIndex(params.rowIndex).data : params.value;
eGui.style['background-color'] = color;
if (data.subtitle) {
eGui.classList.add('custom-tooltip');
eGui.innerHTML =
'<div><div class="custom-tooltip-title">' + data.col1 + '</div><div class="custom-tooltip-body">' +
data.subtitle + '</div></div>';
} else {
eGui.classList.add('ag-tooltip');
eGui.innerHTML = '<div>' + data.col1 + '</div>';
}
};
CustomTooltip.prototype.getGui = function () {
return this.eGui;
};
config.components = {
customTooltip: CustomTooltip
}
return config;
}
附加网格表的屏幕快照以供参考 grid table
解决方法
已修复,columnDefs中缺少“ tooltipField”。
columnDefs = [ { tooltipField:'col1', }]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。