1/* 2Bootstable 3 @description Javascript library to make HMTL tables editable, using Bootstrap 4 @version 1.1 5 @autor Tito Hinostroza 6*/ 7"use strict"; 8//Global variables 9var params = null; //Parameters 10var colsEdi =null; 11var newColHtml = '<div class="btn-group pull-right">'+ 12'<button id="bEdit" type="button" class="btn btn-sm btn-default" onclick="butRowEdit(this);">' + 13'<span class="glyphicon glyphicon-pencil" > </span>'+ 14'</button>'+ 15'<button id="bElim" type="button" class="btn btn-sm btn-default" onclick="butRowDelete(this);">' + 16'<span class="glyphicon glyphicon-trash" > </span>'+ 17'</button>'+ 18'<button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="butRowCancel(this);">' + 19'<span class="glyphicon glyphicon-remove" > </span>'+ 20'</button>'+ 21 '</div>'; 22 //Case NOT Bootstrap 23 var newColHtml2 = '<div class="btn-group pull-right">'+ 24 '<button id="bEdit" type="button" class="btn btn-sm btn-default" onclick="butRowEdit(this);">' + 25 '<span class="glyphicon glyphicon-pencil" > â </span>'+ 26 '</button>'+ 27 '<button id="bElim" type="button" class="btn btn-sm btn-default" onclick="butRowDelete(this);">' + 28 '<span class="glyphicon glyphicon-trash" > X </span>'+ 29 '</button>'+ 30 '<button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="butRowAcep(this);">' + 31 '<span class="glyphicon glyphicon-ok" > â </span>'+ 32 '</button>'+ 33 '<button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="butRowCancel(this);">' + 34 '<span class="glyphicon glyphicon-remove" > â </span>'+ 35 '</button>'+ 36 '</div>'; 37var colEdicHtml = '<td name="buttons">'+newColHtml+'</td>'; 38$.fn.SetEditable = function (options) { 39 var defaults = { 40 columnsEd: null, //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5" 41 $addButton: null, //Jquery object of "Add" button 42 bootstrap: true, //Indicates bootstrap is present. 43 onEdit: function() {alert("edition");}, //Called after edition 44 onBeforeDelete: function() {}, //Called before deletion 45 onDelete: function() {}, //Called after deletion 46 onAdd: function() { 47 48 49 50 51 } //Called when added a new row 52 }; 53 params = $.extend(defaults, options); 54 var $tabedi = this; //Read reference to the current table. 55 $tabedi.find('thead tr').append('<th name="buttons"></th>'); //Add empty column 56 if (!params.bootstrap) { 57 colEdicHtml = '<td name="buttons">'+newColHtml2+'</td>'; 58 } 59 //Add column for buttons to all rows. 60 $tabedi.find('tbody tr').append(colEdicHtml); 61 //Process "addButton" parameter 62 if (params.$addButton != null) { 63 //There is parameter 64 params.$addButton.click(function() { 65 rowAddNew($tabedi.attr("id")); 66 }); 67 } 68 //Process "columnsEd" parameter 69 if (params.columnsEd != null) { 70 //Extract felds 71 colsEdi = params.columnsEd.split(','); 72 } 73}; 74function IterarCamposEdit($cols, action) { 75//Iterate through editable fields in a row 76 var n = 0; 77 $cols.each(function() { 78 n++; 79 if ($(this).attr('name')=='buttons') return; //Exclude buttons column 80 if (!IsEditable(n-1)) return; //It's not editable 81 action($(this)); 82 }); 83 84 function IsEditable(idx) { 85 //Indicates if the passed column is set to be editable 86 if (colsEdi==null) { //no se definió 87 return true; //todas son editable 88 } else { //hay filtro de campos 89 for (var i = 0; i < colsEdi.length; i++) { 90 if (idx == colsEdi[i]) return true; 91 } 92 return false; //no se encontró 93 } 94 } 95} 96function ModoEdicion($row) { 97 if ($row.attr('id')=='editing') { 98 return true; 99 } else { 100 return false; 101 } 102} 103//Set buttons state 104function SetButtonsNormal(but) { 105 $(but).parent().find('#bAcep').hide(); 106 $(but).parent().find('#bCanc').hide(); 107 $(but).parent().find('#bEdit').show(); 108 $(but).parent().find('#bElim').show(); 109 var $row = $(but).parents('tr'); //accede a la fila 110 $row.attr('id', ''); //quita marca 111} 112function SetButtonsEdit(but) { 113 $(but).parent().find('#bAcep').show(); 114 $(but).parent().find('#bCanc').show(); 115 $(but).parent().find('#bEdit').hide(); 116 $(but).parent().find('#bElim').hide(); 117 var $row = $(but).parents('tr'); //accede a la fila 118 $row.attr('id', 'editing'); //indica que está en edición 119} 120//Events functions 121function butRowAcep(but) { 122//Acepta los cambios de la edición 123 var $row = $(but).parents('tr'); //accede a la fila 124 var $cols = $row.find('td'); //lee campos 125 if (!ModoEdicion($row)) return; //Ya está en edición 126 //Está en edición. Hay que finalizar la edición 127 IterarCamposEdit($cols, function($td) { //itera por la columnas 128 var cont = $td.find('input').val(); //lee contenido del input 129 $td.html(cont); //fija contenido y elimina controles 130 }); 131 SetButtonsNormal(but); 132 params.onEdit($row); 133} 134function butRowCancel(but) { 135//Rechaza los cambios de la edición 136 var $row = $(but).parents('tr'); //accede a la fila 137 var $cols = $row.find('td'); //lee campos 138 if (!ModoEdicion($row)) return; //Ya está en edición 139 //Está en edición. Hay que finalizar la edición 140 IterarCamposEdit($cols, function($td) { //itera por la columnas 141 var cont = $td.find('div').html(); //lee contenido del div 142 $td.html(cont); //fija contenido y elimina controles 143 }); 144 SetButtonsNormal(but); 145} 146function butRowEdit(but,tabId) { 147 //Start the edition mode for a row. 148 var $row = $(but).parents('tr'); //accede a la fila 149 var $nbligne = $(but).parents('tr').index(); 150 151 var $cols = $row.find('td'); //lee campos 152 var $nbcolumn = $row.children().length; 153 $nbcolumn--; 154 155 if (ModoEdicion($row)) return; //Ya está en edición 156 //Pone en modo de edición 157 var focused=false; //flag 158 var $nb = 0; 159 IterarCamposEdit($cols, function($td) { //itera por la columnas 160 var cont = $td.html(); //lee contenido 161 //Save previous content in a hide <div> 162 $nb++; 163 var stepIndex = $('#smartwizard-validation').smartWizard("getStepIndex"); 164 165 166 if (($nb==1) && (stepIndex<=2)) 167 168 { 169 if (tabId =="input_addcreateur") 170 { 171 var idinput = tabId + "_select"+$nbligne; 172 var div = '<div style="display: none;">' + cont + '</div>'; 173 var input= '<select class="form-control select-sm" id="' + idinput +'" name="' + idinput +'" onclick="javascript:ad
173dOption_Createur('+idinput+');"></select>'; 174 } 175 else 176 { 177 var idinput = tabId + "_select"+$nbligne; 178 var div = '<div style="display: none;">' + cont + '</div>'; 179 var input= '<select class="form-control select-sm" id="' + idinput +'" name="' + idinput +'" onclick="javascript:addOption_Producteur('+idinput+');"></select>'; 180 181 } 182 } 183 else if ($nb==$nbcolumn) 184 { 185 var idinput = tabId + "_image"; 186 var div = '<div style="display: none;">' + cont + '</div>'; 187 var input= '<input name="' + idinput +'" id="' + idinput +'" class="form-control input-sm" value="' + cont + '" type="file">'; 188 } 189 else 190 { 191 var idinput = tabId + "_champ"; 192 var div = '<div style="display: none;">' + cont + '</div>'; 193 var input= '<input name="' + idinput +'" class="form-control input-sm" value="' + cont + '" type="text">'; 194 } 195 196 197 $td.html(div + input); //Set new content 198 //Set focus to first column 199 if (!focused) { 200 $td.find('input').focus(); 201 focused = true; 202 } 203 }); 204 SetButtonsEdit(but); 205} 206function butRowDelete(but) { //Elimina la fila actual 207 var $row = $(but).parents('tr'); //accede a la fila 208 params.onBeforeDelete($row); 209 $row.remove(); 210 params.onDelete(); 211} 212//Functions that can be called directly 213function rowAddNew(tabId, initValues=[]) { 214 /* Add a new row to a editable table. 215 Parameters: 216 tabId -> Id for the editable table. 217 initValues -> Optional. Array containing the initial value for the 218 new row. 219 */ 220 var $tab_en_edic = $("#"+tabId); //Table to edit 221 var $rows = $tab_en_edic.find('tbody tr'); 222 //if ($rows.length==0) { 223 //No hay filas de datos. Hay que crearlas completas 224 var $row = $tab_en_edic.find('thead tr'); //encabezado 225 var $cols = $row.find('th'); //lee campos 226 //construye html 227 var htmlDat = ''; 228 var i = 0; 229 $cols.each(function() { 230 if ($(this).attr('name')=='buttons') { 231 //Es columna de botones 232 htmlDat = htmlDat + colEdicHtml; //agrega botones 233 } else { 234 if (i<initValues.length) { 235 htmlDat = htmlDat + '<td>'+initValues[i]+'</td>'; 236 } else { 237 htmlDat = htmlDat + '<td></td>'; 238 } 239 } 240 i++; 241 }); 242 $tab_en_edic.find('tbody').append('<tr>'+htmlDat+'</tr>'); 243 /*} else { 244 //Hay otras filas, podemos clonar la última fila, para copiar los botones 245 var $lastRow = $tab_en_edic.find('tr:last'); 246 $lastRow.clone().appendTo($lastRow.parent()); 247 $lastRow = $tab_en_edic.find('tr:last'); 248 var $cols = $lastRow.find('td'); //lee campos 249 $cols.each(function() { 250 if ($(this).attr('name')=='buttons') { 251 //Es columna de botones 252 } else { 253 $(this).html(''); //limpia contenido 254 } 255 }); 256 }*/ 257 params.onAdd(); 258} 259function rowAddNewAndEdit(tabId, initValues=[]) { 260/* Add a new row an set edition mode */ 261 rowAddNew(tabId, initValues); 262 var $lastRow = $('#'+tabId + ' tr:last'); 263 butRowEdit($lastRow.find('#bEdit'),tabId); //Pass a button reference 264} 265function TableToCSV(tabId, separator) { //Convert table to CSV 266 var datFil = ''; 267 var tmp = ''; 268 var $tab_en_edic = $("#" + tabId); //Table source 269 $tab_en_edic.find('tbody tr').each(function() { 270 //Termina la edición si es que existe 271 if (ModoEdicion($(this))) { 272 $(this).find('#bAcep').click(); //acepta edición 273 } 274 var $cols = $(this).find('td'); //lee campos 275 datFil = ''; 276 $cols.each(function() { 277 if ($(this).attr('name')=='buttons') { 278 //Es columna de botones 279 } else { 280 datFil = datFil + $(this).html() + separator; 281 } 282 }); 283 if (datFil!='') { 284 datFil = datFil.substr(0, datFil.length-separator.length); 285 } 286 tmp = tmp + datFil + '\n'; 287 }); 288 return tmp; 289} 290function TableToJson(tabId) { //Convert table to JSON 291 var json = '{'; 292 var otArr = []; 293 var tbl2 = $('#'+tabId+' tr').each(function(i) { 294 var x = $(this).children();
295 var itArr = []; 296 x.each(function() { 297 itArr.push('"' + $(this).text() + '"'); 298 }); 299 otArr.push('"' + i + '": [' + itArr.join(',') + ']'); 300 }) 301 json += otArr.join(",") + '}' 302 return json; 303}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.