Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Mostrar valor de porcentaje en una celda de una tabla dinamica

 Estas en el tema de Mostrar valor de porcentaje en una celda de una tabla dinamica en el foro de Javascript en Foros del Web. Buen dia, Sucede que se esta deasrrollando una aplicacion de tipo MVC4 con C#. Hay una vista llamada listado Solicitudes, y esto trae desde la ...
  #1 (permalink)  
Antiguo 10/04/2015, 09:12
 
Fecha de Ingreso: abril-2008
Mensajes: 7
Antigüedad: 16 años, 6 meses
Puntos: 0
Mostrar valor de porcentaje en una celda de una tabla dinamica
Buen dia,
Sucede que se esta deasrrollando una aplicacion de tipo MVC4 con C#. Hay una vista llamada listado Solicitudes, y esto trae desde la base de datos una tabla dinamica que cambia segun los datos cargados.

El tema es que hay una columna llamada porcentaje de avance, y la idea es mostrar alli en tiempo real tomando la hora actual, el porcentaje de avance de la solicitud.
Esta parte ya la tengo solucionada con una funcion en javascript. Lo que se necesita es mostrar el porcentaje de avance de cada solicitud listada en la tabla.

Para mostrar dicho porcentaje no uso numeros, uso estilo CSS de bootstrap.
Código HTML: 
Ver original
  1. <div class="progress">
  2.                             <div id="progressBar" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
  3.                                  aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width:0%;">
  4.                                   <span id="por" class="progress-value"></span>                            
  5.                             </div>
  6.                         </div>

La tabla esta construida de la sgte. manera:

Código HTML: 
Ver original
  1. <table id="listadoRequerimiento" class="table table-condensed">
  2.         <thead>
  3.             <tr class="alert-info">
  4.                 <th>REQ</th>
  5.                 <th>Producto</th>
  6.                 <th>Cliente </th>
  7.                 <th>Entrega a Cliente</th>
  8.                 <th>Inicio en</th>
  9.                 <th>Hora Creación</th>
  10.                 <th>Ent.Proyectada</th>
  11.                 <th>Horas Proye</th>
  12.                 <th>% Proyectado</th>
  13.                 <th>% Final</th>
  14.                 <th>Estado</th>
  15.                 <th>Usuario</th>
  16.                 <th></th>
  17.             </tr>
  18.         </thead>
  19.         <tbody>
  20.             @foreach (var item in Model)
  21.             {
  22.                 
  23.                 <tr>
  24.                     <td>@item.ID_Req</td>
  25.                     <td>@item.Producto</td>
  26.                     <td>@item.Cliente</td>
  27.                     <td>@item.Fecha_Cliente.ToString("dd/MM/yyyy")</td>
  28.                     <td id="Fecha_Creacion">@item.Fecha_Inicio.ToString("dd/MM/yyyy")</td>
  29.                     <td id="Hora_Creacion_">@item.Hora_Creacion</td>
  30.                     <td>@item.Fecha_Entrega.ToString("dd/MM/yyyy")</td>
  31.                     <td id="Horas_Proyec_">@item.Horas_Proyec</td>
  32.                     <td>
  33.                         <div class="progress">
  34.                             <div id="progressBar" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
  35.                                  aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width:0%;">
  36.                                   <span id="por" class="progress-value"></span>                            
  37.                             </div>
  38.                         </div>                        
  39.                     </td>
  40.                     <td>
  41.                     <div class="progress">
  42.                             <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  43.                                 aria-valuenow="@item.Porcen_Final" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width: @item.Porcen_Final%;">
  44.                                @item.Porcen_Final%
  45.                             </div>
  46.                         </div>    
  47.                     
  48.                     </td>
  49.                     <td>
  50.                         @switch (item.Estado_Req)
  51.                         {
  52.                             case 1:
  53.                             <span class="label label-danger">@item.Estado_Requerimiento.Nombre</span>
  54.                                                         break;
  55.                             case 2:
  56.                             <span class="label label-success">@item.Estado_Requerimiento.Nombre</span>
  57.                                                          break;
  58.                             case 3:
  59.                             <span class="label label-primary">@item.Estado_Requerimiento.Nombre</span>
  60.                                                          break;
  61.                             default:
  62.                                                          break;
  63.                         }
  64.                     </td>
  65.                     <td>@item.Usuarios.Nombre
  66.                     </td>
  67.                     <td>
  68.                         <div class="btn-group btn-group-xs">
  69.                             <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
  70.                                 Opciones<span class="caret"></span>
  71.                             </button>
  72.                             <ul class="dropdown-menu" role="menu">
  73.                                 <li><a href="@Url.RouteUrl("detalle_requerimiento", new { ID_Req = item.ID_Req })"><i
  74.                                     class="fa fa-eye fa-fw"></i>Movimientos</a></li>
  75.                             </ul>
  76.                         </div>
  77.                     </td>
  78.                 </tr>
  79.             }
  80.         </tbody>
  81.     </table>

