SpreadJS自定义筛选按钮

收藏

本帖最后由 Lynn.Dou 于 2022-11-2 10:05 编辑

客户背景：
前几天有客户咨询了这样一个问题：
SpreadJS提供了筛选功能以及筛选按钮，但是筛选按钮的样式不大符合需求，期望的效果为一个小漏斗形状。
问可以实现吗？

步骤：
SpreadJS提供了丰富的接口供用户自定义，这点需求自然不在话下。
不喜欢原有的筛选按钮，那就隐藏好了：

sheet.rowFilter().filterButtonVisible(false);

复制代码

没有了筛选按钮，怎么实现UI操作呢？
SpreadJS提供了单元格按钮的功能，可以在原筛选按钮位置设置一个button，再结合我们的需求，执行筛选代码逻辑就可以了。
当然，显示的image也可以根据需要自己设置，找一个喜欢的图标替换（base64）。

var style = sheet.getStyle(1, 1);
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: base64Icon1,
command: (sheet, row, col, option) => {
var filter = sheet.rowFilter();
var cellRect = sheet.getCellRect(row, col);
var x = cellRect.x;
var y = cellRect.y;
var filterButtonHitInfo = {
rowFilter: filter,
row: row, col: col,
sheetArea: GC.Spread.Sheets.SheetArea.viewport,
x: x, y: y,
width: cellRect.width,
height: cellRect.height
};
filter.openFilterDialog(filterButtonHitInfo);
}
}
];
sheet.setStyle(1, 1, style);

复制代码

需要用另一个图标来表示筛选后的状态，那就通过RangeFiltered事件来控制筛选按钮的显示图片
主要代码如下：

sheet.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
var rowFilter = sheet.rowFilter();
var filterStyle = sheet.getStyle(1, 1);
if (rowFilter.getFilterItems(1).length > 0) {
filterStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: base64Icon2,
command: (sheet, row, col, option) => {
var filter = sheet.rowFilter();
var cellRect = sheet.getCellRect(row, col);
var x = cellRect.x;
var y = cellRect.y;
var filterButtonHitInfo = {
rowFilter: filter,
row: row, col: col,
sheetArea: GC.Spread.Sheets.SheetArea.viewport,
x: x, y: y,
width: cellRect.width,
height: cellRect.height
};
filter.openFilterDialog(filterButtonHitInfo);
}
}
];
} else {
filterStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: base64Icon1,
command: (sheet, row, col, option) => {
var filter = sheet.rowFilter();
var cellRect = sheet.getCellRect(row, col);
var x = cellRect.x;
var y = cellRect.y;
var filterButtonHitInfo = {
rowFilter: filter,
row: row, col: col,
sheetArea: GC.Spread.Sheets.SheetArea.viewport,
x: x, y: y,
width: cellRect.width,
height: cellRect.height
};
filter.openFilterDialog(filterButtonHitInfo);
}
}
];
}
sheet.setStyle(1, 1, filterStyle);
});

复制代码

来看下效果图：

完整代码请参考附件demo。

		自动登录	找回密码
密码			立即注册

SpreadJS自定义筛选按钮

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人