11

我正在使用 SlickGrid ( https://github.com/mleibman/SlickGrid ) 来显示一个可编辑的表格，就像这个，右边的那个：标题跨越多列

但目前 SlickGrid 似乎不支持这个，这怎么办？

4

2 回答 2

0

我从 SlickGrid 示例/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;
}
于 2017-10-18T21:27:15.373 回答
-1

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

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

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

于 2013-06-10T22:24:41.500 回答