Как создать объединенные ячейки в SlickGrid?

Question

Можно ли создать объединенные ячейки в SlickGrid? Если нет, то какие другие сетевые решения javascript позволяют объединять ячейки.

Answer 1

Если вы имеете в виду ячейки, охватывающие несколько столбцов, это поддерживается через «colspan», как показано в этом примере - http://mleibman.github.com/SlickGrid/examples/example-colspan.html.

Покрытие ячеек по вертикали между несколькими строками не поддерживается.

Answer 2

У меня есть несколько кодов при использовании форматера для объединения ячеек в строках difnect. Тин, пожалуйста, можешь проверить это решение, может быть, оно не самое лучшее, но оно отлично работает. спасибо.

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) записать коды визуализации, связанные с этими двумя событиями dataview в файле javascript

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