Problem generating an unordered list (ul) with bootstrap from javascript

Question

Problem generating an unordered list (ul) with bootstrap from javascript

Navigation

#1 by (1 votes)

0

The problem I have is to generate the list this presents me with 2 problems:

1. Sub-levels: From the second sub-level it adjusts to the left. The function that generates the list is recursive and creates sublevels depending on the json (a query I make of a table and this has the sublevels that the user wants to indicate (indeterminate)). I would like the bootstrap to order them indefinitely. Note: funcion ordenar() resizes json by sub-levels.

2. Json: When generating the list more than 1 time with the event of the click of the button, it repeats me the sub-levels, how could I solve that?

var arrayjson = [{
  "id": 5,
  "nombre": "Electrica",
  "id_padre": 0,
  "status": true
},
{
  "id": 6,
  "nombre": "Mecanica",
  "id_padre": 0,
  "status": true
},
{
  "id": 7,
  "nombre": "Sellos",
  "id_padre": 0,
  "status": true
},
{
  "id": 8,
  "nombre": "Motores",
  "id_padre": 6,
  "status": true
},
{
  "id": 55,
  "nombre": "Piston",
  "id_padre": 8,
  "status": true
},
{
  "id": 60,
  "nombre": "Bobina",
  "id_padre": 8,
  "status": true
},
{
  "id": 60,
  "nombre": "Viela",
  "id_padre": 8,
  "status": true
},
{
  "id": 9,
  "nombre": "Filtro",
  "id_padre": 0,
  "status": true
},
{
  "id": 13,
  "nombre": "Sensores",
  "id_padre": 0,
  "status": true
},
{
  "id": 10,
  "nombre": "Filtro 0,22 U",
  "id_padre": 9,
  "status": true
},
{
  "id": 11,
  "nombre": "Filtro Aceite",
  "id_padre": 9,
  "status": true
},
{
  "id": 12,
  "nombre": "Filtro De Agua",
  "id_padre": 9,
  "status": true
},
{
  "id": 16,
  "nombre": "Termico",
  "id_padre": 5,
  "status": true
},
{
  "id": 15,
  "nombre": "Relé",
  "id_padre": 5,
  "status": true
},
{
  "id": 14,
  "nombre": "Contactores",
  "id_padre": 5,
  "status": true
},
{
  "id": 17,
  "nombre": "Croche",
  "id_padre": 0,
  "status": true
},
{
  "id": 18,
  "nombre": "Ajustar",
  "id_padre": 17,
  "status": true
},
{
  "id": 19,
  "nombre": "Desajustar",
  "id_padre": 17,
  "status": true
},
{
  "id": 20,
  "nombre": "Picos",
  "id_padre": 0,
  "status": true
},
{
  "id": 21,
  "nombre": "Sujeción",
  "id_padre": 20,
  "status": true
},
{
  "id": 23,
  "nombre": "Formacion",
  "id_padre": 20,
  "status": true
},
{
  "id": 22,
  "nombre": "Altura",
  "id_padre": 20,
  "status": true
}];

function ordenar(j) {
 array = [];

 for (n in j) {
  insertar(j[n], 0, array);
 }
 return array;
}

function insertar(j, l, array) {
 for (n in array) {
  if (array[n].id == j.id_padre) {
   if (array[n].array == undefined)
    array[n].array = [];
   return array[n].array.push(j);
  } else {
   if (array[n].array)
    if (insertar(j, l+1, array[n].array))
     return true;
  }
 }
 if (l)
  return false;

 array.push(j);
}


function listado(array, l) {
 if ( l == undefined)
  l=0, html="";
 
 for (n in array) {
  html += "<div class='list-group'>\n";
        html += "<a href='#' class='list-group-item' data-id='"+array[n].id+"' data-padre='"+array[n].id_padre+"' data-status='"+array[n].status+"'><span class='fa fa-angle-right'></span> "+array[n].nombre+"</a>\n";
  if (array[n].array) {
   listado(array[n].array, l+1);
  };
  html += "</div>\n";
 };

return html;
}


$(document).on('click', '#GuardarParte', function() {
  document.getElementById("listado").innerHTML='';
  html=listado(ordenar(arrayjson));
  document.getElementById("listado").innerHTML=html;
});

.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

<button type="button" id="GuardarParte" name="GuardarParte" class="btn btn-primary">Generar</button> 

