如何在SlickGrid中实现多列头（多层头）？

Question

如何在SlickGrid中实现多列头（多层头）？

javascripthtmlslickgridtabular

11

我正在使用SlickGrid (https://github.com/mleibman/SlickGrid) 来展示一个可编辑的表格，就像右边这个图片中的那个。

但是目前看来SlickGrid并不支持这种功能，要怎么实现呢？

- CGP

我认为在slickgrid中没有这个功能....请查看此链接 - Premshankar Tiwari

这个有成功吗？ - HGPB

通过一些CSS，可以实现这个效果。您考虑过合并单元格吗？ - Bárbara Peres

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tazdev · Answer 1

我在SlickGrid examples/example-column-group.html中找到了以下代码片段，对我有用。注意：我正在使用这个分支版本的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;
}

- Nik · Answer 2

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

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

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