How do I create merged cells in SlickGrid?

Can I create merged cells in SlickGrid? If not, what other javascript trellis solutions allow you to merge cells.

+3


source to share


2 answers


If you mean cells spanning multiple columns, this is supported through "colspan" as shown in this example - http://mleibman.github.com/SlickGrid/examples/example-colspan.html .



Limiting cells vertically across multiple lines is not supported.

+6


source


I have codes when using formatting to concatenate cells into differnect rows. Tin please, you can check this solution, it may not be the best, but it works great. thank.

1) VerCellMerged formatter link

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

      

2) declare a non-bold style, a render options object and a function to return the data source to the page

<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) write the render codes associated with these two dataview events in a javascript file

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 source code source

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

      

0


source







All Articles