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

收藏

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

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

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.初始化定制区域对象
初始化定制区域对象的时候，从之前的代码我们可以看到GC.Spread.Sheets.StatusBar.StatusItem 初始化时候需要给两个参数name,option，name代表了这个对象的唯一标识名称，option则是该对象的一些设置。

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

复制代码

这里做了一下设置，通过tipText设置了tip，tip文本参考了Excel的行为。通过visible让其默认隐藏不显示。showStatusInContexMenu: false表示该选项不会出现在状态栏的右键菜单中（也是与Excel的行为保持一致）。value为默认值，设置为空，后续需要的时候再进行更新。
之后我们将定制区域对象添加到状态栏中

statusBar.add(filterItem);

复制代码

4.监听事件更新定制区域状态
由于筛选之后该区域才会显示内容，所以我们需要监听RangeFiltered事件，在事件中进行状态更新

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筛选数量的提示

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