关于前端:每周一个报表小技巧如何在报表中引入数据筛选功能

摘要：本文由葡萄城技术团队于思否原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。

在当今信息爆炸的时代，面对海量的数据，咱们经常须要从中提取有价值的信息，做出更好的决策。而数据筛选，正是一种能够帮忙咱们在泛滥信息中疾速找到所需的内容的办法。通过应用数据筛选工具，能够轻松地筛选出特定条件下的数据，对数据进行过滤和排序以便更好地剖析和意识数据。数据筛选不仅是一种无效治理大量信息的伎俩，也是古代数据处理技术的外围。在大数据时代，理解和熟练掌握数据筛选技巧将有助于帮忙更好地了解并应用所领有的数据资源。明天小编就为大家介绍如何应用 JavaScript 在报表中引入数据筛选的性能。

本文应用软件 Visual Studio Code(以下简称“VSCode”) 作为编程环境，请您以管理员身份运行它。

本文目录：

1.Demo 介绍篇

2. 代码篇：

2.1 创立工程文件并引入资源

2.2 引入 JS 文件

2.3 引入 CSS 文件

2.4 引入 Html 文件

2.5 运行代码

3. 更多资源篇

3.1 残缺代码资源

3.2 更多表格插件 Demo

上图是表格数据筛选 Demo 的运行页面，页面中一共有五列数据，别离是销售员姓名、出生日期、销售区域、该销售员的销售总金额、销售月金额和销售比例，每列下蕴含 10 行数据信息。

现有如下的两个需要：

想要查看销售区域是 North 的销售员信息和销售量状况。
只想在页面上依据年龄筛选数据。

解决办法：1. 点击 Region 表格的下拉框，抉择 North 选项，再点击确定，查问进去的数据就是只蕴含 North 的信息了。

2. 只抉择左边选项栏中的 Birth(出生日期) 勾选框，这样就只能筛选出生日期的信息了。

以上就是对于表格筛选性能的简略介绍，上面介绍如何使应用 JavaScript 编写这个 Demo。

第一步在文件管理器中创立一个空白的文件夹作为工程并用 VSCode 关上。

第二步在工程中新建两个文件夹用来寄存 JS 文件和 CSS 文件。

第三步引入须要的 JS 文件和 CSS 文件。（残缺的代码在更多资源的源码链接中）。

至此曾经实现了创立工程并引入资源的步骤，上面介绍 JS 的编写。

第一步在 JS 文件夹中新建一个.JS 文件，名称任意起即可。

第二步在 JS 文件中引入须要的 JavaScript 办法：

1. 设置页面中须要的数据和初始化办法。

// 设置数据

var salesData = [["SalesPers", "Birth", "Region", "SaleAmt", "ComPct", "ComAmt"],

["Joe", new Date("2000/01/23"), "North", 260, 0.1, 26],

["Robert", new Date("1988/08/21"), "South", 660, 0.15, 99],

["Michelle", new Date("1995/08/03"), "East", 940, 0.15, 141],

["Erich", new Date("1994/05/23"), "West", 410, 0.12, 49.2],

["Dafna", new Date("1992/07/21"), "North", 800, 0.15, 120],

["Rob", new Date("1995/11/03"), "South", 900, 0.15, 135],

["Jonason", new Date("1987/02/11"), "West", 300, 0.17, 110],

["Enana", new Date("1997/04/01"), "West", 310, 0.16, 99.2],

["Dania", new Date("1997/02/15"), "North", 500, 0.10, 76],

["Robin", new Date("1991/12/28"), "East", 450, 0.18, 35]];

// 页面加载

window.onload = function () {tableColumnsContainer = _getElementById("tableColumnsContainer");

// 设置

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});

// 初始化办法

initSpread(spread);

};

2. 编辑 initSpread 办法：

（1）：增加数据筛选的条件。

var sheet = spread.getSheet(0);

sheet.suspendPaint();

// 设置表格是否能够溢出

sheet.options.allowCellOverflow = true;

sheet.name("FilterDialog");

sheet.setArray(1, 1, salesData);

// 增加数据筛选

var filter = new spreadNS.Filter.HideRowFilter(new spreadNS.Range(2, 1, salesData.length - 1, salesData[0].length));

sheet.rowFilter(filter);

// 抉择想要筛选的数据

prepareFilterItems(sheet, salesData[0]);

sheet.defaults.rowHeight = 28;

sheet.setColumnWidth(1, 110);

sheet.setColumnWidth(2, 80);

sheet.setColumnWidth(3, 100);

sheet.setColumnWidth(4, 80);

sheet.setColumnWidth(5, 80);

sheet.setColumnWidth(6, 80);

sheet.getRange(2, 2, 10, 1).formatter("yyyy/mm/dd");

sheet.resumePaint();

（2）抉择筛选数据选项的办法。

// 抉择想要展现的数据筛选项

