AdminADS/SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ordenamiento en JS

Browse Source
This commit is contained in:
caudillochon
2025-02-22 16:25:15 -07:00
parent 73f73663b7
commit dceeec905f
11 changed files with 612 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
PivotTable.aspx Normal file
View File

@@ -0,0 +1,84 @@
<%@ Page Title="Sistema de Información Gerencial" Language="C#" AutoEventWireup="false" CodeFile="PivotTable.aspx.cs" Inherits="PivotTable" %>
<!DOCTYPE html>
<html lang="es">
<head runat="server">
<meta charset="utf-8" />
<title>Tabla Dinámica con WebDataRocks (DataTable)</title>
<!-- Incluir el CSS de WebDataRocks -->
<link rel="stylesheet" href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" />
<!-- Incluir el archivo de localización en español -->
<script src="https://cdn.webdatarocks.com/latest/localization/webdatarocks.locale.es.js"></script>
<!-- Incluir la Toolbar y el script principal de WebDataRocks -->
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<style>
/* Estilos opcionales para el contenedor */
#wdr-component {
width: 100%;
height: 500px;
margin: 20px auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Se puede utilizar este literal para depuración o para mostrar el JSON generado -->
<asp:Literal ID="litJsonData" runat="server" Visible="false"></asp:Literal>
<!-- Contenedor donde se renderizará el pivot table -->
<div id="wdr-component"></div>
<script type="text/javascript">
// La variable "datosLocal" se inicializa con el JSON generado en C#
var datosLocal = <%= JsonData %>;
// Inicialización de WebDataRocks con configuración en español
var pivot = new WebDataRocks({
container: "#wdr-component", // Contenedor donde se renderizará la tabla dinámica
toolbar: true, // Activa la barra de herramientas (se mostrará en español)
report: {
dataSource: {
data: datosLocal, // Asigna el JSON obtenido desde C#
// Configuración detallada de los campos (fields)
fields: [
{ uniqueName: "Producto", caption: "Producto" },
{ uniqueName: "Categoría", caption: "Categoría" },
{ uniqueName: "Año", caption: "Año", type: "number", format: "0" },
{ uniqueName: "Ventas", caption: "Ventas Totales", type: "number", format: "$#,##0.00" },
{ uniqueName: "Región", caption: "Región" }
]
},
// Configuración de la estructura del reporte
slice: {
// Filas: se mostrarán los productos
rows: [
{ uniqueName: "Producto", caption: "Producto" }
],
// Columnas: se agruparán los datos por Año
columns: [
{ uniqueName: "Año", caption: "Año" }
],
// Medidas: se sumarán las ventas para cada combinación de Producto y Año
measures: [
{ uniqueName: "Ventas", aggregation: "sum", caption: "Total Ventas" }
],
// Filtros: se configura un filtro sobre el campo Región
filters: [
{
uniqueName: "Región",
caption: "Filtrar por Región",
filter: {
members: [
{ uniqueName: "Región.[Norte]" },
{ uniqueName: "Región.[Sur]" }
]
}
}
]
}
}
});
</script>
</div>
</form>
</body>
</html>