3

Tengo gridview de asp que el servidor me arroja con formato, el lado del cliente se ve de ésta manera

  <div class="row">
   <div class="col-md-12">
        <input id="chkPer" type="checkbox" name="chkPer" checked="checked" /><label for="chkPer">Mostrar %</label>
   </div>

            <table cellspacing="0" id="GVBalance" style="width:100%;border-collapse:collapse;">
                    <tr class="GridviewScrollItem">
                        <td>&nbsp;</td><td>&nbsp;</td><td class="FILACSS" colspan="4">COMPARATIVO ANUAL ABRIL</td>
                    </tr><tr class="GridviewScrollItem">
                        <td>&nbsp;</td><td>&nbsp;</td><td class="FILACSS" colspan="2">2015</td><td class="FILACSS" colspan="2">2016</td>
                    </tr><tr class="GridviewScrollItem">
                        <td>&nbsp;</td><td>&nbsp;</td><td class="FILACSS">C$</td><td class="FILACSS">%</td><td class="FILACSS">C$</td><td class="FILACSS">%</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="azulCSS2">11</td><td class="azulCSS2">TOTAL ACTIVO CORRIENTE</td><td class="azulCSS">39,945,142.23</td><td class="azulCSS">79.16 %</td><td class="azulCSS">45,671,479.46</td><td class="azulCSS">78.37 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1101</td><td class="negroCSS2">Efectivo en Caja</td><td class="negroCSS">914,555.36</td><td class="negroCSS">1.81 %</td><td class="negroCSS">826,433.02</td><td class="negroCSS">1.42 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1102</td><td class="negroCSS2">Efectivo en Bancos</td><td class="negroCSS">20,490,841.32</td><td class="negroCSS">40.61 %</td><td class="negroCSS">11,250,970.44</td><td class="negroCSS">19.31 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1109</td><td class="negroCSS2">Dep&#243;sitos a plazo fijo</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">14,707,081.35</td><td class="negroCSS">25.24 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1103</td><td class="negroCSS2">Cuentas por Cobrar Clientes</td><td class="negroCSS">5,699,518.52</td><td class="negroCSS">11.30 %</td><td class="negroCSS">5,868,918.84</td><td class="negroCSS">10.07 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1104</td><td class="negroCSS2">Cuentas por Cobrar Funcionarios y Empleados</td><td class="negroCSS">91,622.19</td><td class="negroCSS">0.18 %</td><td class="negroCSS">62,121.98</td><td class="negroCSS">0.11 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1105</td><td class="negroCSS2">Documentos por Cobrar</td><td class="negroCSS">146,861.07</td><td class="negroCSS">0.29 %</td><td class="negroCSS">-174.11</td><td class="negroCSS">0.00 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1106</td><td class="negroCSS2">Inventarios</td><td class="negroCSS">8,954,671.52</td><td class="negroCSS">17.75 %</td><td class="negroCSS">9,829,155.64</td><td class="negroCSS">16.87 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1107</td><td class="negroCSS2">Impuestos pagados por Anticipado</td><td class="negroCSS">3,052,059.73</td><td class="negroCSS">6.05 %</td><td class="negroCSS">2,394,419.69</td><td class="negroCSS">4.11 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1108</td><td class="negroCSS2">Pagos Anticipados</td><td class="negroCSS">595,012.52</td><td class="negroCSS">1.18 %</td><td class="negroCSS">732,552.61</td><td class="negroCSS">1.26 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="azulCSS2">12</td><td class="azulCSS2">TOTAL ACTIVOS NO CORRIENTES</td><td class="azulCSS">10,515,328.84</td><td class="azulCSS">20.84 %</td><td class="azulCSS">12,598,235.44</td><td class="azulCSS">21.62 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1201</td><td class="negroCSS2">Terrenos</td><td class="negroCSS">444,754.76</td><td class="negroCSS">0.88 %</td><td class="negroCSS">444,754.76</td><td class="negroCSS">0.76 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1202</td><td class="negroCSS2">Edificios e Intalaciones</td><td class="negroCSS">1,466,691.35</td><td class="negroCSS">2.91 %</td><td class="negroCSS">1,286,435.82</td><td class="negroCSS">2.21 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1203</td><td class="negroCSS2">Maquinaria y Equipos</td><td class="negroCSS">4,399,027.74</td><td class="negroCSS">8.72 %</td><td class="negroCSS">4,482,545.25</td><td class="negroCSS">7.69 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1204</td><td class="negroCSS2">Vehiculos</td><td class="negroCSS">2,881,285.00</td><td class="negroCSS">5.71 %</td><td class="negroCSS">2,838,713.02</td><td class="negroCSS">4.87 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1205</td><td class="negroCSS2">Mobiliario y Equipo de Oficina</td><td class="negroCSS">367,350.21</td><td class="negroCSS">0.73 %</td><td class="negroCSS">430,040.52</td><td class="negroCSS">0.74 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1206</td><td class="negroCSS2">Herramientas y Enseres</td><td class="negroCSS">18,438.78</td><td class="negroCSS">0.04 %</td><td class="negroCSS">30,290.46</td><td class="negroCSS">0.05 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1207</td><td class="negroCSS2">Equipo de Laboratorio</td><td class="negroCSS">99,832.63</td><td class="negroCSS">0.20 %</td><td class="negroCSS">83,873.61</td><td class="negroCSS">0.14 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1208</td><td class="negroCSS2">Otros</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1210</td><td class="negroCSS2">Proyecto de Certificaci&#243;n ISO</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">47,801.96</td><td class="negroCSS">0.08 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1213</td><td class="negroCSS2">Activos Intangibles</td><td class="negroCSS">539,075.03</td><td class="negroCSS">1.07 %</td><td class="negroCSS">543,162.30</td><td class="negroCSS">0.93 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1214</td><td class="negroCSS2">Pagos Anticipados Proveedores</td><td class="negroCSS">298,873.34</td><td class="negroCSS">0.59 %</td><td class="negroCSS">1,302,764.19</td><td class="negroCSS">2.24 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1215</td><td class="negroCSS2">Proyectos de Inversi&#243;n en Proceso</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">1,107,853.55</td><td class="negroCSS">1.90 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="azulCSS2">13</td><td class="azulCSS2">OTROS ACTIVOS</td><td class="azulCSS">0.00</td><td class="azulCSS">0.00 %</td><td class="azulCSS">4,257.36</td><td class="azulCSS">0.01 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">1301</td><td class="negroCSS2">Dep&#243;sitos en Garant&#237;a</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">4,257.36</td><td class="negroCSS">0.01 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="naranjaCSS2">&nbsp;</td><td class="naranjaCSS2">TOTAL ACTIVO</td><td class="naranjaCSS">50,460,471.07</td><td class="naranjaCSS">100.00 %</td><td class="naranjaCSS">58,273,972.26</td><td class="naranjaCSS">100.00 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="azulCSS2">21</td><td class="azulCSS2">TOTAL PASIVO CORRIENTE</td><td class="azulCSS">17,435,664.02</td><td class="azulCSS">77.69 %</td><td class="azulCSS">18,302,928.33</td><td class="azulCSS">77.13 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2101</td><td class="negroCSS2">Proveedores</td><td class="negroCSS">7,457,646.17</td><td class="negroCSS">33.23 %</td><td class="negroCSS">7,455,576.30</td><td class="negroCSS">31.42 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2102</td><td class="negroCSS2">Cuentas por Pagar</td><td class="negroCSS">481,965.62</td><td class="negroCSS">2.15 %</td><td class="negroCSS">560,642.87</td><td class="negroCSS">2.36 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2103</td><td class="negroCSS2">Impuestos y Retenciones por Pagar</td><td class="negroCSS">7,116,303.67</td><td class="negroCSS">31.71 %</td><td class="negroCSS">7,891,102.65</td><td class="negroCSS">33.25 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2104</td><td class="negroCSS2">Gastos Acumulados por Pagar</td><td class="negroCSS">1,310,404.33</td><td class="negroCSS">5.84 %</td><td class="negroCSS">1,278,383.88</td><td class="negroCSS">5.39 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2105</td><td class="negroCSS2">Intereses por Pagar</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2107</td><td class="negroCSS2">Porci&#243;n corriente de pr&#233;stamo a largo plazo</td><td class="negroCSS">1,069,344.23</td><td class="negroCSS">4.76 %</td><td class="negroCSS">1,117,222.63</td><td class="negroCSS">4.71 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="azulCSS2">22</td><td class="azulCSS2">TOTAL PASIVOS NO CORRIENTES</td><td class="azulCSS">5,007,296.98</td><td class="azulCSS">22.31 %</td><td class="azulCSS">5,426,972.67</td><td class="azulCSS">22.87 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2201</td><td class="negroCSS2">Prestamos por pagar a L/Plazo</td><td class="negroCSS">1,967,363.44</td><td class="negroCSS">8.77 %</td><td class="negroCSS">1,649,823.61</td><td class="negroCSS">6.95 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2202</td><td class="negroCSS2">Recibos de Compra Acumulados</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">2203</td><td class="negroCSS2">Indemnizacion Largo Plazo</td><td class="negroCSS">3,039,933.54</td><td class="negroCSS">13.55 %</td><td class="negroCSS">3,777,149.06</td><td class="negroCSS">15.92 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="naranjaCSS2">&nbsp;</td><td class="naranjaCSS2">TOTAL PASIVO</td><td class="naranjaCSS">22,442,961.00</td><td class="naranjaCSS">100.00 %</td><td class="naranjaCSS">23,729,901.00</td><td class="naranjaCSS">100.00 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">31</td><td class="negroCSS2">Patrimonio</td><td class="negroCSS">2,657,585.88</td><td class="negroCSS">9.49 %</td><td class="negroCSS">2,657,585.88</td><td class="negroCSS">7.69 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">32</td><td class="negroCSS2">Utilidades o Perdidas Acumuladas</td><td class="negroCSS">20,618,734.38</td><td class="negroCSS">73.59 %</td><td class="negroCSS">26,801,551.91</td><td class="negroCSS">77.59 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="negroCSS2">34</td><td class="negroCSS2">Utilidad o Perdida del Ejercicio</td><td class="negroCSS">4,741,189.80</td><td class="negroCSS">16.92 %</td><td class="negroCSS">5,084,933.46</td><td class="negroCSS">14.72 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="naranjaCSS2">&nbsp;</td><td class="naranjaCSS2">TOTAL CAPITAL</td><td class="naranjaCSS">28,017,510.06</td><td class="naranjaCSS">100.00 %</td><td class="naranjaCSS">34,544,071.25</td><td class="naranjaCSS">100.00 %</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="naranjaCSS2">&nbsp;</td><td class="naranjaCSS2">TOTAL PASIVO Y CAPITAL</td><td class="naranjaCSS">50,460,471.06</td><td class="naranjaCSS">&nbsp;</td><td class="naranjaCSS">58,273,972.25</td><td class="naranjaCSS">&nbsp;</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="whiteCSS">&nbsp;</td><td class="whiteCSS">&nbsp;</td><td class="whiteCSS">&nbsp;</td><td class="whiteCSS">~</td><td class="whiteCSS">&nbsp;</td><td class="whiteCSS">*</td>
                    </tr>
                </table>

