状态栏实现Excel筛选数量的提示

问题：怎么在状态栏实现Excel筛选数量的提示？

背景：

Excel中在筛选的时候，下方的状态栏会出现筛选结果的提示，例如下图所示，Excel筛选之后会在下方状态栏红框所示位置显示被筛选出记录的总数。

这个功能为用户在数据处理时提供了方便，可以实时知道筛选后的结果有多少。

如何在SpreadJS中也能实现同样的功能？

解决方案：

SpreadJS默认的状态栏中原生没有支持此类功能，但是SpreadJS状态栏中的内容是可以灵活定制的，通过自定制我们可以实现类似效果。

下面的代码以在线表格编辑器为例（如果是非在线表格编辑器使用（只用SpreadJS），可以参考学习指南中自定制状态栏中的方法来找到状态栏对象）

1.获取状态栏对象

let statusBar = GC.Spread.Sheets.StatusBar.findControl(document.getElementsByClassName("gc-statusBar")[0]);

如果不是在线表格编辑器使用（只用SpreadJS），可以参考学习指南中自定制状态栏中的方法来找到状态栏对象

2.定制状态栏，

这里我们需要先创建定制区域的对象，并将其原型指向GC.Spread.Sheets.StatusBar.StatusItem。

let StatusItem = GC.Spread.Sheets.StatusBar.StatusItem;
                        function FilterItem (name, options) {
  StatusItem.call(this, name, options);
                        }
                        FilterItem.prototype = new StatusItem();

之后重写其中的onUpdate方法，onUpdate用于更新定制区域的内容。由于筛选结果的数量是随着筛选条件的变化而变化的，所以onUpdate方法中需要在筛选之后去更新定制区域的结果。

FilterItem.prototype.onUpdate = function (visible, value) {
  if(value!=null){
    this.value = value;
  }
  if(visible!=null){
    this.visible = visible;
  }
                                
  StatusItem.prototype.onUpdate.call(this, this.value);
                        };

在方法中，由于在Excel中该区域只有在筛选操作之后才会显示出来，当全选的时候内容是隐藏的。所以默认情况下该区域不进行显示，筛选操作之后，需要在onUpdate方法中更改其显示状态（visible）并进行赋值。所以方法中会传入两个参数（visible,value）visible用于控制目前的选中状态，value用于更新结果。

3.初始化定制区域对象,添加到状态栏

var filterItem = new FilterItem('selectInfoItem', {
  menuContent: '筛选结果',
  tipText: '此工作表中应用了一个筛选',
  visible: false,
  showStatusInContexMenu: false,
  value: ''
});

statusBar.add(filterItem);

4.监听事件更新定制区域状态

spread.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
  var filterRowCount = info.sheet.rowFilter().range.rowCount;
  var unfilteredCount = getFilterResult(info.sheet);
  if(filterRowCount != unfilteredCount){
    filterItem.onUpdate(true,"在"+filterRowCount+"条记录中找到"+unfilteredCount+"个");
  }else{
    filterItem.onUpdate(false,"");
  }
});
                        
function getFilterResult(sheet){
  var rowFilter = sheet.rowFilter();
  var range = rowFilter.range;
  var unfilteredCount = 0
  for(var i = 0; i < range.rowCount; i++){
    var row = range.row+i;
    if(!rowFilter.isRowFilteredOut(row)){
      unfilteredCount++;
    }
  }
  return unfilteredCount;
}

在事件中，通过info.sheet.rowFilter().range.rowCount可以获取筛选的总数。然后通过getFilterResult方法来获取筛选结果的数量。然后进行一个判断如果筛选结果的数量等于总数时，即为全选，根据Excel的逻辑全选的时候下方状态栏不显示结果。非全选是显示。于是调用onUpdate方法将对象参数传入进行更新。

以上就是如何在SpreadJS中定制像Excel一样的状态栏筛选信息提示。

完整demo及教程详见下面的链接

SpreadJS定制状态栏实现Excel筛选数量的提示

作者: GrapeCity China | 审核：Richard.Ma | 更新时间：2023.12.26