How do I create merged cells in SlickGrid?
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 to share
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 to share