本帖最后由 Fiooona 于 2019-6-20 08:47 编辑
SpreadJS是一款类Excel的纯前端表格控件,可以与现在主流的框架VUE、Angular、React轻松集成。本文介绍如何实现自定义的筛选框弹出框,效果如下图:
这里我们先看看默认的筛选弹出框的样式:
为了使筛选弹出框轻量简洁,更贴合与用户的实际需求,可以对其进行自定义设置。在本文中实现的是根据输入框限定的最大值,最小值筛选匹配范围内的数据。
下面我们说明下具体的实现步骤:
1.定义自定义弹框方法:customFilterDialog
- function customFilterDialog(sheet, filterHitInfo) {
- this._sheet = sheet;
- this._filterHitInfo = filterHitInfo;
- this._container = null;
- this.init();
- }
复制代码
2.写初始化弹框的方法
- customFilterDialog.prototype.init = function () {
- 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>");
- $overlay.css("width", 100000);
- $overlay.css("height", 100000);
- $overlay.css("left", 0);
- $overlay.css("top", 0);
- $overlay.css("z-index", 100000)
- $overlay.css("position", "absolute");
- $overlay.css("display", "hidden");
- this._container = $overlay[0];
- $overlay.appendTo($(document.body));
- }
复制代码 3实现open方法,通过样式控制筛选弹框的显示,弹框显示时,监听确定按钮,点击确定按钮,根据输入的最大值、最小值进行筛选操作。
- customFilterDialog.prototype.open = function () {
- var sheet = this._sheet, tempSpread = sheet.getParent(), self = this;
- $(self._container).css("display", "display");
- var x = self._filterHitInfo.x + self._filterHitInfo.width + tempSpread.getHost().offsetLeft;
- var y = self._filterHitInfo.y + self._filterHitInfo.height + tempSpread.getHost().offsetTop;
- $(self._container).children().css({"left": x, "top": y});
- if (window.filterMaxValue) {
- $(self._container).children().val(window.filterMaxValue);
- }
- $(self._container).bind("mousedown", function (event) {
- if (event.target === self._container) {
- self.close();
- }
- });
- document.getElementById('filter').addEventListener('click', function() {
- self.doFilter();
- self.close();
- });
- }
复制代码 4 实现close、doFilter方法 doFilter方法中是筛选的具体逻辑实现。
5 给对应单元格设置筛选行为,并在openFilterDialog被调用时,创建一个自定义弹框
- var filter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(2, 4, salesData.length - 1, salesData[0].length - 3));
- sheet.rowFilter(filter);
复制代码- GC.Spread.Sheets.Filter.HideRowFilter.prototype.openFilterDialog = function (filterButtonHitInfo) {
复制代码 详细代码可以查看附件Demo。
|
|