function prepareFilterItems(sheet, headers) {var items = [];

var filter = sheet.rowFilter(),

range = filter.range,

startColumn = range.col;

// 循环遍历想要获取的数据

for (var c = 0, length = headers.length; c < length; c++) {

var name = headers;

items.push('<div><label><input type="checkbox"checked data-index="' + (startColumn + c) + '">'+ name + '</label></div>');

}

tableColumnsContainer.innerHTML = items.join("");

var nodeList = tableColumnsContainer.querySelectorAll("input[type='checkbox']");

checkBoxes = [];

for (var i = 0, count = nodeList.length; i < count; i++) {var element = nodeList[i];

checkBoxes.push(element);

// 增加监听事件

element.addEventListener('change', function () {var index = +this.dataset.index; // +this.getAttribute("data-index");

// 判断是否显示筛选条件和筛选后的数据信息

if (filter) {filter.filterButtonVisible(index, this.checked);

    }

    });

    }

}

（3）显示所有筛选条件和暗藏所有筛选条件的办法。

// 显示筛选条件

_getElementById("showAll").addEventListener('click',function () {if (filter) {filter.filterButtonVisible(true);

checkBoxes.forEach(function(item) {item.checked = true;});

}

});

// 暗藏筛选条件

_getElementById("hideAll").addEventListener('click',function () {if (filter) {filter.filterButtonVisible(false);

checkBoxes.forEach(function(item) {item.checked = false;});

}

});

（4）获取元素的办法。

// 获取元素的办法

function _getElementById(id){return document.getElementById(id);

}

至此曾经实现了 JS 文件的引入，上面介绍 CSS 的编写。

第一步在 CSS 文件夹中新建一个.CSS 文件，名称任意起即可。

第二步编写的 CSS 款式：

.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-group {margin-bottom: 6px;}

.option-group input[type="checkbox"] {margin-right: 6px;}

body {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

#ss {

height: 98vh;

float: left;

width: 85%;

/* left: auto; */

}

至此曾经实现了 CSS 文件的引入，上面介绍 Html 文件的编写。

第一步在工程文件中创立一个.Html 文件，名称任意起即可。

第二步在 Html 文件中导入 JS 文件资源，次要用到的是迷你图组件（点击这里能够理解其余组件资源）。

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="spreadjs culture" content="zh-cn" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> 数据筛选 </title>

<!-- 引入 SpreadJS 相干的 CSS, 默认会有一个 CSS

SpreadJS 默认提供了 7 种 CSS，能够抉择一个适宜以后我的项目的引入

-->

<link rel="stylesheet" type="text/css" href="./css/gc.spread.sheets.excel2013white.15.1.0.css" />

<!-- 外围资源，最小依赖资源，只有引入了该资源，组件运行时就能显示进去 -->

<script type="text/javascript" src="./js/gc.spread.sheets.all.15.1.0.min.js"></script>

<!-- 中文资源文件，组件运行时默认会用英文资源，应用中文资源须要引入并设置 -->

<script type="text/javascript" src="./js/gc.spread.sheets.resources.zh.15.1.0.min.js"></script>

<!-- 形态相干资源 -->

<script type="text/javascript" src="./js/gc.spread.sheets.shapes.15.1.0.min.js"></script>

<!-- 透视表相干资源 -->

<script type="text/javascript" src="./js/gc.spread.pivot.pivottables.15.1.0.min.js"></script>

<!-- 图表的相干资源 -->

<script type="text/javascript" src="./js/gc.spread.sheets.charts.15.1.0.min.js"></script>

<!-- 二维码相干资源 -->

<script type="text/javascript" src="./js/gc.spread.sheets.barcode.15.1.0.min.js"></script>

<!-- 打印相干资源 -->

<script type="text/javascript" src="./js/gc.spread.sheets.print.15.1.0.min.js"></script>

<!-- PDF 相干资源 -->

<script type="text/javascript" src="./js/gc.spread.sheets.pdf.15.1.0.min.js"></script>

<!-- 集算表相干资源 集算表是 SpreadJS 特有的性能 -->

<script type="text/javascript" src="./js/gc.spread.sheets.tablesheet.15.1.0.min.js"></script>

</style>

</head>

第三步编写表格和筛选栏的格局。

<body>

<div class="sample-tutorial">

<!-- 显示表格 -->

<div id="ss" class="sample-spreadsheets"></div>

<div class="options-container">

<div class="option-group">

<!-- 显示所有的筛选条件 -->

<input id="showAll" type="button" value="Show All" title="Show all filter buttons of the table"/>

<!-- 暗藏所有的筛选条件 -->

<input id="hideAll" type="button" value="Hide All" title="Hide all filter buttons of the table"/>

</div>

<div class="option-group">

<h4>Show filter buttons:</h4>

<div id="tableColumnsContainer"></div>

</div>

</div>

</div>

</body>

第四步引入 JS 文件和 CSS 文件（留神：SRC 和 HREF 中的文件名必须和第二步与第三步中起的文件名统一，否则会导致引入失败 ）。

<head>

<script src="js/rowFilter.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/rowFilter.css">

</head>

至此曾经实现了 Html 文件的引入。

在运行前须要下载并装置一个插件：Live Server。

(Live Server 插件）

装置完插件后须要重启 VSCode 软件，而后在 Html 文件中右键点击 Open With The Live Server(以浏览器关上) 便可运行。

https://github.com/GrapeCityXA/SpreadJS-rowFilter/tree/main（Github）

https://gitee.com/GrapeCity/spread-js-row-filter (Gitee)

除了 JavaScript 的应用，还能够在风行的框架如 Vue、React 中引入数据筛选性能，不仅如此，还可实现许多花色操作，如数据绑定和单元格透视等，让表格更具交互性和易用性。

前言篇