[英]Angular-Slickgrid header menu is not visible even setting enableHeaderMenu option to true
我在我的角度应用程序中使用 Angular-Slickgrid。 网格工作正常,但我面临 Headermenu 的问题。 当我运行应用程序时,无法在任何标题中的鼠标悬停上看到 Headermenu 图标。
我正在使用以下 gridoptions :
this.gridOptions = {
enableAutoResize: true,
enableCellNavigation: true,
autoEdit: false,
enableRowSelection: true,
rowHeight: 30,
editable: true,
enableGrouping: true,
forceFitColumns: true,
enableHeaderButton: true,
enableHeaderMenu: true,
gridMenu: {
hideExportCsvCommand: true,
hideExportTextDelimitedCommand: true,
hideExportExcelCommand: true,
hideClearAllSortingCommand: true,
hideForceFitButton: true,
onBeforeMenuShow: (a, b) => {
}
}
};
如您所见,我已设置 enableHeaderMenu: true,即使在此之后也无法看到标题菜单。 下面是我的网格的图像:
当我将鼠标悬停在任何标题上时,无法看到标题菜单图标(我需要单击以打开标题菜单)
我还添加了所需 css 文件的引用,我认为 css 正在工作。 下面是 angular.json 文件的代码:
"styles": [
"src/styles.scss",
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./node_modules/flatpickr/dist/flatpickr.css",
"./node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
"src/slickgrid-styles.scss",
"./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.min.js",
"./node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
]
slickgrid-styles.scss 文件的代码:
@import './node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';
在调查我的代码之后,我终于找到了问题的路径原因。 我在我的网格中使用了 12 列,其中我只想在页面加载时显示一些列,比如 9 列(用户可以从网格菜单中检查列以使其可见)。为此,我使用以下代码:
setGridDefaultVisibleColumns() {
const visibleColumns = this.columnDefs.filter((c) => {
return c['visible'] !== false;
});
this.angularSilkGrid.slickGrid.setColumns(visibleColumns); }
我在 angularGridReady 中调用这个方法
angularGridReady(angularGrid: AngularGridInstance) {
this.dataGrid = angularGrid.slickGrid;
this.angularSilkGrid = angularGrid;
this.setGridDefaultVisibleColumns();
}
评论 setGridDefaultVisibleColumns 函数调用后,我的问题得到解决
以下是问题的解决方法。光滑网格的 setColumns 方法也影响标题菜单。
我可以在不影响标题菜单的情况下隐藏如下所示的列。请参阅下面的代码
setGridDefaultVisibleColumns() {
this.columnDefs.forEach(c => {
if (c['visible'] === false) {
this.angularSilkGrid.extensionService.hideColumn(c);
}
}); this.angularSilkGrid.slickGrid.setColumns(visibleColumns);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.