找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › SpreadJS & GcExcel专区 › 求助中心 › 查看内容
发新帖

冥冥中明明是你

注册会员

15

主题

62

帖子

179

积分

注册会员

积分
179
最新发帖

[已处理] 筛选按钮样式

冥冥中明明是你
注册会员   /  发表于：2022-9-16 16:24  /   查看：3351  /  回复：11
20金币
表单筛选按钮的样式能更改吗，比如换一个其他图标

最佳答案

Ellia.Duan

查看完整内容

可以参考附件中代码，实现结果为：

11 个回复

倒序浏览
最佳答案
最佳答案
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于：2022-9-16 16:24:09
来自 4#
可以参考附件中代码，实现结果为：
image.png375781554.png

自定义筛选按钮.html

10.24 KB, 下载次数: 199
回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于：2022-9-16 17:00:27
2#
请问您说的表单筛选按钮是说下拉框的按钮吗
image.png941841125.png ？
回复 使用道具 举报
冥冥中明明是你
注册会员   /  发表于：2022-9-16 17:08:31
3#
Ellia.Duan 发表于 2022-9-16 17:00
请问您说的表单筛选按钮是说下拉框的按钮吗
？

不是，是表头的筛选按钮
企业微信截图_16633192685759.png
回复 使用道具 举报
冥冥中明明是你
注册会员   /  发表于：2022-9-19 14:41:04
5#
Ellia.Duan 发表于 2022-9-16 18:39
可以参考附件中代码，实现结果为：
  1. /************更改filter按钮的方法*******************/
  2.   changeFilterButton(GCsheets, worksheet){
  3.     worksheet.rowFilter().filterButtonVisible(false);
  4.     let filterStyle = worksheet.getStyle(0, -1, GCsheets.SheetArea.colHeader);
  5.     filterStyle.cellButtons = [
  6.       {
  7.         imageType: GCsheets.ButtonImageType.search,
  8.         command: (worksheet, row, col, option) => {
  9.           let filter = worksheet.rowFilter();
  10.           let cellRect = worksheet.getCellRect(row, col);
  11.           let x = cellRect.x;
  12.           let y = cellRect.y;
  13.           let filterButtonHitInfo = {
  14.             rowFilter: filter,
  15.             row: row, col: col,
  16.             sheetArea: GCsheets.SheetArea.viewport,
  17.             x: x, y: y,
  18.             width: cellRect.width,
  19.             height: cellRect.height
  20.           };
  21.           filter.openFilterDialog(filterButtonHitInfo);
  22.         }
  23.       }
  24.     ];
  25.     worksheet.setStyle(0,-1, filterStyle, GCsheets.SheetArea.colHeader);
  26.     worksheet.resumePaint();
  27.   },
复制代码
通过这个函数修改了表单列头的图标样式，但是点击筛选按钮没有反应，是还需要另外绑定吗
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于：2022-9-19 18:24:32
6#
把你修改后的demo发一下，正常来说调用openFilterDialog方法就可以弹出筛选框了
点击查看 -->【预览版体验】SpreadJS v16.0 预览版 - 新文件结构
回复 使用道具 举报
冥冥中明明是你
注册会员   /  发表于：2022-9-20 10:07:34
7#
Clark.Pan 发表于 2022-9-19 18:24
把你修改后的demo发一下，正常来说调用openFilterDialog方法就可以弹出筛选框了

附件为demo代码

demo.zip

1.96 KB, 下载次数: 274
回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于：2022-9-20 15:04:40
8#
我这边下载了您的代码，遇到了bug

image.png829239501.png
Style为空，导致下面的代码执行不下去。这里建议修改为：
  1.     let filterStyle = worksheet.getStyle(0, -1, GCsheets.SheetArea.colHeader)  || new GC.Spread.Sheets.Style() ;
复制代码


同时您代码中suspendPaint与resumePaint是一起配合使用的，您代码中只出现了worksheet.resumePaint();建议删除。或者配套一起使用。’


将上面两个问题处理之后结果如下：
image.png374844970.png
是否是您这边想要的结果？
回复 使用道具 举报
冥冥中明明是你
注册会员   /  发表于：2022-9-20 16:54:22
9#
Ellia.Duan 发表于 2022-9-20 15:04
我这边下载了您的代码，遇到了bug

是的，找到不能弹出筛选框的原因了，表单设置了禁用编辑就弹不出筛选框了，这个有办法解决吗？另外，在弹出之后，弹出框的位置也跟原来的筛选按钮所弹出的位置不一样。感觉不太友好。
回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于：2022-9-20 17:28:40
10#
image.png800386657.png

image.png539653625.png
在表单保护后，可以通过设置 protectionOptions 属性来限制不同的用户行为。
  1. var option = {allowFilter:true};
  2. sheet.options.protectionOptions = option;
复制代码
此时可以在表单保护情况下，打开筛选弹窗。
对于第二个问题，可以修改x，y参数来调整位置
image.png19607542.png
回复 使用道具 举报
下一页 »
12下一页
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部