Ukryj kolumnę datagridu z Javascriptem?

Question

Mam datagrid .net z około 20 kolumn. Potrzebuję widoczności kolumny, która ma być przełączana na podstawie kliknięcia przycisku przy użyciu javascript. Jakieś pomysły?

Answer 1

Chcesz użyć COLGROUP to zrobić, w przeciwnym razie trzeba zastosować styl do każdą komórkę na każdy wiersz, który będzie strasznie nieefektywne i prawdopodobnie zawiśnie przeglądarka, zwłaszcza jeśli twoja siatka jest duża. Wszystkie wyżej wymienione odpowiedzi oparte na bibliotece trzeciej (jQuery) robią to powoli/leniwie. Ponieważ wszystkie JavaScript działa po stronie klienta, prawdopodobnie chcesz mieć trochę więcej uwagi, jeśli chodzi o wydajność.

Tu 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]); 
} 

Używaj go tak ...

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); 

Testowany w IE7 i FF3: Hide Table Columns Using Javascript

Answer 2

Użyj jQuery! To jest zajebiste.

Twój link może wyglądać następująco:

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

JavaScript funkcja może wyglądać następująco:

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

Każda wygenerowana w żądanej kolumny będą musiały mieć klasę atrybut = „myColumn” więc twój javascript może go znaleźć. Aby to zrobić, można dodać element <ItemStyle /> do żądanej kolumny swojej DataGrid, tak:

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

I wreszcie należy pamiętać, aby podać link do jQuery w pliku nagłówkowym gdzieś coś takiego:

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

Możesz download jQuery here.

Answer 3

Moja osobista opinia to użycie JQuery.

Użyj selektorów, aby znaleźć kolumnę i dodaj styl "hidden: true". To jest czyste rozwiązanie JS.

Answer 4

Spójrz na ten plugin jQuery,

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

Włączenie tej wtyczki na swojej stronie i nazywają to na razie kliknięcia łącza.

Answer 5

Użyj jquery, jak sugerowali inni ... selektor taki jak ten powinien to zrobić. To zasadniczo ukryć kolumna 3.

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