Tengo esta funcion en javascript, que calcula el porcentaje en tiempo real y por dias desde la fecha de creacion.
Código Javascript: 
Ver original
  1. function ActualizarPorcentaje(progressBar) {
  2.     var hora_crea_ = [];
  3.     var Hora_actual_ = [];
  4.     var Minutos;
  5.     var Minutos_Crea;
  6.     var Hora_Real;
  7.     var Hora_CREACION;
  8.     
  9.     var hora_Creacion = document.getElementById('Hora_Creacion_').innerHTML;
  10.     var fecha_Creacion = document.getElementById('Fecha_Creacion').innerHTML;
  11.     var Hora_Proyectadas_ = document.getElementById('Horas_Proyec_').innerHTML;
  12.     var Hora_act_ = String(document.getElementById('reloj').value);
  13.     var H_Laboral; //para calcular el valor de dias por hora laboral
  14.     var SeLLeva; //para calcular el tiempo que lleva el requerimiento
  15.     var Me_queda;
  16.     var D_H_parcial;
  17.     
  18.  
  19.     var f_dia = new Date();
  20.     var fecha_actual = f_dia.getDate() + "/" + (f_dia.getMonth()+1 )+ "/" + f_dia.getFullYear();
  21.     var total_porcentaje_; //variable de calculo de porcentaje
  22.  
  23.     //se calculan los dias transcurridos
  24.     var F_actual = fecha_actual.split('/');
  25.     var F_creacion = fecha_Creacion.split('/');
  26.  
  27.     var fFecha2 = Date.UTC(F_actual[2], F_actual[1] - 1, F_actual[0]);
  28.     var fFecha1 = Date.UTC(F_creacion[2], F_creacion[1] - 1, F_creacion[0]);
  29.     var dif = fFecha2 - fFecha1;
  30.     var dias = Math.floor(dif / (1000 * 60 * 60 * 24));
  31.  
  32.     hora_crea_ = hora_Creacion.split(":"); //Arreglo de la hora de creacion  del requerimiento
  33.     Hora_actual_ = Hora_act_.split(":"); //Arreglo de la hora actual o real del momento.
  34.  
  35.     Minutos = Hora_actual_[1] / 60; //se calcula la cantidad de minutos
  36.     Minutos_Crea = hora_crea_[1] / 60; //se calcula la cantidad de minutos hora de creacion reque.
  37.  
  38.     Hora_Real =parseFloat(Hora_actual_[0]) + Minutos; //hora de consulta real. La del momento.
  39.     Hora_CREACION =parseFloat(hora_crea_[0]) + Minutos_Crea; //hora en que se creo el requerimiento
  40.  
  41.  
  42.     if (Hora_Proyectadas_ != 0) {
  43.  
  44.         if (Hora_Real >= 7.75 && Hora_Real <= 17.5) {
  45.  
  46.             H_Laboral = (dias * 9.75); //Se calcula los dias por horas laborales
  47.  
  48.             if (H_Laboral > 0) {
  49. //                D_H_parcial = 17.5 - Hora_CREACION;
  50. //                SeLLeva = (Hora_Real - 7.75) + D_H_parcial;
  51.                 Me_queda = (dias * 9.75);
  52.  
  53.                 if (Hora_Proyectadas_ < Me_queda) {
  54.  
  55.                     total_porcentaje_ = 100;
  56.                    
  57.                 }
  58.                 else {
  59.                     total_porcentaje_ = (Me_queda * 100) / parseInt(Hora_Proyectadas_);
  60.                                 
  61.                 }   
  62.                                
  63.             }
  64.             else {
  65.  
  66.                 SeLLeva = Hora_Real - Hora_CREACION;
  67.  
  68.                 if (SeLLeva >= Hora_Proyectadas_) {
  69.                     total_porcentaje_ = 100;
  70.                     
  71.                 }
  72.                 else {
  73.                     total_porcentaje_ = (SeLLeva * 100) / parseInt(Hora_Proyectadas_);
  74.                     
  75.                 }           
  76.             }
  77.         }        
  78.  
  79.     }
  80.     else {
  81.         total_porcentaje = 0;
  82.         hora = 0;
  83.     }
  84.     
  85.     //se muestran los resultados
  86.     document.getElementById('progressBar').style.width = (total_porcentaje_) + '%';
  87.     document.getElementById('por').innerHTML = total_porcentaje_.toFixed(2) + '%';    
  88.     
  89. }

