如何在 SlickGrid 中做多列标题（多层标题）？答案

【问题标题】：How to do multi-column header (multi layer header) in SlickGrid?如何在 SlickGrid 中做多列标题（多层标题）？
【发布时间】：2013-06-05 20:19:12
【问题描述】：

我正在使用 SlickGrid (https://github.com/mleibman/SlickGrid) 来显示一个可编辑的表格，喜欢这个，右边那个：

但目前 SlickGrid 似乎不支持这个，这是怎么做到的？

【问题讨论】：

我认为它在 slickgrid 中不可用.... ...check this
这方面有什么成功吗？
使用一些 CSS 可以实现这一点。您是否考虑过将单元格合并在一起？

标签： javascript html slickgrid tabular

【解决方案1】：

我在 SlickGrid 示例/example-column-group.html 中找到了以下适用于我的 sn-ps。注意：我使用的是 SlickGrid 的这个分叉版本：https://github.com/6pac/SlickGrid/releases/tag/2.3.8

添加以下选项：（除了您可能正在使用的任何选项）

var options = {
    createPreHeaderPanel: true,
    showPreHeaderPanel: true,
    preHeaderPanelHeight:23,
    explicitInitialization:true
};

将 columnGroup 属性添加到您希望在超级标题下分组的每一列，例如：

var columns = [];
columns.push({ id: "col1", name: "Col 1", field: "col1",columnGroup:"SuperHeading" });
columns.push({ id: "col2", name: "Col 2", field: "col2", columnGroup: "SuperHeading" });

在定义网格后，使用 grid.init() 显式初始化网格：

grid = new Slick.Grid("#myGrid", dataview, columns, options);

grid.init();

添加此样板代码：

var $preHeaderPanel = $(grid.getPreHeaderPanel())
    .addClass("slick-header-columns")
    .css('left', '-1000px')
    .width(grid.getHeadersWidth());
$preHeaderPanel.parent().addClass("slick-header");

var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
var m, header, lastColumnGroup = '', widthTotal = 0;

for (var i = 0; i < columns.length; i++) {
    m = columns[i];
    if (lastColumnGroup === m.columnGroup && i > 0) {
        widthTotal += m.width;
        header.width(widthTotal - headerColumnWidthDiff)
    } else {
        widthTotal = m.width;
        header = $("<div class='ui-state-default slick-header-column' />")
          .html("<span class='slick-column-name'>" + (m.columnGroup || '') + "</span>")
          .width(m.width - headerColumnWidthDiff)
          .appendTo($preHeaderPanel);
    }
    lastColumnGroup = m.columnGroup;
}

【讨论】：

【解决方案2】：

您可以通过 html 代码在其他 div 中创建标题。然后将 slickgrid 标头高度设为 0px。

$("#container").find(".slick-header").css("height","0px");

但不要忘记在列选项中设置 resizable=false。

【讨论】：

谢谢，Nokolay。完成更多调查后将在此处发布。