¿Oculta una columna de cuadrícula de datos con Javascript?

Question

Tengo una cuadrícula de datos .net con unas 20 columnas. Necesito que se visualice la visibilidad de una columna basándome en el clic de un botón utilizando javascript. ¿Algunas ideas?

Answer 1

que desea utilizar COLGROUP de hacer esto, de lo contrario hay que aplicar un estilo a cada célula en cada fila, que será terriblemente ineficiente y probablemente se colgará el navegador, especialmente si su red es grande. Todas las respuestas antes mencionadas que se basan en una biblioteca de terceros (jQuery) lo hacen de manera lenta/perezosa. Como todo Javascript se ejecuta en el lado del cliente, es probable que desee tener un poco más de consideración en lo que respecta a la eficiencia.

Aquí ya go ...

function hideColumns(tableId, colIndexArray) { 
    var tbl = document.getElementById(tableId); 
    if(!tbl) return; 

    var rows = tbl.getElementsByTagName("TBODY"); 

    if(rows.length == 0) 
    rows = tbl.getElementsByTagName("TR"); 
    else 
    rows = rows[0].getElementsByTagName("TR"); 

    var cols = rows[rows.length - 1].getElementsByTagName("TD"); 
    var colgroup = document.createElement("COLGROUP"); 

    for(var i = 0, l = cols.length; i < l; i++) { 
    var col = document.createElement("COL"); 

    for(var num in colIndexArray) { 
     if(colIndexArray[num] == i) { 
     if(document.all) 
      col.style.display = 'none' 
     else 
      col.style.visibility = 'collapse'; 

     break; 
     } 
    } 

    colgroup.appendChild(col); 
    } 

    tbl.insertBefore(colgroup, tbl.childNodes[0]); 
} 

utilizar de esta manera ...

var columnsToHide = [0, 1, 2]; // hide the first 3 columns 
var tableId = "tableIdHere"; // view the source of your page to get this 
hideColumns(tableId, columnsToHide); 

Probado en IE7 y FF3: Hide Table Columns Using Javascript

Answer 2

Use jQuery! Es impresionante.

Su enlace puede tener este aspecto:

<a href="javascript:ToggleColumn();">Toggle My Column</a> 

Su función javascript puede tener este aspecto:

function ToggleColumn() 
{ 
    $(".myColumn").toggle(); 
} 

Cada generado en la columna deseada tendrá que tener la clase de atributo = "MICOLUMNA" para que tu javascript pueda encontrarlo Para ello, puede agregar un elemento <ItemStyle /> a la columna deseada de la cuadrícula de datos, así:

<asp:TemplateColumn runat="server"> 
    <ItemStyle CssClass="myColumn" /> 
</asp:TemplateColumn> 

Y, por último, recuerde incluir un enlace a jQuery en su archivo de cabecera en alguna parte, de esta manera:

<script src="/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 

Puede download jQuery here.

Answer 3

Mi opinión personal sería utilizar JQuery.

Utilice los selectores para buscar la columna y agregue un 'oculto: verdadero' al estilo. Esta es una solución JS pura.

Answer 4

mirada a este plugin jQuery,

http://p.sohei.org/jquery-plugins/columnmanager/

incorporar este plugin en su página y lo llaman en el evento click del enlace.

Answer 5

Use jquery como otros sugirieron ... un selector como este debería hacerlo. Esto esencialmente ocultar la columna 3.

$('table.tableCSS tr').find('td:eq(2)').hide(); // eq(index)