概述
本 Demo 展示了如何启用和禁用自动扩展筛选范围功能。通过界面中的复选框,用户可以切换 allowAutoExtendFilterRange 选项,观察筛选范围如何自动扩展以包含额外的数据行。
实现思路
创建工作簿并初始化工作表
设置表头样式和列宽
添加示例数据(包含 First Name、Last Name、Score、Position 四列)
创建 HideRowFilter 并设置初始筛选范围(第 2-3 行,共 2 行数据)
绑定复选框事件,动态切换 allowAutoExtendFilterRange 选项
代码解析
创建筛选器并设置范围
这段代码创建了一个 HideRowFilter 实例,筛选范围从第 2 行开始,包含 2 行 4 列数据。通过 sheet.rowFilter() 方法将筛选器应用到工作表。
启用自动扩展筛选范围
事件监听器响应用户对复选框的操作,动态设置 spread.options.allowAutoExtendFilterRange 属性。当属性值为 true 时,筛选范围会自动扩展到原始范围下方,直到遇到空行。
运行效果
Demo 初始化后显示一个包含员工信息的表格,前两行数据(第 2-3 行)被设置为筛选范围
用户勾选"允许自动扩展筛选范围"复选框后,如果在筛选范围下方添加数据,筛选区域会自动扩展以包含新增行
取消勾选时,筛选范围保持初始设置不变
可以通过 rowFilter.extendedRange 属性获取扩展后的筛选范围
API 参考
allowAutoExtendFilterRange 属性
默认值为 false
设置为 true 时,自动扩展筛选范围到原始范围下方,直到遇到空值
只在普通工作表过滤器中生效,不适用于 table、pivotTable、tableSheet
HideRowFilter 构造函数
range: 可选参数,指定筛选范围
返回一个行筛选器实例
rowFilter 方法
value: 可选,要设置的行筛选器
不传参数时返回当前的行筛选器
extendedRange 属性
返回扩展后的筛选范围
当 allowAutoExtendFilterRange 为 false 时,extendedRange 与 range 相同
当 allowAutoExtendFilterRange 为 true 时,包含自动扩展的区域
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
spread.suspendPaint();
_bindEvent(spread);
var sheet = spread.getSheet(0);
var headerStyle = new spreadNS.Style();
headerStyle.font = "bold 11pt Calibri"
sheet.setStyle(1,1,headerStyle);
sheet.setStyle(1,2,headerStyle);
sheet.setStyle(1,3,headerStyle);
sheet.setStyle(1,4,headerStyle);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
sheet.getCell(1, 1).text("First Name");
sheet.getCell(1, 2).text("Last Name");
sheet.getCell(1, 3).text("Score");
sheet.getCell(1, 4).text("Position");
sheet.getCell(2, 1).text("Alexa");
sheet.getCell(2, 2).text("Wilder");
sheet.getCell(2, 3).text("90");
sheet.getCell(2, 4).text("Web Developer");
sheet.getCell(3, 1).text("Victor");
sheet.getCell(3, 2).text("Wooten");
sheet.getCell(3, 3).text("70");
sheet.getCell(3, 4).text(".NET Developer");
sheet.getCell(4, 1).text("Ifeoma");
sheet.getCell(4, 2).text("Mays");
sheet.getCell(4, 3).text("85");
sheet.getCell(4, 4).text("Sales Manager");
var basedFilterRange = new spreadNS.Range(2,1,2,4);
var rowFilter = new spreadNS.Filter.HideRowFilter(basedFilterRange);
sheet.rowFilter(rowFilter);
spread.resumePaint();
}
function _bindEvent (spread) {
_getElementById("allowAutoExtendFilterRange").addEventListener('change', function() {
spread.options.allowAutoExtendFilterRange = _getElementById("allowAutoExtendFilterRange").checked;
});
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<p>更改 allowAutoExtendFilterRange 的状态并打开筛选对话框，查看筛选范围如何自动扩展。</p>
<div class="option-group">
<input type="checkbox" id="allowAutoExtendFilterRange" />
<label for="allowAutoExtendFilterRange">允许自动扩展筛选范围</label>
</div>
</div>
</div>
</body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 6px;
}
label {
display: inline-block;
min-width: 90px;
margin-bottom: 6px;
}
select {
padding: 4px 6px;
}
p {
padding: 0 0 12px;
margin: 0;
}
.options-toggle {
display: none;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
