如何在 SlickGrid 中创建合并单元格？答案

【问题标题】：How do I create merged cells in SlickGrid?如何在 SlickGrid 中创建合并单元格？
【发布时间】：2012-04-10 10:21:56
【问题描述】：

是否可以在 SlickGrid 中创建合并单元格？如果不是，那么还有哪些其他 javascript 网格解决方案允许合并单元格。

【问题讨论】：

什么是“合并单元格”？跨越 >1 行或列的单元格？
>1 行和/或列，例如能够在 Excel 中选择任意矩形区域并将它们合并。

标签： javascript slickgrid

【解决方案1】：

如果您的意思是跨多个列的单元格，则可以通过“colspan”支持，如本示例所示 - http://mleibman.github.com/SlickGrid/examples/example-colspan.html。

不支持跨多行垂直跨越单元格。

【讨论】：

分叉 SlickGrid 并添加垂直跨度支持需要多少工作？会不会涉及到非常具有侵入性的改变？
（3 年后）此人的 fork 有 rowspan 支持：github.com/GerHobbelt/SlickGrid/tree/k0stya-rowspan

【解决方案2】：

使用格式化程序合并不同行中的单元格时，我得到了一些代码。锡，请你检查一下这个解决方案，也许它不是最好的，但它工作正常。谢谢。

1) 参考 VerCellMerged 格式化程序

{ id: "ProductName", name: "ProductName", field: "ProductName", fieldType: "string", width: 120, formatter: Slick.Formatters.VerCellMerged }

2) 在页面中声明 noneline-bottom 样式、渲染选项对象和返回数据源的函数

<style>
  .noneline-bottom
  {
      border-bottom:0;
  }
</style>

<script type="text/javascript">
    var _renderOptions = {
        "lastRendering": 0,
        "isNextMerged": 0,
        "changedCells": {}
    };

    function getRenderDataItmes() {
        var grid = window.pwpProductList.getGridControl();
        var dataView = grid.getData();
        var items = dataView.getItems();

        return items;
    }
</script>

3) 在javascript文件中编写dataview的这两个事件相关的渲染代码

dataViewProduct = new Slick.Data.DataView({ inlineFilters: true });
gridProduct = new Slick.Grid("#myGridProduct", dataViewProduct, columnsProduct, optionsProduct);
gridProduct.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));

dataViewProduct.beginUpdate();
dataViewProduct.setItems(dsProduct, "ID");
dataViewProduct.endUpdate();

// rows changed
dataViewProduct.onRowsChanged.subscribe(function (e, args) {
    gridProduct.invalidateRows(args.rows);
    gridProduct.render();
    var changes = window._renderOptions.changedCells;
    gridProduct.setCellCssStyles('cell-noneline-bottom', changes);
});

// rows count changed
dataViewProduct.onRowCountChanged.subscribe(function (e, args) {
    gridProduct.updateRowCount();
    gridProduct.render();
    var options = window._renderOptions;
    options.lastRendering = 1;
});

4) VerCellMerged 格式化程序源代码

function VerCellMergedFormatter(row, cell, value, columnDef, dataContext) {
    var options = window._renderOptions;
    if (options.lastRendering != 1) {
        return;
    }

    var items = window.getRenderDataItmes();
    var fieldName = columnDef.field;
    var rowsLength = items.length;
    var currentItem = items[row];

    var nextRowIndex = row + 1;
    if (nextRowIndex < rowsLength){
        var nextValue = items[nextRowIndex][fieldName];
        if (value == nextValue) {
            if (!options.changedCells[row]) {
                options.changedCells[row] = {};
            }
            options.changedCells[row][fieldName] = "noneline-bottom";
            options.isNextMerged = 1;
            return value;
        }
        else {
            if (options.isNextMerged == 1) {
                options.isNextMerged = 0;
                return;
            }
        }
    }
    return value;
}

【讨论】：