SpreadJS实现自定义筛选弹出框

收藏

本帖最后由 Fiooona 于 2019-6-20 08:47 编辑

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

这里我们先看看默认的筛选弹出框的样式：
image.png641771545.png

为了使筛选弹出框轻量简洁，更贴合与用户的实际需求，可以对其进行自定义设置。在本文中实现的是根据输入框限定的最大值，最小值筛选匹配范围内的数据。
下面我们说明下具体的实现步骤：
1.定义自定义弹框方法：customFilterDialog

复制代码

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);

复制代码