eOSP2/resources/views/bootstable.js

202 lines
7.6 KiB
JavaScript
Raw Normal View History

/*
Bootstable
@description Javascript library to make HMTL tables editable, using Bootstrap
@version 1.1
@autor Tito Hinostroza
*/
"use strict";
//Global variables
var params = null; //Parameters
var colsEdi =null;
var newColHtml = '<div class="btn-group pull-right">'+
'<button id="bEdit" type="button" class="btn btn-sm btn-default" onclick="rowEdit(this);">' +
'<span class="glyphicon glyphicon-pencil" > </span>'+
'</button>'+
'<button id="bElim" type="button" class="btn btn-sm btn-default" onclick="rowElim(this);">' +
'<span class="glyphicon glyphicon-trash" > </span>'+
'</button>'+
'<button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowAcep(this);">' +
'<span class="glyphicon glyphicon-ok" > </span>'+
'</button>'+
'<button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowCancel(this);">' +
'<span class="glyphicon glyphicon-remove" > </span>'+
'</button>'+
'</div>';
var colEdicHtml = '<td name="buttons">'+newColHtml+'</td>';
$.fn.SetEditable = function (options) {
var defaults = {
columnsEd: null, //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5"
$addButton: null, //Jquery object of "Add" button
onEdit: function() {}, //Called after edition
onBeforeDelete: function() {}, //Called before deletion
onDelete: function() {}, //Called after deletion
onAdd: function() {} //Called when added a new row
};
params = $.extend(defaults, options);
this.find('thead tr').append('<th name="buttons"></th>'); //encabezado vacío
this.find('tbody tr').append(colEdicHtml);
var $tabedi = this; //Read reference to the current table, to resolve "this" here.
//Process "addButton" parameter
if (params.$addButton != null) {
//Se proporcionó parámetro
params.$addButton.click(function() {
rowAddNew($tabedi.attr("id"));
});
}
//Process "columnsEd" parameter
if (params.columnsEd != null) {
//Extract felds
colsEdi = params.columnsEd.split(',');
}
};
function IterarCamposEdit($cols, tarea) {
//Itera por los campos editables de una fila
var n = 0;
$cols.each(function() {
n++;
if ($(this).attr('name')=='buttons') return; //excluye columna de botones
if (!EsEditable(n-1)) return; //noe s campo editable
tarea($(this));
});
function EsEditable(idx) {
//Indica si la columna pasada está configurada para ser editable
if (colsEdi==null) { //no se definió
return true; //todas son editable
} else { //hay filtro de campos
//alert('verificando: ' + idx);
for (var i = 0; i < colsEdi.length; i++) {
if (idx == colsEdi[i]) return true;
}
return false; //no se encontró
}
}
}
function FijModoNormal(but) {
$(but).parent().find('#bAcep').hide();
$(but).parent().find('#bCanc').hide();
$(but).parent().find('#bEdit').show();
$(but).parent().find('#bElim').show();
var $row = $(but).parents('tr'); //accede a la fila
$row.attr('id', ''); //quita marca
}
function FijModoEdit(but) {
$(but).parent().find('#bAcep').show();
$(but).parent().find('#bCanc').show();
$(but).parent().find('#bEdit').hide();
$(but).parent().find('#bElim').hide();
var $row = $(but).parents('tr'); //accede a la fila
$row.attr('id', 'editing'); //indica que está en edición
}
function ModoEdicion($row) {
if ($row.attr('id')=='editing') {
return true;
} else {
return false;
}
}
function rowAcep(but) {
//Acepta los cambios de la edición
var $row = $(but).parents('tr'); //accede a la fila
var $cols = $row.find('td'); //lee campos
if (!ModoEdicion($row)) return; //Ya está en edición
//Está en edición. Hay que finalizar la edición
IterarCamposEdit($cols, function($td) { //itera por la columnas
var cont = $td.find('input').val(); //lee contenido del input
$td.html(cont); //fija contenido y elimina controles
});
FijModoNormal(but);
params.onEdit($row);
}
function rowCancel(but) {
//Rechaza los cambios de la edición
var $row = $(but).parents('tr'); //accede a la fila
var $cols = $row.find('td'); //lee campos
if (!ModoEdicion($row)) return; //Ya está en edición
//Está en edición. Hay que finalizar la edición
IterarCamposEdit($cols, function($td) { //itera por la columnas
var cont = $td.find('div').html(); //lee contenido del div
$td.html(cont); //fija contenido y elimina controles
});
FijModoNormal(but);
}
function rowEdit(but) { //Inicia la edición de una fila
var $row = $(but).parents('tr'); //accede a la fila
var $cols = $row.find('td'); //lee campos
if (ModoEdicion($row)) return; //Ya está en edición
//Pone en modo de edición
IterarCamposEdit($cols, function($td) { //itera por la columnas
var cont = $td.html(); //lee contenido
var div = '<div style="display: none;">' + cont + '</div>'; //guarda contenido
var input = '<input class="form-control input-sm" value="' + cont + '">';
$td.html(div + input); //fija contenido
});
FijModoEdit(but);
}
function rowElim(but) { //Elimina la fila actual
var $row = $(but).parents('tr'); //accede a la fila
params.onBeforeDelete($row);
$row.remove();
params.onDelete();
}
function rowAddNew(tabId) { //Agrega fila a la tabla indicada.
var $tab_en_edic = $("#" + tabId); //Table to edit
var $filas = $tab_en_edic.find('tbody tr');
if ($filas.length==0) {
//No hay filas de datos. Hay que crearlas completas
var $row = $tab_en_edic.find('thead tr'); //encabezado
var $cols = $row.find('th'); //lee campos
//construye html
var htmlDat = '';
$cols.each(function() {
if ($(this).attr('name')=='buttons') {
//Es columna de botones
htmlDat = htmlDat + colEdicHtml; //agrega botones
} else {
htmlDat = htmlDat + '<td></td>';
}
});
$tab_en_edic.find('tbody').append('<tr>'+htmlDat+'</tr>');
} else {
//Hay otras filas, podemos clonar la última fila, para copiar los botones
var $ultFila = $tab_en_edic.find('tr:last');
$ultFila.clone().appendTo($ultFila.parent());
$ultFila = $tab_en_edic.find('tr:last');
var $cols = $ultFila.find('td'); //lee campos
$cols.each(function() {
if ($(this).attr('name')=='buttons') {
//Es columna de botones
} else {
$(this).html(''); //limpia contenido
}
});
}
params.onAdd();
}
function TableToCSV(tabId, separator) { //Convierte tabla a CSV
var datFil = '';
var tmp = '';
var $tab_en_edic = $("#" + tabId); //Table source
$tab_en_edic.find('tbody tr').each(function() {
//Termina la edición si es que existe
if (ModoEdicion($(this))) {
$(this).find('#bAcep').click(); //acepta edición
}
var $cols = $(this).find('td'); //lee campos
datFil = '';
$cols.each(function() {
if ($(this).attr('name')=='buttons') {
//Es columna de botones
} else {
datFil = datFil + $(this).html() + separator;
}
});
if (datFil!='') {
datFil = datFil.substr(0, datFil.length-separator.length);
}
tmp = tmp + datFil + '\n';
});
return tmp;
}