Contenido
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:
- Titulo
- id
- Artículos que contiene
Para Articulo:
- Nombre
- Titulo
- Descripción
Construir columnas y artículos con JavaScript
Podemos generar cada objeto con los siguientes códigos:
Para Columna:
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 |
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.
|
1 2 3 4 5 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
{ "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.
