Primero me gustaría ponerlos en contexto:
Hace unas semanas publiqué esta pregunta. El usuario me ayudó muchísimo, no obstante, en ese momento tenía lo siguiente:
La primera columna era de hora y las otras eran numéricas. Actualmente tengo columnas que pueden ser botones (representados en HTML como switch), switches como tal (cambian de color para diferenciarlos del anterior), etc.
Los problemas que estoy teniendo son dos:
- No sé cómo "duplicar" los switch con el mismo diseño que la fila anterior
- No sé cómo hacer que tome el valor de la fila anterior (si está en ON pues en ON)
Adjunto una captura de pantalla dónde se puede apreciar los dos puntos que mencioné anteriormente:
Como se puede apreciar en la imagen, la fila "duplicada" no coge el diseño ni tampoco el valor (se ve en OFF cuando debería estar en ON).
Mi código está totalmente basado en la respuesta que me dieron a la pregunta realizada que se puede ver en el enlace proporcionado más arriba.
/*Aquí estoy creando los "template", uno por cada tabla (yo tengo una tabla por día).*/
@forelse($dias as $dia)
<template id="plantilla-fila-{{$dia}}">
<tr class="fila">
@foreach($columnas as $columna)
<td class="tfsize">
@if($columna->tipo == 'selector')
<input class="switch-input" type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="0" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="warning" data-sid = "{{ $servicio->id }}" data-tid = "{{ $servicio->tipo_id }}" data-cid = "{{ $columna->id }}" data-d="{{ $dia }}" data-h="100">
@elseif($columna->tipo == 'boton')
<input class="switch-input" type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="0" data-on="ON" data-off="OFF" data-onstyle="primary" data-offstyle="secondary" data-sid = "{{ $servicio->id }}" data-tid = "{{ $servicio->tipo_id }}" data-cid = "{{ $columna->id }}" data-d="{{ $dia }}" data-h="100">
@else
<a href="" class="updateh fila sinEspacio" data-name="name" data-type="text" data-pk="1" data-sid = "{{ $servicio->id }}" data-tid = "{{ $servicio->tipo_id}}" data-cid = "{{ $columna->id }}" data-d="{{ $dia }}" data-h="100" data-title="Ingresar valor"></a>
@endif
</td>
@endforeach
@if(Auth::user()->user_type === 1)
<td class="tfsize"> <!-- $fila->columna_id -->
<span data-toggle="modal" data-target="#confirmDeletion">
<button id="{{ 'delete-button-'.$loop->index }}" class="deleteFila btn btn-xs btn-danger sinEspacio text-white" data-toggle="modal" data-sid="{{$servicio->id}}" data-tid="{{$servicio->tipo_id}}" data-cid="{{$columna->id}}" data-d="{{$dia}}" data-target="#exampleModal" data-placement="bottom" title="Eliminar" onclick=""><i class="material-icons md-10">delete</i></button>
</span>
</td>
@endif
</tr>
</template>
@empty
@endforelse
@endif
/*Aquí el código que me proporcionó el usuario. Lo único que he cambiado es que los datos los envía el servidor (incluida la hora), para no tener que calcularla en el frontend.*/
$('.duplicarFila').click(function(e) {
let _sid = $(this).data("sid");
let _tid = $(this).data("tid");
let _d = $(this).data("d");
let _token = '{{ csrf_token() }}';
$.ajax({
method: 'POST',
url: "{{route('tabla.store')}}",
data: {
token: _token,
sid: _sid,
tid: _tid,
d: _d,
},
success: function(data) {
if (data['success'] == true){
toastr.success('Agregada correctamente', 'Fila');
chooseTable(e.target.id, data['data']);
}else{
toastr.error('Error al agregar', 'Fila');
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
toastr.error('Error al añadir: ' + errorThrown, 'Fila');
}
});
})
function chooseTable(id, data)
{
switch (id){
case "btn_lunes":
crearFila('lunes', 'plantilla-fila-lunes', data)
break
case "btn_martes":
crearFila('martes', 'plantilla-fila-martes', data)
break
case "btn_miercoles":
crearFila('miercoles', 'plantilla-fila-miercoles', data)
break
case "btn_jueves":
crearFila('jueves', 'plantilla-fila-jueves', data)
break
case "btn_viernes":
crearFila('viernes', 'plantilla-fila-viernes', data)
break
case "btn_sabado":
crearFila('sabado', 'plantilla-fila-sabado', data)
break
case "btn_domingo":
crearFila('domingo', 'plantilla-fila-domingo', data)
break
}
}
function crearFila(tabla, plantilla, datos) {
//datos contiene la información de la fila duplicada que nos envía el servidor, no obstante, no la utilizamos de momento
//lo que hacemos es duplicar los datos del lado de frontend
console.log(JSON.stringify(datos))
// asignamos a un objeto jquery el DOM de la plantilla
const plantillaFila = $(document.getElementById(plantilla).content);
// analizamos si es la primera fila o no
//if ($("#" + tabla + " tbody tr").length > 0) {
tiempoSv = datos[0]['hora']
// tiempoSv = (60 x ) / 100
//---Versión dónde se duplicada la fila anterior, se cogía la hora y se sumaba cierto intervalo (todo desde el frontend)
// definimos intervalo
//let intervalo = 50
// leemos el dato anterior
//tiempo = $("#" + tabla + " tr:last").find("a").first("a").attr('data-h');
//valor = $("#" + tabla + " tr:last").find("a").first("a").attr('data-h');
// sumamos el intervalo que deseamos
//hour = parseInt(tiempo) + intervalo
//hour = parseInt(tiempoSv)
//} else {
// si es la primera
//hour = 0
//}
hour = parseInt(tiempoSv);
if(hour <= 2400){
// añadimos ceros a la izquierda
let valor4digitos = hour.toString().padStart(4, "0")
console.log('valor4digitos: ' + valor4digitos)
// partimos en dos trozos de 2 caracteres la cadena de 4 dígitos anterior
let trozos = $(valor4digitos.match(/.{2}/g))
// convertimos el 50 en 30 para representar la mediahora
if (trozos[1] == 50) trozos[1] = 30
else trozos[1] = '00'
// establecemos la hora
let hora = trozos[0] + ":" + trozos[1]
datos.forEach( function(elemento) {
if(elemento['columna_id'] > 1)
plantillaFila.find("a[data-cid='"+elemento['columna_id']+"']").html(elemento['valor'])
console.log("El valor que se le está asignando a la nueva fila es de: " + elemento['valor']);
});
// modificamos la hora
plantillaFila.find("a[data-cid='1']").html(hora)
// modificamos el atributo data-h, data-sid, data-d, data-tid en todos los enlaces <a>
plantillaFila.find("a").attr('data-h', valor4digitos)
plantillaFila.find("a").attr('data-sid', datos[0]['servicio_id'])
plantillaFila.find("a").attr('data-tid', datos[0]['tipo_id'])
console.log("El tipo_id asignado es: " + datos[0]['tipo_id'])
plantillaFila.find("a").attr('data-d', datos[0]['dia'])
// creamos un fragmento en memoria
const fragment = $(document.createDocumentFragment());
// clonamos la plantilla en una nueva variable
const clone = plantillaFila.clone(true)
// agregamos el clon en el fragmento
fragment.append(clone)
// agregamos el fragmento en la tabla
$("#" + tabla + " tbody").append(fragment)
}
}
En base a la primera respuesta donde se me indica que faltan datos, los agregaré aquí debajo:
<a class="btn btn-sm float-right btn-primary text-white" title="Agregar fila"><i id="btn_domingo" data-sid = "{{$servicio->id}}" data-tid = "{{$servicio->tipo_id}}" data-d = "domingo" class="duplicarFila material-icons mic">add</i></a>
//Código de un switch correcto
<td class="tfsize">
<div class="toggle btn btn-success btn-xs slow" data-toggle="toggle" role="button" style="width: 46.4062px; height: 18.5938px;">
<input type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="1" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="warning" data-sid="1" data-tid="1" data-cid="2" data-d="martes" data-h="2300" checked="">
<div class="toggle-group">
<label for="toggle" class="btn btn-success btn-xs toggle-on">ON</label>
<label for="toggle" class="btn btn-warning btn-xs toggle-off">OFF</label>
<span class="toggle-handle btn btn-light btn-xs"></span>
</div>
</div>
</td>
//Código de un switch generado
<td class="tfsize">
<input type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="0" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="warning" data-sid="1" data-tid="1" data-cid="2" data-d="miercoles" data-h="100">
</td>