Mi principal objetivo es que al hacer click en un checkbox yo tenga la opción de ocultar o mostrar la columna de "%" de la tabla. Ésto lo he logrado a través de un java script que funciona en su mayoría bien.

Mi principal inconveniente como dar formato al colspan de la tabla ya que ésta se desarma y queda todo mal

Javascript:

$(function () {

    //tags.Add("~");
    //tags.Add("*");
    //tags.Add("@");
    //tags.Add("?");

    $("[id*=chkPer]").click(function () {
        var isChecked = $(this).is(":checked");

        var th = $("[id*=GVBalance] td:contains('~')");
        th.css("display", isChecked ? "" : "none");
        var i = 0;
        $("[id*=GVBalance] tr").each(function () {

            if (i != 0 && i != 1) {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            }
            i++;
        });

        var th = $("[id*=GVBalance] td:contains('*')");
        i = 0;
        th.css("display", isChecked ? "" : "none");
        $("[id*=GVBalance] tr").each(function () {

            if (i != 0 && i != 1) {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            }
            i++;
        });


        var th = $("[id*=GVBalance] td:contains('@')");
        i = 0;
        th.css("display", isChecked ? "" : "none");
        $("[id*=GVBalance] tr").each(function () {

            if (i != 0 && i != 1 ) {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            }
            i++;
        });

        var th = $("[id*=GVBalance] td:contains('?')");
        i = 0;
        th.css("display", isChecked ? "" : "none");
        $("[id*=GVBalance] tr").each(function () {

            if (i != 0 && i != 1) {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            }
            i++;
        });
    });
});

