Archivo de la etiqueta: jquery

jquery

SpringBoot 2. Kanban-Board

Posted on por
Responder

Kanban

En el link http://bootsnipp.com/snippets/0yDZy podemos ver el proyecto kanban-Board creada por bbilginn.

Esta desarrollado con html, css, jquery y booststrap. Vamos a tomar su código y modificarlo para hacerlo mas dinámico. Inicialmente crearemos las columnas y artículos (como los llama el autor) con Json. Json es creado con arreglos de javascript.

Identificar código HTML que se generara por javascript

Revisando el código HTML del proyecto podemos identificar que utiliza 2 objetos; columnas y artículos.

Y podemos construir estos objetos pasándole los siguientes datos.

Para Columna:

  1. Titulo
  2. id
  3. Artículos que contiene

Para Articulo:

  1. Nombre
  2. Titulo
  3. Descripción

Construir columnas y artículos con JavaScript

Podemos generar cada objeto con los siguientes códigos:

Para Columna:

var varColumna="";
varColumna ="<div class=\"panel panel-primary kanban-col\">";
varColumna+="	<div class=\"panel-heading\">"+titulo+" <i class=\"fa fa-2x fa-plus-circle pull-right\"></i></div>";
varColumna+="   <div class=\"panel-body\">";
varColumna+="   	<div id=\""+titulo+"\" class=\"kanban-centered\">";
varColumna+="		</div>";
varColumna+="   </div>";
varColumna+="   <div class=\"panel-footer\">";
varColumna+="   	<a href=\"#\">Add a card...</a>";
varColumna+="   </div>";
varColumna+="</div>";

Donde,

  • titulo = Nombre del titulo de la columna. Este mismo valor se puede usar como id ya que cada columna debe ser única.

Para Articulo:

varArticle = "";
varArticle	=  "<article class=\"kanban-entry grab\" id=\"+id+"\" draggable=\"true\">";
varArticle	+=  "  <div class=\"kanban-entry-inner\">";
varArticle	+=  "      <div class=\"kanban-label\">";
varArticle	+=  "          <h2><a href=\"#\">"+nombre+"</a> <span>"+titulo+"</span></h2>";
varArticle	+=  "          <p>"+descripcion+"</p>";
varArticle	+=  "      </div>";
varArticle	+=  "</div>";
varArticle	+=  "</article>";

Donde,

  • id = id del articulo
  • nombre =  Nombre del articulo
  •  titulo = Titulo del articulo
  • descripcion = Descripción del articulo

Puede haber muchas columnas y cada columna puede tener muchos artículos, por tanto, debemos almacenar los datos en arreglos y recorrerlos uno a uno para asignarlo a un div principal si es columna o a una columna si es articulo. Un arreglo de arreglos equivaldría a almacenar los datos en Json.

El código completo para construir columnas y artículos es:

var varColumna = null;
var varArticle = null;
for(var i=0;i<columns.length;i++){
	varColumna ="<div class=\"panel panel-primary kanban-col\">";
        varColumna+="	<div class=\"panel-heading\">"+columns[i].titulo+" <i class=\"fa fa-2x fa-plus-circle pull-right\"></i></div>";
        varColumna+="   <div class=\"panel-body\">";
        varColumna+="   	<div id=\""+columns[i].titulo+"\" class=\"kanban-centered\">";
        varColumna+="		</div>";
        varColumna+="   </div>";
        varColumna+="   <div class=\"panel-footer\">";
        varColumna+="   	<a href=\"#\">Add a card...</a>";
        varColumna+="   </div>";
        varColumna+="</div>";
	$("#sortableKanbanBoards").append(varColumna);
		
	varArticle	= "";
	for(var j=0;j<columns[i].article.length;j++){					
		varArticle	+=  "<article class=\"kanban-entry grab\" id=\"item"+String(i)+String(j)+"\" draggable=\"true\">";
		varArticle	+=  "  <div class=\"kanban-entry-inner\">";
		varArticle	+=  "      <div class=\"kanban-label\">";
		varArticle	+=  "          <h2><a href=\"#\">"+columns[i].article[j].nombre+"</a> <span>"+columns[i].article[j].titulo+"</span></h2>";
		varArticle	+=  "          <p>"+columns[i].article[j].descripcion+"</p>";
		varArticle	+=  "      </div>";
		varArticle	+=  "</div>";
		varArticle	+=  "</article>";
	}
	$("#"+columns[i].titulo).append(varArticle);
}

Notas,

  • sortableKanbanBoards es el id del div principal
  • Cada articulo se puede asignar a su respectiva columna porque la columna ya fue creada.

Crear Json con arreglos de JavaScript

Inicialmente creamos las funciones que generan Column y Article

function Column(titulo,article) {
	this.titulo	= titulo;
	this.article= article;
}
	
function Article(nombre,titulo,descripcion) {
	this.nombre		=nombre;
	this.titulo		=titulo;
	this.descripcion=descripcion;
}

Creamos objetos Article y los asignamos a un arreglo

var articleBacklog=[];
var article1 = new Article("Nombre","Titulo","Descripcion");
var article2 = new Article("Sistema Kanban","FrontEnd","Construir un sistema Kanbad de forma dinamica con json, javascript y jquery ");
articleBacklog.push(article1,article2);

Creamos los objetos column con el arreglo de articulos. El objeto column se asigna a un arreglo de columnas.

