转自
http://blog.csdn.net/besley/article/details/9150001
在SlickGrid官方示例中,给出了同一行单元格合并的示例,主要是使用了colspan的方法,但是对于同一列的不同行的单元格合并,却没有好的实现方法;然而这个功能一般在做数据处理时,又是必须需要的,经过对slickgrid的dataview的功能分析,参考公司小陈对formatter的用法,最终根据formatter加载渲染,dataview事件绑定的方法组合实现了同一列单元格合并的功能插件,具体使用介绍如下:
1) 列定义引用formatter
添加了VerCellMerged的格式。
- { id: "ProductName", name: "产品名称", field: "ProductName", fieldType: "string", width: 120, formatter: Slick.Formatters.VerCellMerged }
2) Grid页面上申明样式,Options对象, 获取数据源的方法
- <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) Grid页面上的slickgrid的dataview 相关JS代码
- 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();
- //行改变
- dataViewProduct.onRowsChanged.subscribe(function (e, args) {
- gridProduct.invalidateRows(args.rows);
- gridProduct.render();
- var changes = window._renderOptions.changedCells;
- gridProduct.setCellCssStyles('cell-noneline-bottom', changes);
- });
- // 行数改变
- dataViewProduct.onRowCountChanged.subscribe(function (e, args) {
- gridProduct.updateRowCount();
- gridProduct.render();
- var options = window._renderOptions;
- options.lastRendering = 1;
- });
4)formatter 格式实现
- 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;
- }
5)页面效果示例
加载formatter时,在dataview行改变事件中,render了两次,在后面一次执行改变样式才执行合并功能的代码,虽然不是很完美的方案,但是已经可以正常使用,关于合并功能,SlickGrid的原作者也特意申明,需要很多工作量来处理。所以在此特意提交了以上代码,或许是一种新的解决思路,供大家参考。