请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-11-2 10:01  /   查看:920  /  回复:0
本帖最后由 Lynn.Dou 于 2022-11-2 10:05 编辑

客户背景:
前几天有客户咨询了这样一个问题:
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.         } else {
  27.                 filterStyle.cellButtons = [
  28.                         {
  29.                                 imageType: GC.Spread.Sheets.ButtonImageType.custom,
  30.                                 imageSrc: base64Icon1,
  31.                                 command: (sheet, row, col, option) => {
  32.                                         var filter = sheet.rowFilter();
  33.                                         var cellRect = sheet.getCellRect(row, col);
  34.                                         var x = cellRect.x;
  35.                                         var y = cellRect.y;
  36.                                         var filterButtonHitInfo = {
  37.                                                 rowFilter: filter,
  38.                                                 row: row, col: col,
  39.                                                 sheetArea: GC.Spread.Sheets.SheetArea.viewport,
  40.                                                 x: x, y: y,
  41.                                                 width: cellRect.width,
  42.                                                 height: cellRect.height
  43.                                         };
  44.                                         filter.openFilterDialog(filterButtonHitInfo);
  45.                                 }
  46.                         }
  47.                 ];
  48.         }
  49.         sheet.setStyle(1, 1, filterStyle);
  50. });
复制代码

来看下效果图:
image.png883682250.png

完整代码请参考附件demo。

自定义筛选按钮.html

151.79 KB, 下载次数: 15

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部