我在我的角度应用程序中使用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函数调用后,我的问题已解决
下面是slick gird的issue.setColumns方法的解决方法也影响标题菜单。
我可以隐藏下面的列而不影响标题菜单。请参见下面的代码
setGridDefaultVisibleColumns() {
this.columnDefs.forEach(c => {
if (c['visible'] === false) {
this.angularSilkGrid.extensionService.hideColumn(c);
}
}); this.angularSilkGrid.slickGrid.setColumns(visibleColumns);
}