From b7cc343e81103ac556dd26f775957f33e68cfcd4 Mon Sep 17 00:00:00 2001 From: LARABA MOHAMMED SEDDIK Date: Sat, 3 Apr 2021 17:03:38 +0100 Subject: [PATCH] Added input type in options #15 --- bootstable.js | 475 +++++++++++++++++++++++++++----------------------- 1 file changed, 253 insertions(+), 222 deletions(-) diff --git a/bootstable.js b/bootstable.js index 35165c7..fc51b23 100644 --- a/bootstable.js +++ b/bootstable.js @@ -7,256 +7,287 @@ Bootstable "use strict"; //Global variables var params = null; //Parameters -var colsEdi =null; +var colsEdi = null; +var colsTyp = null; var newColHtml = '
'+ -''+ -''+ -''+ -''+ - '
'; - //Case NOT Bootstrap - var newColHtml2 = '
'+ - ''+ - ''+ - ''+ - ''+ + ''+ + ''+ + ''+ + ''+ '
'; -var colEdicHtml = ''+newColHtml+''; +//Case NOT Bootstrap +var newColHtml2 = '
'+ + ''+ + ''+ + ''+ + ''+ + '
'; +var colEdicHtml = '' + newColHtml + ''; $.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 - bootstrap: true, //Indicates bootstrap is present. - 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); - var $tabedi = this; //Read reference to the current table. - $tabedi.find('thead tr').append(''); //Add empty column - if (!params.bootstrap) { - colEdicHtml = ''+newColHtml2+''; - } - //Add column for buttons to all rows. - $tabedi.find('tbody tr').append(colEdicHtml); - //Process "addButton" parameter - if (params.$addButton != null) { - //There is parameter - params.$addButton.click(function() { - rowAddNew($tabedi.attr("id")); - }); - } - //Process "columnsEd" parameter - if (params.columnsEd != null) { - //Extract felds - colsEdi = params.columnsEd.split(','); - } + var defaults = { + columnsEd: null, //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5" + columnsType: null, //Columns types (date,text,number,...) + $addButton: null, //Jquery object of "Add" button + bootstrap: true, //Indicates bootstrap is present. + 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); + var $tabedi = this; //Read reference to the current table. + $tabedi.find('thead tr').append(''); //Add empty column + if (!params.bootstrap) { + colEdicHtml = '' + newColHtml2 + ''; + } + //Add column for buttons to all rows. + $tabedi.find('tbody tr').append(colEdicHtml); + //Process "addButton" parameter + if (params.$addButton != null) { + //There is parameter + params.$addButton.click(function () { + rowAddNew($tabedi.attr("id")); + }); + } + //Process "columnsEd" parameter + if (params.columnsEd != null) { + //Extract felds + colsEdi = params.columnsEd.split(','); + } + + //Process "columnsEd" parameter + if (params.columnsType != null) { + //Extract felds + colsTyp = params.columnsType.split(','); + } }; + function IterarCamposEdit($cols, action) { //Iterate through editable fields in a row - var n = 0; - $cols.each(function() { - n++; - if ($(this).attr('name')=='buttons') return; //Exclude buttons column - if (!IsEditable(n-1)) return; //It's not editable - action($(this)); - }); - - function IsEditable(idx) { - //Indicates if the passed column is set to be editable - if (colsEdi==null) { //no se definió - return true; //todas son editable - } else { //hay filtro de campos - for (var i = 0; i < colsEdi.length; i++) { - if (idx == colsEdi[i]) return true; - } - return false; //no se encontró - } - } + var n = 0; + $cols.each(function () { + n++; + if ($(this).attr('name') == 'buttons') return; //Exclude buttons column + if (!IsEditable(n - 1)) return; //It's not editable + action($(this)); + }); + + function IsEditable(idx) { + //Indicates if the passed column is set to be editable + if (colsEdi == null) { //no se definió + return true; //todas son editable + } else { //hay filtro de campos + for (var i = 0; i < colsEdi.length; i++) { + if (idx == colsEdi[i]) return true; + } + return false; //no se encontró + } + } } + function ModoEdicion($row) { - if ($row.attr('id')=='editing') { - return true; - } else { - return false; - } + if ($row.attr('id') == 'editing') { + return true; + } else { + return false; + } } + //Set buttons state function SetButtonsNormal(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 + $(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 SetButtonsEdit(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 + $(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 } + //Events functions function butRowAcep(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 - }); - SetButtonsNormal(but); - params.onEdit($row); + 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 + }); + SetButtonsNormal(but); + params.onEdit($row); } + function butRowCancel(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 - }); - SetButtonsNormal(but); + 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 + }); + SetButtonsNormal(but); } -function butRowEdit(but) { - //Start the edition mode for a row. - 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 - var focused=false; //flag - IterarCamposEdit($cols, function($td) { //itera por la columnas - var cont = $td.html(); //lee contenido - //Save previous content in a hide
- var div = '
' + cont + '
'; - var input= ''; - $td.html(div + input); //Set new content - //Set focus to first column - if (!focused) { - $td.find('input').focus(); - focused = true; - } - }); - SetButtonsEdit(but); + +function butRowEdit(but) { + //Start the edition mode for a row. + 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 + var focused = false; //flag + IterarCamposEdit($cols, function ($td) { //itera por la columnas + var cont = $td.html(); //lee contenido + //Save previous content in a hide
+ var div = '
' + cont + '
'; + + var type = 'text'; + try { + type = colsTyp[$td.index()]; + } catch (ex) { + + } + var input = ''; + $td.html(div + input); //Set new content + //Set focus to first column + if (!focused) { + $td.find('input').focus(); + focused = true; + } + }); + SetButtonsEdit(but); } + function butRowDelete(but) { //Elimina la fila actual - var $row = $(but).parents('tr'); //accede a la fila - params.onBeforeDelete($row); - $row.remove(); - params.onDelete(); + var $row = $(but).parents('tr'); //accede a la fila + params.onBeforeDelete($row); + $row.remove(); + params.onDelete(); } + //Functions that can be called directly -function rowAddNew(tabId, initValues=[]) { - /* Add a new row to a editable table. - Parameters: - tabId -> Id for the editable table. - initValues -> Optional. Array containing the initial value for the - new row. - */ - var $tab_en_edic = $("#"+tabId); //Table to edit - var $rows = $tab_en_edic.find('tbody tr'); - //if ($rows.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 = ''; - var i = 0; - $cols.each(function() { - if ($(this).attr('name')=='buttons') { - //Es columna de botones - htmlDat = htmlDat + colEdicHtml; //agrega botones - } else { - if (i'+initValues[i]+''; - } else { +function rowAddNew(tabId, initValues = []) { + /* Add a new row to a editable table. + Parameters: + tabId -> Id for the editable table. + initValues -> Optional. Array containing the initial value for the + new row. + */ + var $tab_en_edic = $("#" + tabId); //Table to edit + var $rows = $tab_en_edic.find('tbody tr'); + //if ($rows.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 = ''; + var i = 0; + $cols.each(function () { + if ($(this).attr('name') == 'buttons') { + //Es columna de botones + htmlDat = htmlDat + colEdicHtml; //agrega botones + } else { + if (i < initValues.length) { + htmlDat = htmlDat + '' + initValues[i] + ''; + } else { htmlDat = htmlDat + ''; - } - } - i++; - }); - $tab_en_edic.find('tbody').append(''+htmlDat+''); - /*} else { - //Hay otras filas, podemos clonar la última fila, para copiar los botones - var $lastRow = $tab_en_edic.find('tr:last'); - $lastRow.clone().appendTo($lastRow.parent()); - $lastRow = $tab_en_edic.find('tr:last'); - var $cols = $lastRow.find('td'); //lee campos - $cols.each(function() { - if ($(this).attr('name')=='buttons') { - //Es columna de botones - } else { - $(this).html(''); //limpia contenido - } - }); - }*/ - params.onAdd(); + } + } + i++; + }); + $tab_en_edic.find('tbody').append('' + htmlDat + ''); + /*} else { + //Hay otras filas, podemos clonar la última fila, para copiar los botones + var $lastRow = $tab_en_edic.find('tr:last'); + $lastRow.clone().appendTo($lastRow.parent()); + $lastRow = $tab_en_edic.find('tr:last'); + var $cols = $lastRow.find('td'); //lee campos + $cols.each(function() { + if ($(this).attr('name')=='buttons') { + //Es columna de botones + } else { + $(this).html(''); //limpia contenido + } + }); + }*/ + params.onAdd(); } -function rowAddNewAndEdit(tabId, initValues=[]) { -/* Add a new row an set edition mode */ - rowAddNew(tabId, initValues); - var $lastRow = $('#'+tabId + ' tr:last'); - butRowEdit($lastRow.find('#bEdit')); //Pass a button reference + +function rowAddNewAndEdit(tabId, initValues = []) { + /* Add a new row an set edition mode */ + rowAddNew(tabId, initValues); + var $lastRow = $('#' + tabId + ' tr:last'); + butRowEdit($lastRow.find('#bEdit')); //Pass a button reference } + function TableToCSV(tabId, separator) { //Convert table to 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; + 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; } + function TableToJson(tabId) { //Convert table to JSON - var json = '{'; - var otArr = []; - var tbl2 = $('#'+tabId+' tr').each(function(i) { - var x = $(this).children(); - var itArr = []; - x.each(function() { - itArr.push('"' + $(this).text() + '"'); - }); - otArr.push('"' + i + '": [' + itArr.join(',') + ']'); - }) - json += otArr.join(",") + '}' - return json; -} \ No newline at end of file + var json = '{'; + var otArr = []; + var tbl2 = $('#' + tabId + ' tr').each(function (i) { + var x = $(this).children(); + var itArr = []; + x.each(function () { + itArr.push('"' + $(this).text() + '"'); + }); + otArr.push('"' + i + '": [' + itArr.join(',') + ']'); + }) + json += otArr.join(",") + '}' + return json; +}