找回密码
 立即注册

QQ登录

只需一步,快速开始

Fiooona
论坛元老   /  发表于:2019-6-19 17:53  /   查看:7465  /  回复:4
本帖最后由 Fiooona 于 2019-6-20 08:47 编辑

SpreadJS是一款类Excel的纯前端表格控件,可以与现在主流的框架VUE、Angular、React轻松集成。本文介绍如何实现自定义的筛选框弹出框,效果如下图: image.png281700133.png

这里我们先看看默认的筛选弹出框的样式:
image.png641771545.png
为了使筛选弹出框轻量简洁,更贴合与用户的实际需求,可以对其进行自定义设置。在本文中实现的是根据输入框限定的最大值,最小值筛选匹配范围内的数据。
下面我们说明下具体的实现步骤:
1.定义自定义弹框方法:customFilterDialog
  1. function customFilterDialog(sheet, filterHitInfo) {
  2.       this._sheet = sheet;
  3.       this._filterHitInfo = filterHitInfo;
  4.       this._container = null;
  5.       this.init();
  6.         }
复制代码

2.写初始化弹框的方法
  1.    customFilterDialog.prototype.init = function () {
  2.             var $overlay = $("<div><div style='position: absolute;width:180px; border: 1px solid;background-color: #fff;height:100px;backgroundcolor:gray;'><label style='position: absolute;top:5px;left:5px;'>最小值</label><input id='min' style='position: absolute;left: 60px;top: 5px;width:100px;height:20px' min='0' max='100' /><label style='position: absolute;top:35px;left:5px;'>最大值</label><input id='max' style='position: absolute;width:100px;left: 60px;height:20px;top:35px;' min='0' max='100' /><button id='filter' style='position: absolute;width:100px; height:30px;top:66px;left:50px;'>确定</button></div></div>");
  3.             $overlay.css("width", 100000);
  4.             $overlay.css("height", 100000);
  5.             $overlay.css("left", 0);
  6.             $overlay.css("top", 0);
  7.             $overlay.css("z-index", 100000)
  8.             $overlay.css("position", "absolute");
  9.             $overlay.css("display", "hidden");
  10.             this._container = $overlay[0];
  11.             $overlay.appendTo($(document.body));
  12.         }
复制代码
3实现open方法,通过样式控制筛选弹框的显示,弹框显示时,监听确定按钮,点击确定按钮,根据输入的最大值、最小值进行筛选操作。

  1. customFilterDialog.prototype.open = function () {
  2.             var sheet = this._sheet, tempSpread = sheet.getParent(), self = this;
  3.             $(self._container).css("display", "display");
  4.             var x = self._filterHitInfo.x + self._filterHitInfo.width + tempSpread.getHost().offsetLeft;
  5.             var y = self._filterHitInfo.y + self._filterHitInfo.height + tempSpread.getHost().offsetTop;
  6.             $(self._container).children().css({"left": x, "top": y});
  7.             if (window.filterMaxValue) {
  8.                 $(self._container).children().val(window.filterMaxValue);
  9.             }
  10.             $(self._container).bind("mousedown", function (event) {
  11.                 if (event.target === self._container) {
  12.                     self.close();
  13.                 }
  14.             });
  15.             document.getElementById('filter').addEventListener('click', function() {
  16.                 self.doFilter();
  17.                 self.close();
  18.         });
  19.         }
复制代码
4 实现close、doFilter方法     doFilter方法中是筛选的具体逻辑实现。
5 给对应单元格设置筛选行为,并在openFilterDialog被调用时,创建一个自定义弹框
  1. var filter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(2, 4, salesData.length - 1, salesData[0].length - 3));
  2.             sheet.rowFilter(filter);
复制代码
  1.   GC.Spread.Sheets.Filter.HideRowFilter.prototype.openFilterDialog = function (filterButtonHitInfo) {
复制代码
详细代码可以查看附件Demo。

customFilterDialog.zip

2.93 KB, 下载次数: 519

组件化表格编辑器(预览版)试用进行中,点击了解详情!
请点击评分,对我的服务做出评价!5分为非常满意!

4 个回复

倒序浏览
zhanglibin
初级会员   /  发表于:2021-11-12 10:26:18
沙发
您好遇到同页面多实例,有冲突怎么解决;
image.png168343199.png
demo代码见附件: customFilterDialog 2.html.zip (3.4 KB, 下载次数: 513)
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-11-12 13:58:53
板凳
zhanglibin 发表于 2021-11-12 10:26
您好遇到同页面多实例,有冲突怎么解决;

demo代码见附件:

已在此贴回复
https://gcdn.grapecity.com.cn/fo ... &extra=page%3D1
回复 使用道具 举报
zhanglibin
初级会员   /  发表于:2021-11-12 14:48:39
地板
Derrick.Jiao 发表于 2021-11-12 13:58
已在此贴回复
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=136106&extra=page%3D1

收到,问题已解决,thanks teacher jiao
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-11-12 15:13:39
5#
zhanglibin 发表于 2021-11-12 14:48
收到,问题已解决,thanks teacher jiao

谢谢支持 有新问题欢迎开新帖交流~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部