SpreadJS自定义筛选按钮

客户背景：
前几天有客户咨询了这样一个问题：
SpreadJS提供了筛选功能以及筛选按钮，但是筛选按钮的样式不大符合需求，期望的效果为一个小漏斗形状。
问可以实现吗？

步骤：
SpreadJS提供了丰富的接口供用户自定义，这点需求自然不在话下。
不喜欢原有的筛选按钮，那就隐藏好了：

1. sheet.rowFilter().filterButtonVisible(false);

复制代码

没有了筛选按钮，怎么实现UI操作呢？
SpreadJS提供了单元格按钮的功能，可以在原筛选按钮位置设置一个button，再结合我们的需求，执行筛选代码逻辑就可以了。
当然，显示的image也可以根据需要自己设置，找一个喜欢的图标替换（base64）。

1. var style = sheet.getStyle(1, 1);
   
2. style.cellButtons = [
   
3.         {
   
4.                 imageType: GC.Spread.Sheets.ButtonImageType.custom,
   
5.                 imageSrc: base64Icon1,
   
6.                 command: (sheet, row, col, option) => {
   
7.                         var filter = sheet.rowFilter();
   
8.                         var cellRect = sheet.getCellRect(row, col);
   
9.                         var x = cellRect.x;
   
10.                         var y = cellRect.y;
    
11.                         var filterButtonHitInfo = {
    
12.                                 rowFilter: filter,
    
13.                                 row: row, col: col,
    
14.                                 sheetArea: GC.Spread.Sheets.SheetArea.viewport,
    
15.                                 x: x, y: y,
    
16.                                 width: cellRect.width,
    
17.                                 height: cellRect.height
    
18.                         };
    
19.                         filter.openFilterDialog(filterButtonHitInfo);
    
20.                 }
    
21.         }
    
22. ];
    
23. sheet.setStyle(1, 1, style);

复制代码

需要用另一个图标来表示筛选后的状态，那就通过RangeFiltered事件来控制筛选按钮的显示图片
主要代码如下：

1. sheet.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
   
2.         var rowFilter = sheet.rowFilter();
   
3.         var filterStyle = sheet.getStyle(1, 1);
   
4.         if (rowFilter.getFilterItems(1).length > 0) {
   
5.                 filterStyle.cellButtons = [
   
6.                         {
   
7.                                 imageType: GC.Spread.Sheets.ButtonImageType.custom,
   
8.                                 imageSrc: base64Icon2,
   
9.                                 command: (sheet, row, col, option) => {
   
10.                                         var filter = sheet.rowFilter();
    
11.                                         var cellRect = sheet.getCellRect(row, col);
    
12.                                         var x = cellRect.x;
    
13.                                         var y = cellRect.y;
    
14.                                         var filterButtonHitInfo = {
    
15.                                                 rowFilter: filter,
    
16.                                                 row: row, col: col,
    
17.                                                 sheetArea: GC.Spread.Sheets.SheetArea.viewport,
    
18.                                                 x: x, y: y,
    
19.                                                 width: cellRect.width,
    
20.                                                 height: cellRect.height
    
21.                                         };
    
22.                                         filter.openFilterDialog(filterButtonHitInfo);
    
23.                                 }
    
24.                         }
    
25.                 ];
    
26. 
    
27.         } else {
    
28.                 filterStyle.cellButtons = [
    
29.                         {
    
30.                                 imageType: GC.Spread.Sheets.ButtonImageType.custom,
    
31.                                 imageSrc: base64Icon1,
    
32.                                 command: (sheet, row, col, option) => {
    
33.                                         var filter = sheet.rowFilter();
    
34.                                         var cellRect = sheet.getCellRect(row, col);
    
35.                                         var x = cellRect.x;
    
36.                                         var y = cellRect.y;
    
37.                                         var filterButtonHitInfo = {
    
38.                                                 rowFilter: filter,
    
39.                                                 row: row, col: col,
    
40.                                                 sheetArea: GC.Spread.Sheets.SheetArea.viewport,
    
41.                                                 x: x, y: y,
    
42.                                                 width: cellRect.width,
    
43.                                                 height: cellRect.height
    
44.                                         };
    
45.                                         filter.openFilterDialog(filterButtonHitInfo);
    
46.                                 }
    
47.                         }
    
48.                 ];
    
49.         }
    
50.         sheet.setStyle(1, 1, filterStyle);
    
51. });

复制代码

来看下效果图：


完整代码请参考附件demo。