将 angular slickgrid 标题列合并为单个标题列答案

【问题标题】：Merge the angular slickgrid header columns into single header column将 angular slickgrid 标题列合并为单个标题列
【发布时间】：2020-11-16 13:24:59
【问题描述】：

在 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

【问题讨论】：

你运气不好，SlickGrid（核心）不支持它，这意味着Angular-Slickgrid也不支持它......这是一个开源项目，你也许可以贡献这个新功能
除非您可能只显示前标题并隐藏常规列标题，否则可能会起作用。这个SlickGridExample隐藏了列标题，大家可以看看
@ghiscoding 我在 angularGridReady 方法 this.angularGrid.slickGrid.setOptions({showColumnHeader:false}); 中尝试了以下代码。此代码隐藏标题列，但过滤行也隐藏
@ghiscoding 隐藏标题栏，我们可能会丢失更多 slickgrid 的功能。例如：列重新排序、按列搜索和排序等，
就我个人而言，我只会将“动作”保留在前标题中，并删除每个按钮的所有标题（空字符串）并使其具有固定宽度（最小/最大宽度），即基本上我在Example 的前 2 列中所做的，只是我没有在该演示中添加预标题。它并不完美，不是在 1 个标题行上，但可以完成这项工作。

标签： angular angular-slickgrid

【解决方案1】：

我今天发现，当使用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

【讨论】：