请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

198

主题

9869

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
15465

讲师达人悬赏达人微信认证勋章SpreadJS 认证SpreadJS 高级认证元老葡萄

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-6-1 10:06  /   查看:697  /  回复:0
Excel中在筛选的时候,下方的状态栏会出现筛选结果的提示,例如下图所示,Excel筛选之后会在下方状态栏红框所示位置显示被筛选出记录的总数。
image.png331731871.png



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


SpreadJS默认的状态栏中源生没有支持此类功能,但是SpreadJS状态栏中的内容是可以灵活定制的,通过自定制我们可以实现类似效果。
下面是自定制状态栏的操作步骤,以在线表格编辑器为例:
1.获取状态栏对象
在线表格编辑器中可以通过下面的代码获取状态栏的对象
  1. let statusBar = GC.Spread.Sheets.StatusBar.findControl(document.getElementsByClassName("gc-statusBar")[0]);
复制代码
如果是非在线表格编辑器使用(只用SpreadJS),可以参考学习指南中自定制状态栏中的方法来找到状态栏对象
2.定制状态栏
这里我们需要先创建定制区域的对象,并将其原型指向GC.Spread.Sheets.StatusBar.StatusItem。
  1. let StatusItem = GC.Spread.Sheets.StatusBar.StatusItem;
  2.                         function FilterItem (name, options) {
  3.   StatusItem.call(this, name, options);
  4.                         }
  5.                         FilterItem.prototype = new StatusItem();
复制代码
之后我们需要重写其中的onUpdate方法,onUpdate用于更新定制区域的内容。由于筛选结果的数量是随着筛选条件的变化而变化的,所以onUpdate方法中需要在筛选之后去更新定制区域的结果。
  1. FilterItem.prototype.onUpdate = function (visible, value) {
  2.   if(value!=null){
  3.     this.value = value;
  4.   }
  5.   if(visible!=null){
  6.     this.visible = visible;
  7.   }
  8.                                
  9.   StatusItem.prototype.onUpdate.call(this, this.value);
  10.                         };
复制代码
在方法中,由于在Excel中该区域只有在筛选操作之后才会显示出来,当全选的时候内容是隐藏的。所以默认情况下该区域不进行显示,筛选操作之后,需要在onUpdate方法中更改其显示状态(visible)并进行赋值。所以方法中会传入两个参数(visible,value)visible用于控制目前的选中状态,value用于更新结果。
3.初始化定制区域对象
初始化定制区域对象的时候,从之前的代码我们可以看到GC.Spread.Sheets.StatusBar.StatusItem 初始化时候需要给两个参数name,option,name代表了这个对象的唯一标识名称,option则是该对象的一些设置。
  1. var filterItem = new FilterItem('selectInfoItem', {
  2.   menuContent: '筛选结果',
  3.   tipText: '此工作表中应用了一个筛选',
  4.   visible: false,
  5.   showStatusInContexMenu: false,
  6.   value: ''
  7.                         });
复制代码
这里做了一下设置,通过tipText设置了tip,tip文本参考了Excel的行为。通过visible让其默认隐藏不显示。showStatusInContexMenu: false表示该选项不会出现在状态栏的右键菜单中(也是与Excel的行为保持一致)。value为默认值,设置为空,后续需要的时候再进行更新。
之后我们将定制区域对象添加到状态栏中
  1. statusBar.add(filterItem);
复制代码
4.监听事件更新定制区域状态
由于筛选之后该区域才会显示内容,所以我们需要监听RangeFiltered事件,在事件中进行状态更新
  1. spread.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
  2.   var filterRowCount = info.sheet.rowFilter().range.rowCount;
  3.   var unfilteredCount = getFilterResult(info.sheet);
  4.   if(filterRowCount != unfilteredCount){
  5.     filterItem.onUpdate(true,"在"+filterRowCount+"条记录中找到"+unfilteredCount+"个");
  6.   }else{
  7.     filterItem.onUpdate(false,"");
  8.   }
  9.                         });
  10.                        
  11.                         function getFilterResult(sheet){
  12.   var rowFilter = sheet.rowFilter();
  13.   var range = rowFilter.range;
  14.   var unfilteredCount = 0
  15.   for(var i = 0; i < range.rowCount; i++){
  16.     var row = range.row+i;
  17.     if(!rowFilter.isRowFilteredOut(row)){
  18.       unfilteredCount++;
  19.     }
  20.   }
  21.   return unfilteredCount;
  22.                         }
复制代码
这里在事件中,通过info.sheet.rowFilter().range.rowCount可以获取筛选的总数。然后通过getFilterResult方法来获取筛选结果的数量。
然后进行一个判断如果筛选结果的数量等于总数时,即为全选,根据Excel的逻辑全选的时候下方状态栏不显示结果。非全选是显示。
于是调用onUpdate方法将对象参数传入进行更新。

以上就是如何在SpreadJS中定制像Excel一样的状态栏筛选信息提示。
完整demo详见附件

状态栏显示筛选状态.zip

2.51 MB, 下载次数: 51

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部