Teach you how to query data in the report

Abstract: This article was originally published on CSDN by the technical team of Grape City. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.

Preface

In today's era of information explosion, faced with massive amounts of data, we often need to extract valuable information from them to make better decisions. And data screening is just a method that can help us quickly find what we need in a lot of information. By using the data filtering tool, you can easily filter out the data under specific conditions, filter and sort the data for better analysis and understanding of the data. Data screening is not only a means to effectively manage large amounts of information, but also the core of modern data processing techniques. In the era of big data, understanding and proficiency in data screening skills will help you better understand and use the data resources you have. Today, the editor will introduce to you how to use JavaScript to introduce the function of data filtering in the report.

This article uses the software Visual Studio Code (hereinafter referred to as "VSCode") as the programming environment, please run it as an administrator.

Contents of this article:

1. Demo introduction

2. Code articles:

 2.1 Create project files and import resources

 2.2 Importing JS files

 2.3 Importing CSS files

 2.4 Import Html file

 2.5 Run the code

3. More resources

 3.1 Complete code resources

 3.2 More Form Plugin Demos

1. Demo introduction

The figure above is the running page of the tabular data filtering Demo. There are five columns of data in the page, which are the salesperson's name, date of birth, sales area, total sales amount of the salesperson, monthly sales amount, and sales ratio. Each column contains 10 lines of data information.

There are two requirements as follows:

1. I want to check the salesperson information and sales volume of the sales area North.
2. Just want to filter the data based on age on the page.

Solution: 1. Click the drop-down box of the Region table, select the North option, and then click OK. The queried data only includes North information.

2. Only select the Birth (date of birth) check box in the option bar on the right, so that only the information of the date of birth can be filtered.

The above is a brief introduction to the table filtering function, and the following describes how to use JavaScript to write this Demo.

2. Code

2.1 Create project files and import resources

The first step is to create a blank folder in the file manager as a project and open it with VSCode.

The second step is to create two new folders in the project to store JS files and CSS files.

The third step is to introduce the required JS files and CSS files. (The full code is in the source link for more resources).

So far, the steps of creating a project and importing resources have been completed, and the following introduces the writing of JS.

2.2 Importing JS files

The first step is to create a new .JS file in the JS folder, and the name can be arbitrary.

The second step is to introduce the required JavaScript method in the JS file:

1. Set the data and initialization method required in the page.

//set data

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. Edit the initSpread method:

(1): Add data filtering conditions.

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) Select the method for filtering data options.

//选择想要展示的数据筛选项

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[c];

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) The method of displaying all filtering conditions and hiding all filtering conditions.

//display filter conditions

_getElementById("showAll").addEventListener('click',function () {
    
    

if (filter) {
    
    

filter.filterButtonVisible(true);

checkBoxes.forEach(function(item) {
    
    

item.checked = true;

});

}

});

// hide filter

_getElementById("hideAll").addEventListener('click',function () {
    
    

if (filter) {
    
    

filter.filterButtonVisible(false);

checkBoxes.forEach(function(item) {
    
    

item.checked = false;

});

}

});

(4) The method to get the element.

//method to get element

function _getElementById(id){
    
    

return document.getElementById(id);

}

So far, the introduction of the JS file has been completed, and the writing of CSS is introduced below.

2.3 Importing CSS files

The first step is to create a new .CSS file in the CSS folder, and the name can be arbitrary.

The CSS style written in the second step:

.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; */

}

So far, the introduction of the CSS file has been completed, and the following describes the preparation of the Html file.

2.4 Import Html file

The first step is to create a .Html file in the project file, and the name can be arbitrary.

The second step is to import JS file resources in the Html file, mainly using the sparkline component (click here to learn about other component resources).

<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>

The third step is to write the format of the table and filter column.

<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>

The fourth step is to import JS files and CSS files ( note : the file names in SRC and HREF must be consistent with the file names in the second and third steps, otherwise the import will fail ).

<head>

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

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

</head>

So far, the introduction of the Html file has been completed.

2.5 Run the code

Before running, you need to download and install a plug-in: Live Server.

(Live Server plug-in)

After installing the plug-in, you need to restart the VSCode software, and then right-click Open With The Live Server (open with a browser) in the Html file to run it.

3. More resources

3.1 Complete code resources

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

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

3.2 More Form Plugin Demos

In addition to the use of JavaScript, data filtering functions can also be introduced in popular frameworks such as Vue and React. Not only that, but also many fancy operations, such as data binding and cell perspective , can be implemented to make the table more interactive and easy to use sex.