la idea es plantear esta funcion por cada item de solicitud cargado desde la base de datos en la tabla, y que en la columna porcentaje se muestre dicho avance.

Se que podria usarse un ciclo for:
Código Javascript: 
Ver original
  1. var celdas = document.getElementsByTagName("tr");
  2.     for (var i = 0; i < celdas.length; i++) {
  3.         
  4.     }

Pero no se como integrar la funcion a dicho proceso.

Cualquier guia la agradeceria.
Última edición por oriion; 10/04/2015 a las 09:32
  #2 (permalink)  
Antiguo 10/04/2015, 15:11
 
Fecha de Ingreso: abril-2008
Mensajes: 7
Antigüedad: 16 años, 6 meses
Puntos: 0
Respuesta: Mostrar valor de porcentaje en una celda de una tabla dinamica
Buen dia, pues respondo a mi mismo:

Inserte un ciclo for para recorrer solo las filas:
Código Javascript: 
Ver original
  1. function ActualizarPorcentaje() {
  2.     var hora_crea_ = [];
  3.     var Hora_actual_ = [];
  4.     var Minutos;
  5.     var Minutos_Crea;
  6.     var Hora_Real;
  7.     var Hora_CREACION;
  8.     var H_Laboral; //para calcular el valor de dias por hora laboral
  9.     var SeLLeva; //para calcular el tiempo que lleva el requerimiento
  10.     var Me_queda;
  11.     var D_H_parcial;
  12.     var Hora_act_ = String(document.getElementById('reloj').value);
  13.     var hora_Creacion, fecha_Creacion, Hora_Proyectadas_;
  14.  
  15.     var table = document.getElementById('listadoRequerimiento'),
  16.     rows = table.getElementsByTagName('tr'), i, j,cells;
  17.  
  18.     for (i = 0, j = rows.length; i < j; ++i) {
  19.         cells = rows[i].getElementsByTagName('td');
  20.         if (!cells.length) {
  21.             continue;
  22.         }
  23.         
  24.         hora_Creacion = cells[5].innerHTML;
  25.         fecha_Creacion = cells[4].innerHTML;
  26.         Hora_Proyectadas_ = cells[7].innerHTML;
  27.         var f_dia = new Date();
  28.         var fecha_actual = f_dia.getDate() + "/" + (f_dia.getMonth() + 1) + "/" + f_dia.getFullYear();
  29.         var total_porcentaje_; //variable de calculo de porcentaje
  30.  
  31.         //se calculan los dias transcurridos
  32.         var F_actual = fecha_actual.split('/');
  33.         var F_creacion = fecha_Creacion.split('/');
  34.  
  35.         var fFecha2 = Date.UTC(F_actual[2], F_actual[1] - 1, F_actual[0]);
  36.         var fFecha1 = Date.UTC(F_creacion[2], F_creacion[1] - 1, F_creacion[0]);
  37.         var dif = fFecha2 - fFecha1;
  38.         var dias = Math.floor(dif / (1000 * 60 * 60 * 24));
  39.  
  40.         hora_crea_ = hora_Creacion.split(":"); //Arreglo de la hora de creacion  del requerimiento
  41.         Hora_actual_ = Hora_act_.split(":"); //Arreglo de la hora actual o real del momento.
  42.  
  43.         Minutos = Hora_actual_[1] / 60; //se calcula la cantidad de minutos
  44.         Minutos_Crea = hora_crea_[1] / 60; //se calcula la cantidad de minutos hora de creacion reque.
  45.  
  46.         Hora_Real = parseFloat(Hora_actual_[0]) + Minutos; //hora de consulta real. La del momento.
  47.         Hora_CREACION = parseFloat(hora_crea_[0]) + Minutos_Crea; //hora en que se creo el requerimiento
  48.  
  49.  
  50.         if (Hora_Proyectadas_ != 0) {
  51.  
  52.             if (Hora_Real >= 7.75 && Hora_Real <= 17.5) {
  53.  
  54.                 H_Laboral = (dias * 9.75); //Se calcula los dias por horas laborales
  55.  
  56.                 if (H_Laboral > 0) {
  57.                     //                D_H_parcial = 17.5 - Hora_CREACION;
  58.                     //                SeLLeva = (Hora_Real - 7.75) + D_H_parcial;
  59.                     Me_queda = (dias * 9.75);
  60.  
  61.                     if (Hora_Proyectadas_ < Me_queda) {
  62.  
  63.                         total_porcentaje_ = 100;
  64.  
  65.                     }
  66.                     else {
  67.                         total_porcentaje_ = (Me_queda * 100) / parseInt(Hora_Proyectadas_);
  68.  
  69.                     }
  70.  
  71.                 }
  72.                 else {
  73.  
  74.                     SeLLeva = Hora_Real - Hora_CREACION;
  75.  
  76.                     if (SeLLeva >= Hora_Proyectadas_) {
  77.                         total_porcentaje_ = 100;
  78.  
  79.                     }
  80.                     else {
  81.                         total_porcentaje_ = (SeLLeva * 100) / parseInt(Hora_Proyectadas_);
  82.  
  83.                     }
  84.                 }
  85.             }
  86.  
  87.         }
  88.         else {
  89.             total_porcentaje = 0;
  90.             hora = 0;
  91.         }
  92.  
  93.         //se muestran los resultados
  94.           cells[8].innerHTML = total_porcentaje_.toFixed(2) + '%';
  95.     }
  96. }

