Easy editable Grid de datos con vanilla JavaScript-GridEdit
| Autor: | gridedit |
|---|---|
| Views Total: | 3,168 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 22, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Una sencilla biblioteca de JavaScript ligera para crear una cuadrícula de datos fácilmente editable como la hoja de cálculo. Haga doble clic para hacer que una celda sea editable.
Funcionamiento
Cargue la biblioteca de gridedit. js necesaria en el documento.
<script src="path/to/gridedit.js"></script>
Cree un elemento DIV vacío que se servirá como contenedor para la cuadrícula de datos.
<div id="gridedit"></div>
Prepare los datos e inertes en la cuadrícula de datos mediante objetos de matriz JS y, a continuación, inicialice la cuadrícula de datos con devoluciones de llamada disponibles como se muestra a continuación.
ge = new GridEdit({
cols: [
{ label: 'Name', valueKey: 'name', type: 'string' },
{ label: 'Job Title', valueKey: 'jobTitle', type: 'string', style: { textAlign: 'left' } },
{ label: 'Number of Projects', valueKey: 'numProjects', type: 'number', editable: false }
],
rows: [
{ name: 'Ben Simmons', jobTitle: 'AWESOME!', numProjects: '1000'},
{ name: 'Chuck Guilbert', jobTitle: 'BORING', numProjects: '2'}
],
tableClass: 'table table-bordered',
beforeInit: function() {
// console.log('beforeInit');
},
afterInit: function() {
// console.log('afterInit');
},
beforeCellActivate: function(cell) {
if (cell.type === 'date' && cell.editable === true) {
// console.log(cell, 'This is a date field!');
}
if (cell.meta.valueKey === 'notes') {
// cell.element.onclick = function() {
//
return false;
// };
}
},
afterCellActivate: function(cell) {
// console.log(cell, 'afterCellActivate');
},
initialize: true
}); Siéntase libre de estilo de la cuadrícula de datos de la siguiente manera.
table { max-width: 100%; }
th { text-align: left; }
.table {
width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td { border-top: 0; }
.table > tbody + tbody { border-top: 2px solid #ddd; }
.table .table { background-color: #fff; }
.table-bordered { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td { border-bottom-width: 2px; }
#contextMenu { position: absolute; }
#contextMenu .disabled {
color: #C0C0C0;
background: none;
}
#contextMenu li a { cursor: pointer; }
.active {
background-color: #FFE16F !important;
opacity: 0.6;
}
.uneditable {
background: #FFBBB3 !important;
opacity: 0.6;
} Registro de cambios
06/22/2018
- Función de utilidades de actualizaciones para manejar claves con códigos de tecla de 144 o mayor
