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的原作者也特意申明,需要很多工作量来处理。所以在此特意提交了以上代码,或许是一种新的解决思路,供大家参考。


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值