Ahora si se ve el porcentaje por cada solicitud, ya lo unico que me falta es, como le paso el porcentaje a la etiqueta div con el id (progressBar) que esta en la misma celda (cells[0])?. y que es un div dentro de otro.
Es un child (childNodes)?

Código HTML: 
Ver original
  1. <div class="progress">
  2.         <div id="progressBar" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
  3.                                  aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width:0%;" >
  4.           <span id="por" class="progress-value"></span>                            
  5.          </div>
  6. </div>

Saludos
  #3 (permalink)  
Antiguo 10/04/2015, 19:52
 
Fecha de Ingreso: abril-2008
Mensajes: 7
Antigüedad: 16 años, 6 meses
Puntos: 0
Respuesta: Mostrar valor de porcentaje en una celda de una tabla dinamica
Hola, Nuevamente me respondo.
Ya pude definir el como pasar el valor del porcentaje de las celdas a la barra de progreso.
en el codigo javascript quedo asi:
Código Javascript: 
Ver original
  1. //se muestran los resultados
  2.         cells[8].children[0].children[0].style.width = (total_porcentaje_) + '%';
  3.         cells[8].children[0].children[0].children[0].innerHTML = total_porcentaje_.toFixed(0) + '%';

en lugar de usar childNodes, use children..
Y en la vista Html no puse Id en los componentes, ya que al manipular el DOM (HTML5), los Id se llaman directo por la ubicacion entre padres e hijos de componentes, o al menos eso fue lo que comprendi:

Antes:
Código HTML: 
Ver original
  1. <div class="progress">
  2.                             <div id="progressBar" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
  3.                                  aria-valuemin="0" aria-valuemax="100" style="min-width: 1em; width:0%;">
  4.                                   <span id="por" class="progress-value"></span>                            
  5.                             </div>
  6.                         </div>

Despues:
Código HTML: 
Ver original
  1. <td>
  2.                         <div class="progress">
  3.                             <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
  4.                                  aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width:0%;" >
  5.                                   <p></p>                            
  6.                             </div>
  7.                         </div>                        
  8.                     </td>


Saludos.
  #4 (permalink)  
Antiguo 11/04/2015, 11:52
Avatar de figoberto  
Fecha de Ingreso: octubre-2010
Mensajes: 20
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Mostrar valor de porcentaje en una celda de una tabla dinamica
Gracias tenia el mismo problema.

saludos

Etiquetas: celda, dinamica, funcion, html, porcentaje, tabla, valor, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:04.