angular - 将 angular slickgrid 标题列合并为单个标题列
问题描述
在 angular slickgrid 中，我想合并多列标题，如行的列跨度功能。适用于 slickgrid 行的列跨度。所以我尝试使用 columnGroup 属性，标题列被分组，但该分组列显示在预面板中。但我想在标题面板中显示。给我一个解决方案来实现我的方案。
在这里，我分享了我的网格选项和列定义，以便您了解我的尝试。
网格选项
public gridOptions: GridOption = {
enablePagination: true,
autoEdit: false,
rowHeight: 40,
enableCellNavigation: true,
editable: true,
enableAutoResize: true,
enableSorting: true,
enableFiltering: true,
enableExcelExport: true,
enableExport: true,
createPreHeaderPanel: true,
showPreHeaderPanel: true,
preHeaderPanelHeight: 30,
i18n: this.translateService,
gridMenu: {
hideExportExcelCommand: true,
hideExportCsvCommand: true
},
enableAutoTooltip: true,
autoTooltipOptions: {
enableForCells: true,
enableForHeaderCells: true,
maxToolTipLength: 1000
},
headerMenu: {
hideColumnHideCommand: true
},
autoResize: {
containerId: this.gridContainerId,
calculateAvailableSizeBy: 'container'
},
exportOptions: {
exportWithFormatter: true
},
excelExportOptions: {
exportWithFormatter: true,
},
enableTranslate: true,
presets: {
sorters: [{ columnId: this.tableColumnInfo['pfm138993_institutename']['prop'], direction: 'ASC' }],
},
enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
asyncPostRenderDelay: 0, // also make sure to remove any delay to render it
params: {
angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
},
checkboxSelector: {
// you can toggle these 2 properties to show the "select all" checkbox in different location
hideInFilterHeaderRow: false,
},
rowSelectionOptions: {
// True (Single Selection), False (Multiple Selections)
selectActiveRow: false,
},
enableCheckboxSelector: true,
enableRowSelection: true
};
列定义
public tableColumnInfo: { [key: string]: FieldInfo } = {
pfm138993_cspfmaction1: {
label: "Approval Action",
fieldName: "cspfmaction",
prop: "cspfmaction1",
fieldType: "ACTION",
child: "",
dateFormat: "",
mappingDetails: "",
currencyDetails: "",
actionInfo: [
{
actionIcon: "icon-mat-done",
actionName: "Approve",
actionType: "cspfmaction2",
sourceId: "12345",
uiType: "label-only",
buttonColor: "#06623b",
buttonCss: "cs-web-action-button",
objectName: ""
}
]
}, pfm138993_cspfmaction2: {
label: "Webservice Action",
fieldName: "cspfmaction",
prop: "cspfmaction2",
fieldType: "ACTION",
child: "",
dateFormat: "",
mappingDetails: "",
currencyDetails: "",
actionInfo: [
{
actionIcon: "icon-cs-export-data",
actionName: "Data Upsert",
actionType: "cspfmaction2",
sourceId: "12345",
uiType: "icon-label",
buttonColor: "#f0a500",
buttonText: "#1b1c25",
buttonCss: "cs-web-action-button",
objectName: ""
}
]
},
pfm138993_lastmodifiedon: {
label: "Audit",
fieldName: "lastmodifiedon",
prop: "lastmodifiedon",
fieldType: "TIMESTAMP",
child: "",
dateFormat: "",
mappingDetails: "",
currencyDetails: "",
actionInfo: [
{
actionIcon: "icon-mat-info_outline",
actionName: "Audit Info",
actionType: "Who column",
uiType: "icon-only",
buttonCss: "cs-web-action-button",
sourceId: "",
objectName: "Institute"
}
]
},
pfm138993_cspfmaction3: {
label: "Share",
fieldName: "cspfmaction",
prop: "cspfmaction3",
fieldType: "ACTION",
child: "",
dateFormat: "",
mappingDetails: "",
currencyDetails: "",
actionInfo: [{
"actionIcon": "icon-mat-share",
"actionName": "Share",
"actionType": "cspfmaction1",
"sourceId": "12345",
"uiType": "icon-only",
"buttonColor": "#1f4068",
buttonCss: "cs-web-action-button",
"objectName": ""
}
]
}
}
public columnDefinitions: Array<Column> = [
{
id: this.tableColumnInfo['pfm138993_cspfmaction1']['prop'],
nameKey: this.tableColumnInfo['pfm138993_cspfmaction1']['label'],
field: this.tableColumnInfo['pfm138993_cspfmaction1']['prop'],
minWidth: 120,
type: FieldType.unknown,
formatter: CspfmActionsFormatter,
params: {
actionInfo: this.tableColumnInfo['pfm138993_cspfmaction1']['actionInfo']
},
filterable: false,
sortable: false,
columnGroup: "Action list",
excludeFromExport: true
},
{
id: this.tableColumnInfo['pfm138993_cspfmaction2']['prop'],
nameKey: this.tableColumnInfo['pfm138993_cspfmaction2']['label'],
field: this.tableColumnInfo['pfm138993_cspfmaction2']['prop'],
minWidth: 120,
type: FieldType.unknown,
formatter: CspfmActionsFormatter,
params: {
actionInfo: this.tableColumnInfo['pfm138993_cspfmaction2']['actionInfo']
},
filterable: false,
sortable: false,
columnGroup: "Action list",
excludeFromExport: true
},
{
id: this.tableColumnInfo['pfm138993_lastmodifiedon']['prop'],
nameKey: this.tableColumnInfo['pfm138993_lastmodifiedon']['label'],
field: this.tableColumnInfo['pfm138993_lastmodifiedon']['prop'],
minWidth: 100,
type: FieldType.unknown,
formatter: CspfmActionsFormatter,
params: {
actionInfo: this.tableColumnInfo['pfm138993_lastmodifiedon']['actionInfo']
},
filterable: false,
sortable: false,
excludeFromExport: true,
columnGroup: "Action list",
excludeFromHeaderMenu: true
}
]
自定义格式化程序
export const CspfmActionsFormatter: Formatter = (row: number, cell: number, value: any, columnDef: any, dataContext: any, grid: any) => {
var actionInfo = columnDef['params']['actionInfo'] && columnDef['params']['actionInfo'][0] || {}
var uiType = actionInfo && actionInfo['uiType'] || 'icon-only';
var actionIcon = actionInfo && actionInfo['actionIcon'] || '';
var actionName = actionInfo && actionInfo['actionName'] || '';
var buttonColor = actionInfo && actionInfo['buttonColor'] || 'var(--ion-color-primary)';
var buttonText = actionInfo && actionInfo['buttonText'] || 'white';
var buttonCss = actionInfo && actionInfo['buttonCss'] || '';
var outputTag = '';
if (uiType === 'icon-label') {
outputTag = `
<div title="${actionName}" style="text-align: center;">
<span style="color: ${buttonText}; background-color: ${buttonColor}; padding: 7px; border-radius: 5px; text-align: center;" class="${buttonCss}">
<ion-icon class="${actionIcon}" slot="start"></ion-icon>
<ion-label>
${actionName}
</ion-label>
</span>
</div>
`;
} else if (uiType === 'label-only') {
outputTag = `
<div title="${actionName}" style="text-align: center;" >
<ion-label style="color: ${buttonText}; background-color: ${buttonColor}; padding: 5px 10px; border-radius: 5px; text-align: center;" class="${buttonCss}">
${actionName}
</ion-label>
</div>
`;
} else {
outputTag = `
<div title="${actionName}" style="text-align: center;">
<ion-icon class="${actionIcon} ${buttonCss}" slot="icon-only" style="color: ${buttonText}; background-color: ${buttonColor}; padding: 7px; border-radius: 5px; text-align: center;">
</ion-icon>
</div>
`;
}
return outputTag;
};
当前行为
标题列已分组，但该分组列显示在预面板中。
预期行为
我想将多列标题合并为单列标题
软件版本
角度：7.3.5
Angular-Slickgrid：2.19.0
打字稿：3.1.6
操作系统：Windows 10
节点：10.16.3
NPM：6.9.0
解决方案
我今天发现，在使用onClick事件时，即使在同一个单元格中有多个按钮/图标，您也可以知道点击了哪些按钮/图标。
因此，例如，如果您有 1 个名为“Action”的列，并且在该列定义中有 2 个按钮/图标，如下所示
this.columnDefinitions = [
{
id: 'action', name: 'Action', field: 'action', width: 120, maxWidth: 120,
excludeFromExport: true,
formatter: () => `<span class="mdi mdi-chevron-down mdi-22px"></span>
<span class="mdi mdi-help-circle-outline mdi-22px"></span>`,
},
];
您可以使用该onClick事件，从该事件中您可以找到告诉您点击了哪个图标的目标
<angular-slickgrid
gridId="grid2"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(sgOnClick)="handleOnCellClicked($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>
handleOnCellClicked(event, args) {
if (event.target.classList.contains('mdi-help-circle-outline')) {
alert('please HELP!!!');
} else if (event.target.classList.contains('mdi-chevron-down')) {
alert('do something else...');
}
}
这是显示它有效的动画 gif
推荐阅读
- sql - 调用函数的 MS Access 更新查询不返回任何内容/更新字段
- javascript - 如何将表单数据传递给 GAS
- rx-java2 - 为什么在 startWith 中使用 just 或 fromCallable 时 Single 的行为会有所不同？
- python - 替换R中段落中的确切句子
- wordpress - 在 Woocommerce 购物车页面上选择的付款方式应在结帐页面上处于活动状态
- r - 在R中如何计算一个值出现的次数并满足多个条件
- ansible - Rundeck 通过插件与 Ansible 集成
- javascript - 如何加载 1000 万个 sha256 哈希 - NodeJS 内存问题
- dotnet-dev-certs - 使用“dotnet dev-certs”工具导出 https 证书失败
- xpath - Xpath ImportXML 货币汇率