如何在SlickGrid中执行多列标题（多层标题）？

Question

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

但是目前看来SlickGrid不支持这个， 怎么办呢？

Answer 1

我在SlickGrid examples / example-column-group.html中找到了以下代码片段，对我有用。注意：我使用的是SlickGrid的分叉版本：https://github.com/6pac/SlickGrid/releases/tag/2.3.8

1. 添加以下选项:(除了您可能正在使用的任何选项）

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

1. 将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" });

1. 在定义网格后，使用grid.init（）显式初始化网格：

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

grid.init();

1. 添加此样板代码：

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;
}

Answer 2

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

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

但是不要忘记列选项中的make resizable = false。