Biblioteca de JavaScript para tablas de estilos de hoja de cálculo-Spreadsheet. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: ChiefOfGxBxL
Views Total: 2,291
Sitio oficial: Ir a la web
Actualizado: August 3, 2018
Licencia: MIT

Vista prévia

Biblioteca de JavaScript para tablas de estilos de hoja de cálculo-Spreadsheet. js

Descripción

Spreadsheet. js es una pequeña biblioteca de JavaScript para crear y utilizar fácilmente tablas que actúan como hojas de cálculo. Similar a la hoja de cálculo de Excel.

Características

  • Columnas etiquetadas por letras (A, B, …, AA, … ZZ); filas etiquetadas con números de línea
  • Agregue nuevas columnas y filas
  • Seleccione fácilmente las celdas por nombres de hoja de cálculo (A5, G15, etc.)
  • Pestaña a través de las celdas para editarlas rápidamente en sucesión
  • Adjuntar controladores de evento a eventos de tabla (algunos implementados, otros aún en desarrollo)

¿Cómo funciona?

Para empezar, sólo tiene que incluir el archivo de JavaScript de Spreadsheet. js en la página web y estamos listos para ir.

<script src="Spreadsheet.js"></script>

Cree una tabla en ' container ' con 10 filas, 5 columnas.

var container = document.getElementById("container");
myTable = new Spreadsheet(container,10,5);

Aplica tus estilos CSS personalizados a la hoja de cálculo.

.Tablejs {

border: 1px SOLID #DDD;

border-spacing: 0;

border-collapse: collapse;
}

.Tablejs-gray {

background-color: #EEE;

text-align: center !important;

font-size: 0.8em;

border-bottom: 1px SOLID #DDD;
}

.Tablejs tr { }

.Tablejs td:first-child { border: 1px SOLID #DDD; } /* Selects the row counter column */

.Tablejs th {

background-color: #EEE;

border-bottom: 1px SOLID #DDD;

border-right: 1px SOLID #DDD;

width: 40px;

font-size: 0.9em;

font-weight: normal;
}

.Tablejs td {

border: 1px SOLID #EEE;

text-align: right;

padding: 2px;

cursor: default;
}

.Tablejs .cellFocus {

border: 2px SOLID #41A1F0;

padding: 1px 2px;
}

.Tablejs td[contentEditable="true"] {

border: 2px SOLID #1D76BF;

cursor: text;
}

Registro de cambios

08/03/2018

  • Soporte para el campo ' datos ' en opciones, que permite que una hoja de cálculo se rellene con los valores especificados cuando se crea. Los datos invalidan los campos ' Rows ' y ' cols ', dimensionar apropiadamente la hoja de cálculo para ajustarse a todos los datos proporcionados.

Te puede interesar: