Resumen: Este artículo fue publicado originalmente en CSDN por el equipo técnico de Grape City. Indique la fuente de la reimpresión: sitio web oficial de Grape City , Grape City proporciona a los desarrolladores herramientas, soluciones y servicios de desarrollo profesional para empoderar a los desarrolladores.
Prefacio
En la era actual de explosión de información, frente a cantidades masivas de datos, a menudo necesitamos extraer información valiosa de ellos para tomar mejores decisiones. Y la selección de datos es solo un método que puede ayudarnos a encontrar rápidamente lo que necesitamos en mucha información. Mediante el uso de la herramienta de filtrado de datos, puede filtrar fácilmente los datos en condiciones específicas, filtrar y clasificar los datos para un mejor análisis y comprensión de los datos. La detección de datos no es solo un medio para administrar de manera efectiva grandes cantidades de información, sino también el núcleo de las técnicas modernas de procesamiento de datos. En la era de los grandes datos, la comprensión y el dominio de las habilidades de filtrado de datos lo ayudarán a comprender y utilizar mejor los recursos de datos que tiene. Hoy, el editor le presentará cómo usar JavaScript para introducir la función de filtrado de datos en el informe.
Este artículo utiliza el software Visual Studio Code (en adelante, "VSCode") como entorno de programación, ejecútelo como administrador.
Contenido de este artículo:
1. Introducción a la demostración
2.1 Crear archivos de proyecto e importar recursos
2.2 Importación de archivos JS
2.3 Importación de archivos CSS
3.1 Recursos de código completo
3.2 Más demostraciones de complementos de formulario
1. Introducción a la demostración
La figura anterior es la página en ejecución de la demostración de filtrado de datos tabulares. Hay cinco columnas de datos en la página, que son el nombre del vendedor, la fecha de nacimiento, el área de ventas, el monto total de las ventas del vendedor, el monto de las ventas mensuales y el índice de ventas. Cada columna contiene 10 líneas de información de datos.
Hay dos requisitos de la siguiente manera:
- Quiero consultar la información del vendedor y el volumen de ventas del área de ventas Norte.
- Solo quiero filtrar los datos según la edad en la página.
Solución: 1. Haga clic en el cuadro desplegable de la tabla Región, seleccione la opción Norte y luego haga clic en Aceptar Los datos consultados solo incluyen información del Norte.
2. Solo seleccione la casilla de verificación Nacimiento (fecha de nacimiento) en la barra de opciones de la derecha, para que solo se pueda filtrar la información de la fecha de nacimiento.
Lo anterior es una breve introducción a la función de filtrado de tablas, y lo siguiente describe cómo usar JavaScript para escribir esta demostración.
2. Código
2.1 Crear archivos de proyecto e importar recursos
El primer paso es crear una carpeta en blanco en el administrador de archivos como un proyecto y abrirlo con VSCode.
El segundo paso es crear dos nuevas carpetas en el proyecto para almacenar archivos JS y archivos CSS.
El tercer paso es introducir los archivos JS y CSS necesarios. (El código completo está en el enlace fuente para obtener más recursos).
Hasta ahora, se han completado los pasos de creación de un proyecto e importación de recursos, y lo siguiente introduce la escritura de JS.
2.2 Importación de archivos JS
El primer paso es crear un nuevo archivo .JS en la carpeta JS, y el nombre puede ser arbitrario.
El segundo paso es introducir el método JavaScript requerido en el archivo JS:
1. Configure los datos y el método de inicialización necesarios en la página.
//establecer datos
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. Edite el método initSpread:
(1): Agregar condiciones de filtrado de datos.
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) Seleccione el método para filtrar las opciones de datos.
//选择想要展示的数据筛选项
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) El método de mostrar todas las condiciones de filtrado y ocultar todas las condiciones de filtrado.
//mostrar las condiciones del filtro
_getElementById("showAll").addEventListener('click',function () {
if (filter) {
filter.filterButtonVisible(true);
checkBoxes.forEach(function(item) {
item.checked = true;
});
}
});
// ocultar filtro
_getElementById("hideAll").addEventListener('click',function () {
if (filter) {
filter.filterButtonVisible(false);
checkBoxes.forEach(function(item) {
item.checked = false;
});
}
});
(4) El método para obtener el elemento.
//método para obtener el elemento
function _getElementById(id){
return document.getElementById(id);
}
Hasta ahora, la introducción del archivo JS se ha completado y la escritura de CSS se presenta a continuación.
2.3 Importación de archivos CSS
El primer paso es crear un nuevo archivo .CSS en la carpeta CSS, y el nombre puede ser arbitrario.
El estilo CSS escrito en el segundo paso:
.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; */
}
Hasta ahora, se ha completado la introducción del archivo CSS y, a continuación, se describe la preparación del archivo Html.
2.4 Importar archivo HTML
El primer paso es crear un archivo .Html en el archivo del proyecto, y el nombre puede ser arbitrario.
El segundo paso es importar los recursos del archivo JS en el archivo Html, principalmente usando el componente minigráfico (haga clic aquí para conocer otros recursos del componente).
<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>
El tercer paso es escribir el formato de la tabla y la columna de filtro.
<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>
El cuarto paso es importar archivos JS y CSS ( nota : los nombres de archivo en SRC y HREF deben ser coherentes con los nombres de archivo en el segundo y tercer paso; de lo contrario, la importación fallará ).
<head>
<script src="js/rowFilter.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/rowFilter.css">
</head>
Hasta ahora, se ha completado la introducción del archivo Html.
2.5 Ejecutar el código
Antes de ejecutar, debe descargar e instalar un complemento: Live Server.
(Complemento de servidor en vivo)
Después de instalar el complemento, debe reiniciar el software VSCode y luego hacer clic con el botón derecho en Abrir con el servidor en vivo (abrir con un navegador) en el archivo Html para ejecutarlo.
3. Más recursos
3.1 Recursos de código completo
https://github.com/GrapeCityXA/SpreadJS-rowFilter/tree/main (Github)
https://gitee.com/GrapeCity/spread-js-row-filter (Gitee)
3.2 Más demostraciones de complementos de formulario
Además del uso de JavaScript, las funciones de filtrado de datos también se pueden introducir en marcos populares como Vue y React. No solo eso, sino que también se pueden implementar muchas operaciones sofisticadas, como el enlace de datos y la perspectiva de celda , para hacer que la tabla sea más Sexo interactivo y fácil de usar.