Javascript 如何在SlickGrid中创建多列标题（多层标题）？

我正在使用SlickGrid（）显示一个可编辑的表格， 就像这个，右边的那个：

但目前看来SlickGrid并不支持这一点，

---

如何做到这一点？

您可以通过html代码在其他div中创建标题。然后使滑动网格收割台高度为0px

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

---

但别忘了在列选项中make resizeable=false。

我在SlickGrid examples/example-column-group.html中找到了以下代码片段，它们对我有用。注意：我使用的是SlickGrid的这个分叉版本：

添加以下选项：（除了您已经使用的任何选项之外）

将columnGroup属性添加到要分组到超级标题下的每个列，例如：

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

添加此锅炉板代码：

var$preHeaderPanel=$（grid.getPreHeaderPanel（））
.addClass（“光滑的标题列”）
.css（'左'，'-1000px'）
.width（grid.getHeadersWidth（））；
$preHeaderPanel.parent（）.addClass（“光滑头”）；
var headerColumnWidthDiff=grid.getHeaderColumnWidthDiff（）；
变量m，标题，lastColumnGroup=''，widthTotal=0；
对于（var i=0；i0）{
总宽度+=米宽；
页眉宽度（宽度总计-页眉柱宽度差异）
}否则{
宽度总计=m.宽度；
页眉=$（“”）
.html（“+（m.columnGroup | |“”）+”）
.宽度（m.宽度-头柱宽度差）
.附录（$preHeaderPanel）；
}
lastColumnGroup=m.columnGroup；
}

我认为它在slickgrid中不可用。。。成功了吗？有了一些CSS，就有可能做到这一点。你考虑过合并细胞吗？谢谢，Nokolay。将在更多的调查完成后在这里发布。

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

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