Eliminar elementos seleccionados con Js, PHP y MySQL


Muchos programas y sistemas tienen la opción para eliminar elementos seleccionados, un ejemplo seria gmail, donde puedes seleccionar los correos que quieres eliminar.

Este ejemplo esta integrado en un proyecto llamado multiact-one, el hecho de llamarlo multiact es por que una vez entendiendo el funcionamiento es facil o relativamente facil hacer cualquier acción con los elementos seleccionados.

En el siguiente video se muestra la instalación y funcionamiento del proyecto.

Les invito a que se suscriban a mi canal de Youtube estamos camino a 3mil suscriptores y queremos llegar a 10mil, me ayudan? https://youtube.com/evilnapsis/

Ahora explicare los 2 bloques de codigo mas importantes, el primero es la tabla donde se muestran los datos.

<a href="index.php?view=index&opt=new" class="btn btn-default"><i class='glyphicon glyphicon-user'></i> Nuevo</a>
<a href="javascript:void()" id="selectedall" class="btn btn-default"><i class='glyphicon glyphicon-th-list'></i> Seleccionar todos</a>
<a href="javascript:void()" id="delselected" class="btn btn-default"><i class='glyphicon glyphicon-remove'></i> Eliminar seleccionados</a>
<br><br>
<?php
$users = UserData::getAll();
if(count($users)>0){
?>
<div class="box box-primary">
<table class="table table-bordered datatable table-hover">
<thead>
<th>
</th>
<th>Nombre completo</th>
<th>Nombre de usuario</th>
<th></th>
</thead>
<?php
foreach($users as $user){
?>
<tr id="tr_<?php echo $user->id; ?>"> <!– Agregamos el ID del usuario en el ID del elemento TR –>
<td style="width: 30px; ">
<input type="checkbox" id="item_<?php echo $user->id; ?>" class="myitem"> <!– Agreamos el ID del usuario en el ID del check, ademas una clase –>
</td>
<td><?php echo $user->name." ".$user->lastname; ?></td>
<td><?php echo $user->username; ?></td>
<td style="width:120px;">
<a href="index.php?view=index&opt=edit&id=<?php echo $user->id;?>" class="btn btn-warning btn-xs">Editar</a>
<a href="index.php?action=users&opt=del&id=<?php echo $user->id;?>" class="btn btn-danger btn-xs">Eliminar</a>
</td>
</tr>
<?php
}
echo "</table></div>";
}else{
?>
<p class="alert alert-warning">No hay usuarios.</p>
<?php
}
?>

Les explico (La explicación esta basada en el Gist, en el archivo original los números de linea son relativos).

  • Linea 1: Botón de nuevo
  • Linea 2: Botón de seleccionar todos
  • Linea 3: Botón Eliminar seleccionados
  • Linea 6: Obtener todos los usuarios
  • Linea 19: Empieza el ciclo para recorrer los usuarios
  • Linea 21: Agregamos el Id a cada TR para saber a que usuario corresponde
  • Linea 23: Agregamos un checkbox con el ID del usuario o elemento para seleccionarlo y saber que elemento vamos a eliminar.
  • Linea 24: Termina el ciclo

Ahora en el siguiente bloque de código javascript tenemos las funciones para seleccionar todos y eliminar seleccionados.

$("#selectedall").click(function(e){ // Funcion para seleccionar todos
e.preventDefault();
var elements = document.getElementsByClassName("myitem"); // Obtenemos los elementos checkbox
for(var i=0;i<elements.length;i++){ // Recorremos los elementos
elements[i].checked = true; // Hacemos TRUE los elementos, para que se activen los checkboxes
}
}); // Termina la funcion para seleccionar todos
$("#delselected").click(function(e){ // Funcion para eliminar los elementos seleccionados
e.preventDefault();
var elements = document.getElementsByClassName("myitem"); // Obtenemos los elementos checkbox
var checkeds = []; // Creamos un arrar para guardar los ID de los elementos seleccionados
for(var i=0;i<elements.length;i++){ // Recorremos todos los checkbox
if(elements[i].checked){ // Si elemento esta seleccionado o checked vamos a guardar el ID en el array checkeds
checkeds.push(elements[i].id); // Agregamos el ID al array checkeds
}
}
if(checkeds.length>0){ // Si los elementos seleccionados son mas de 0
for(var i=0; i < checkeds.length; i++){ // Recorremos los elementos seleccionados
var s = checkeds[i].split("_"); // Dividimos el ID que viene como item_ID para obtener el ID del elemento en la base de datos
$.get("./?action=users&opt=del&id="+s[1],"", function(da){ }); // Ejecutamos la URL para eliminar y pasamos como parametro el ID del elemento en la BD
$("#tr_"+s[1]).remove(); // Eliminamos el elemento TR que tiene el ID del elemento
}
}else{ // Si no hay elementos seleccionados
alert("No hay elementos seleccionados!");
}
}); // Termina la funcion para eliminar los elementos seleccioandos

Para entender mas fácil agregue comentarios en cada linea.

Descargar

Puedes descargar el ejemplo usando el siguiente enlace:

Link: http://eunsetee.com/11227357/multiact1

Para descargar debes hacer click, esperar 5 segundos y después hacer click en “Saltar Publicidad” en el botón Amarillo en la esquina superior derecha.

En el vídeo les muestro como instalar y usar el proyecto.

Conclusión

Es posible insertar cualquier tipo de acciones que se pueden ejecutar a los elementos seleccionados, algunas pueden ser por ejemplo: cambio de estatus, enviar por email, ocultar, entre otras.

Espero este ejemplo les sirva para sus proyectos personales o laborales. Saludos

Productos Populares

Leave a comment