<div class="just-padding">
  <div class="list-group list-group-root well" id="listado">
  </div>
</div>

javascript jquery bootstrap bootstrap-3

asked by Pablo Contreras 13.05.2017 в 08:29

source

1 answer

Javascript exercise PDF with ReportLab How to make text within a table do not get out

score 1 · Accepted Answer

On the one hand I have made the variable html local and I have added to the html local the one created by the recursive calls.

On the other hand, your sort function modifies the original array, so I've called it only once before setting the event onclick .

With those two modifications, your code works correctly.

var arrayjson = [{
  "id": 5,
  "nombre": "Electrica",
  "id_padre": 0,
  "status": true
},
{
  "id": 6,
  "nombre": "Mecanica",
  "id_padre": 0,
  "status": true
},
{
  "id": 7,
  "nombre": "Sellos",
  "id_padre": 0,
  "status": true
},
{
  "id": 8,
  "nombre": "Motores",
  "id_padre": 6,
  "status": true
},
{
  "id": 55,
  "nombre": "Piston",
  "id_padre": 8,
  "status": true
},
{
  "id": 60,
  "nombre": "Bobina",
  "id_padre": 8,
  "status": true
},
{
  "id": 60,
  "nombre": "Viela",
  "id_padre": 8,
  "status": true
},
{
  "id": 9,
  "nombre": "Filtro",
  "id_padre": 0,
  "status": true
},
{
  "id": 13,
  "nombre": "Sensores",
  "id_padre": 0,
  "status": true
},
{
  "id": 10,
  "nombre": "Filtro 0,22 U",
  "id_padre": 9,
  "status": true
},
{
  "id": 11,
  "nombre": "Filtro Aceite",
  "id_padre": 9,
  "status": true
},
{
  "id": 12,
  "nombre": "Filtro De Agua",
  "id_padre": 9,
  "status": true
},
{
  "id": 16,
  "nombre": "Termico",
  "id_padre": 5,
  "status": true
},
{
  "id": 15,
  "nombre": "Relé",
  "id_padre": 5,
  "status": true
},
{
  "id": 14,
  "nombre": "Contactores",
  "id_padre": 5,
  "status": true
},
{
  "id": 17,
  "nombre": "Croche",
  "id_padre": 0,
  "status": true
},
{
  "id": 18,
  "nombre": "Ajustar",
  "id_padre": 17,
  "status": true
},
{
  "id": 19,
  "nombre": "Desajustar",
  "id_padre": 17,
  "status": true
},
{
  "id": 20,
  "nombre": "Picos",
  "id_padre": 0,
  "status": true
},
{
  "id": 21,
  "nombre": "Sujeción",
  "id_padre": 20,
  "status": true
},
{
  "id": 23,
  "nombre": "Formacion",
  "id_padre": 20,
  "status": true
},
{
  "id": 22,
  "nombre": "Altura",
  "id_padre": 20,
  "status": true
}];

function ordenar(padre) {
  var resultado = [];
  for (var n in arrayjson) {
    if (arrayjson[n].id_padre == padre) {
      var hijos = ordenar(arrayjson[n].id);
      if (hijos.length > 0) {
        arrayjson[n].array = hijos;
      }
      resultado.push(arrayjson[n])
    }
  }
  return resultado;
}

function listado(array, l) {
  var html='';
 
  for (n in array) {
    html += "<div class='list-group'>\n";
    html += "<a href='#' class='list-group-item' data-id='" + 
      array[n].id + "' data-padre='" + 
      array[n].id_padre + "' data-status='" + array[n].status +
      "'><span class='fa fa-angle-right'></span> " + array[n].nombre + "</a>\n";
    if (array[n].array) {
      html += listado(array[n].array, l + 1);
    }
    html += "</div>\n";
  }
  return html;
}

var ordenado = ordenar(0);

$(document).on('click', '#GuardarParte', function() {
  document.getElementById("listado").innerHTML = '';
  html = listado(ordenado);
  document.getElementById("listado").innerHTML = html;
});

.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

<button type="button" id="GuardarParte" name="GuardarParte" class="btn btn-primary">Generar</button> 

<div class="just-padding">
  <div class="list-group list-group-root well" id="listado">
  </div>
</div>

PS: Since you have jQuery at your disposal, there are much simpler ways to do your work and, above all, without adding HTML code so difficult to maintain.