SlickGrid 插件开发(2)：单元格合并功能实现

转自

http://blog.csdn.net/besley/article/details/9150001

在SlickGrid官方示例中，给出了同一行单元格合并的示例，主要是使用了colspan的方法，但是对于同一列的不同行的单元格合并，却没有好的实现方法；然而这个功能一般在做数据处理时，又是必须需要的，经过对slickgrid的dataview的功能分析，参考公司小陈对formatter的用法，最终根据formatter加载渲染，dataview事件绑定的方法组合实现了同一列单元格合并的功能插件，具体使用介绍如下：

1) 列定义引用formatter

添加了VerCellMerged的格式。

[javascript]  view plain copy

1. { id: "ProductName", name: "产品名称", field: "ProductName", fieldType: "string", width: 120, formatter: Slick.Formatters.VerCellMerged }  

2) Grid页面上申明样式，Options对象, 获取数据源的方法

[javascript]  view plain copy

1. <style>  
2.   .noneline-bottom  
3.   {  
4.       border-bottom:0;  
5.   }  
6. </style>  
7.   
8. <script type="text/javascript">  
9.     var _renderOptions = {  
10.         "lastRendering": 0,  
11.         "isNextMerged": 0,  
12.         "changedCells": {}  
13.     };  
14.   
15.     function getRenderDataItmes() {  
16.         var grid = window.pwpProductList.getGridControl();  
17.         var dataView = grid.getData();  
18.         var items = dataView.getItems();  
19.   
20.         return items;  
21.     }  
22. </script>  

3) Grid页面上的slickgrid的dataview 相关JS代码

[javascript]  view plain copy

1. dataViewProduct = new Slick.Data.DataView({ inlineFilters: true });  
2. gridProduct = new Slick.Grid("#myGridProduct", dataViewProduct, columnsProduct, optionsProduct);  
3. gridProduct.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));  
4.           
5. dataViewProduct.beginUpdate();  
6. dataViewProduct.setItems(dsProduct, "ID");  
7. dataViewProduct.endUpdate();  
8.           
9. //行改变  
10. dataViewProduct.onRowsChanged.subscribe(function (e, args) {  
11.     gridProduct.invalidateRows(args.rows);  
12.     gridProduct.render();  
13.     var changes = window._renderOptions.changedCells;  
14.     gridProduct.setCellCssStyles('cell-noneline-bottom', changes);  
15. });  
16.   
17. // 行数改变  
18. dataViewProduct.onRowCountChanged.subscribe(function (e, args) {  
19.     gridProduct.updateRowCount();  
20.     gridProduct.render();  
21.     var options = window._renderOptions;  
22.     options.lastRendering = 1;  
23. });   

4）formatter 格式实现

[javascript]  view plain copy

1. function VerCellMergedFormatter(row, cell, value, columnDef, dataContext) {  
2.     var options = window._renderOptions;  
3.     if (options.lastRendering != 1) {  
4.         return;  
5.     }  
6.   
7.     var items = window.getRenderDataItmes();  
8.     var fieldName = columnDef.field;  
9.     var rowsLength = items.length;  
10.     var currentItem = items[row];  
11.   
12.     var nextRowIndex = row + 1;  
13.     if (nextRowIndex < rowsLength){  
14.         var nextValue = items[nextRowIndex][fieldName];  
15.         if (value == nextValue) {  
16.             if (!options.changedCells[row]) {  
17.                 options.changedCells[row] = {};  
18.             }  
19.             options.changedCells[row][fieldName] = "noneline-bottom";  
20.             options.isNextMerged = 1;  
21.             return value;  
22.         }  
23.         else {  
24.             if (options.isNextMerged == 1) {  
25.                 options.isNextMerged = 0;  
26.                 return;  
27.             }  
28.         }  
29.     }  
30.     return value;  
31. }  

5）页面效果示例

总结：

加载formatter时，在dataview行改变事件中，render了两次，在后面一次执行改变样式才执行合并功能的代码，虽然不是很完美的方案，但是已经可以正常使用，关于合并功能，SlickGrid的原作者也特意申明，需要很多工作量来处理。所以在此特意提交了以上代码，或许是一种新的解决思路，供大家参考。