自定义筛选按钮

问题：SpreadJS如何自定义筛选按钮

背景：

SpreadJS提供了筛选功能以及筛选按钮，但是筛选按钮的样式不大符合需求，期望的效果为一个小漏斗形状。这样的效果应该如何实现呢？

解决方案：

SpreadJS提供了丰富的接口供用户自定义，如果不喜欢原有的筛选按钮，那就隐藏好了：

sheet.rowFilter().filterButtonVisible(false);

没有了筛选按钮，怎么实现UI操作呢？

SpreadJS提供了单元格按钮的功能，可以在原筛选按钮位置设置一个button，再结合我们的需求，执行筛选代码逻辑就可以了。

当然，显示的image也可以根据需要自己设置，找一个喜欢的图标替换（base64）。

var style = sheet.getStyle(1, 1);
style.cellButtons = [
  {
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    imageSrc: base64Icon1,
    command: (sheet, row, col, option) => {
      var filter = sheet.rowFilter();
      var cellRect = sheet.getCellRect(row, col);
      var x = cellRect.x;
      var y = cellRect.y;
      var filterButtonHitInfo = {
        rowFilter: filter,
        row: row,
        col: col,
        sheetArea: GC.Spread.Sheets.SheetArea.viewport,
        x: x,
        y: y,
        width: cellRect.width,
        height: cellRect.height,
      };
      filter.openFilterDialog(filterButtonHitInfo);
    },
  },
];
sheet.setStyle(1, 1, style);

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

主要代码如下：

sheet.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
  var rowFilter = sheet.rowFilter();
  var filterStyle = sheet.getStyle(1, 1);
  if (rowFilter.getFilterItems(1).length > 0) {
    filterStyle.cellButtons = [
      {
        imageType: GC.Spread.Sheets.ButtonImageType.custom,
        imageSrc: base64Icon2,
        command: (sheet, row, col, option) => {
          var filter = sheet.rowFilter();
          var cellRect = sheet.getCellRect(row, col);
          var x = cellRect.x;
          var y = cellRect.y;
          var filterButtonHitInfo = {
            rowFilter: filter,
            row: row,
            col: col,
            sheetArea: GC.Spread.Sheets.SheetArea.viewport,
            x: x,
            y: y,
            width: cellRect.width,
            height: cellRect.height,
          };
          filter.openFilterDialog(filterButtonHitInfo);
        },
      },
    ];
  } else {
    filterStyle.cellButtons = [
      {
        imageType: GC.Spread.Sheets.ButtonImageType.custom,
        imageSrc: base64Icon1,
        command: (sheet, row, col, option) => {
          var filter = sheet.rowFilter();
          var cellRect = sheet.getCellRect(row, col);
          var x = cellRect.x;
          var y = cellRect.y;
          var filterButtonHitInfo = {
            rowFilter: filter,
            row: row,
            col: col,
            sheetArea: GC.Spread.Sheets.SheetArea.viewport,
            x: x,
            y: y,
            width: cellRect.width,
            height: cellRect.height,
          };
          filter.openFilterDialog(filterButtonHitInfo);
        },
      },
    ];
  }
  sheet.setStyle(1, 1, filterStyle);
});

来看下效果图：

完整代码请参考该链接。

作者: GrapeCity China | 审核：Clark.Pan | 更新时间：2023.12.10