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

Question

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

Answer 1

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

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

Answer 2

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

1）参考VerCellMerged格式化程序

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

2）声明非线底样式，渲染选项对象和在页面中返回数据源的函数

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