var columns=[];
var column1= new Column("Backlog",articleBacklog);
var column2= new Column("Proceso",[]);
var column3= new Column("Terminado",[]);
columns.push(column1,column2,column3);

Así obtenemos columns que es un arreglo de columnas y cada columna contiene sus articulos.

El equivalente el Json es:

{
	"columns": [{
		"column1": {
			"titulo": "Backlog",
			"Article": [{
				"nombre": "Nombre",
				"titulo": "Titulo",
				"descripcion": "Descripcion"
			}, {
				"nombre": "Sistema Kanban",
				"titulo": "FrontEnd",
				"descripcion": "Construir un sistema Kanbad de forma dinamica con json, javascript y jquery"
			}]
		}
	}, {
		"column2": [{
			"titulo": "Proceso",
			"Article": []
		}]
	}, {
		"column3": [{
			"titulo": "Terminado",
			"Article": []
		} ]
	}]
}

Cambios al proyecto original

HTML

  • Borrar todos las columna y articulos, sólo dejar el div sortableKanbanBoards.
  • Dejar el div processing-modal ya que se usa cuando se arrastra los articulos de una columna a otra.

JS

  • Cambiar $(function () { por $(document).ready(function() { para asegurarnos que se ejecute hasta que la pagina este completamente cargada.
  • Poner funciones que generan Column y Article
  • Crear objetos Column y Article
  • Código completo para construir columnas y artículos

Se puede descargar el proyecto completo de https://github.com/arielolivagh/kanbanDinamico

En la entrada siguiente mostraremos el proceso para clonar un proyecto de GitHub en Eclipse.

 

Intercambio entre listas

Posted on por
Responder

  El Post describe el código en JavaScript para realizar el intercambio de datos entre 2 listas.

Intercambio de datos entre dos listas

Intercambio de datos entre dos listas

Consta de cuatro botones, los cuales tienen las siguientes funciones, de acuerdo a su posición:

  1. Pasa todo el contenido de la lista izquierda a la lista derecha. Ordena la lista destino.
  2. Pasa los registros seleccionados de la lista derecha a la lista izquierda. Ordena la lista destino.
  3. Pasa los registros seleccionados de la lista izquierda a la lista derecha. Ordena la lista destino.
  4. Pasa todo el contenido de la lista derecha a la lista izquierda. Ordena la lista destino.

  El funcionamiento de los 4 botones es similar por lo tanto solo explicare el primero.

	$("#agregar").click(function() { 
            $("#selectGrupos option:selected").each(function(i){                    
            	var $x  = $("select#selectResult");
                var tot = $("#selectResult option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
                }).remove(); ordenarCombos2();});

Linea 1. Se ejecuta al hacer clic al botón correspondiente.
Linea 2. Selecciona los datos habilitados de la lista original -o todos si no tiene la instrucción selected–
Lineas 3 a 8. Obtiene la longitud de la lista destino y agrega los datos habilitados a la lista destino.
Linea 9. Remueve los datos habilitados de la lista origen. Ejecuta la función ordenarCombos2, la cual ordena los datos de la lista destino.

El siguiente recuadro muestra el script completo.

	$(document).ready(function(){    
		$("#agregar").click(function() { 
            $("#selectGrupos option:selected").each(function(i){                    
            	var $x  = $("select#selectResult");
                var tot = $("#selectResult option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
                }).remove(); ordenarCombos2();}); 
         $("#agregarTodo").click(function() { 
            $("#selectGrupos option").each(function(i){                    
            	var $x  = $("select#selectResult");
                var tot = $("#selectResult option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
                }).remove(); ordenarCombos2();}); 
             
     	$("#quitar").click(function() { 
        	$("#selectResult option:selected").each(function(i){                    
                var $x  = $("select#selectGrupos");
                var tot = $("#selectGrupos option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
               }).remove(); ordenarCombos1();}); 
               
                
     	$("#quitarTodo").click(function() { 
        	$("#selectResult option").each(function(i){                    
                var $x  = $("select#selectGrupos");
                var tot = $("#selectGrupos option").length;
                var  y  = $x.get(0)
                y.options[tot] = new Option; 
                y.options[tot].text = $(this).text(); 
                y.options[tot].value = tot; 
               }).remove(); ordenarCombos1();}); 
   	});
   	
   	function ordenarCombos1(){	
		var mylist = $("select#selectGrupos");
		var listitems = mylist.children("option").get();
		listitems.sort(function(a, b) {
   			var compA = $(a).text().toUpperCase();
   			var compB = $(b).text().toUpperCase();
   			return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
		})
		$.each(listitems, function(idx, itm) { mylist.append(itm); });
	}
	function ordenarCombos2(){	
		var mylist = $("select#selectResult");
		var listitems = mylist.children("option").get();
		listitems.sort(function(a, b) {
   			var compA = $(a).text().toUpperCase();
   			var compB = $(b).text().toUpperCase();
   			return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
		})
		$.each(listitems, function(idx, itm) { mylist.append(itm); });
	}

Para la llamada a la función se requieren dos select «selectGrupos» y «selectResult» y cuatro botones agregarTodo, agregar, quitar y quitarTodo

En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-IntercambioDeDatosEntreListas.html en un Explorardor web. eseste-IntercambioDeDatosEntreListas.rar