Asi se ve la imagen original:

introducir la descripción de la imagen aquí

Bueno para no enredarlos, al final de la columna hay etiquetas: ~, *, @, ? , las columnas que lleven éstas etiquetas son las que serán escondidas. Eso es lo que dice el javascript code.

Al final se ve así, el colspan se jode. Es buena idea reeditarlo? como hacerlo? gracias.

introducir la descripción de la imagen aquí

1 respuesta 1

0

cambie la funcion esta seleciona las celdas que contiene el simbolo % var td = $("td:contains('%')");, y dependiendo del check las oculta o muestra, ademas para los encabezasos seleccione los que usan la clase FILACSS y tiene el colspan=2 $(".FILACSS[colspan=2]"), si encuentra elementos los selecciona y le agrega un atributo para poder usarlo despues, th.attr("data-title", "true");, si dependiendo del check pone el colspan en 1 o en 2, en el caso de que este en 1 el selector $(".FILACSS[colspan=2]") no funciona por lo que busca con este otro $(".FILACSS[data-title=true]");, en el caso del titulo general funciona similar

$(function() {
  $("[id*=chkPer]").click(function() {

    var isChecked = $(this).is(":checked");
    var td = $("td:contains('%')");
    var th = null;
    var th4 = null;
    if ($(".FILACSS[data-title=true]").length == 0)
    {
    th = $(".FILACSS[colspan=2]");
      th.attr("data-title", "true");
    }      
    else {
      th = $(".FILACSS[data-title=true]");
    }

    if ($(".FILACSS[colspan=4]").length == 0)
      th4 = $(".FILACSS[data-g-title=true]");
    else {
      th4 = $(".FILACSS[colspan=4]");
      th4.attr("data-g-title", "true");
    }

    th.attr("colspan", isChecked ? "2" : "1");
    th4.attr("colspan", isChecked ? "4" : "2");
    td.css("display", isChecked ? "" : "none");

  });
});
4
  • Excelente amigo, hay ciertas cosas que obviamente si tuvieras el proyecto verías. No toda la columna tiene '%' asi que las blancas - uso bootstrap - me dan una sublinea limpia al lado derecho, yo veré como hacerme de ellas. ** Por otro lado y mas interesante aun , cuando oculto la info, me está haciendo el colspan correctamente. Pero cuando muestro la columna el colspan no responde como lo esperado. Commented el 27 sept. 2016 a las 21:58
  • Te dejo el link de la screenshot! i.imgur.com/BdP3s4t.jpg Commented el 27 sept. 2016 a las 21:59
  • 1
    si el bug esta en el primer if, ya que despues del primer cambio de estado se crea un td con colspan=2, el del titulo, ya lo corregi
    – Byron
    Commented el 27 sept. 2016 a las 22:10
  • Sos una fiera! Gracias! Commented el 27 sept. 2016 a las 22:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.