Javascript ile bir datagrid sütunu saklıyor musunuz?

Question

Bazı 20 sütuna sahip bir .net veri kılavuzum var. Javascript kullanarak bir düğmenin tıklanması temelinde bir sütunun görünürlük düzeyine ihtiyacım var. Herhangi bir fikir?

Answer 1

aksi takdirde üzerinde korkunç verimsiz olacaktır her satır, her hücreyi bir stil uygulamak zorunda ve büyük olasılıkla asmak, bunun için COLGROUP kullanmak istiyorum Tarayıcı, özellikle ızgara büyükse. Üçüncü taraf bir kütüphaneye (jQuery) dayanan yukarıda bahsedilen cevapların tümü, yavaş/tembel bir şekilde yapıyor. Tüm Javascript istemci tarafında çalıştığından, verimlilik söz konusu olduğunda muhtemelen daha fazla düşünmek isteyebilirsiniz.

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

böyle kullanın

İşte

ya gitmek ... ...

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

IE7 ve FF3 test: Hide Table Columns Using Javascript

Answer 2

Kullanım jQuery! Bu harika.

Bağlantınız şöyle olabilir:

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

Sizin javascript fonksiyonu şöyle olabilir:

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

istenen sütunda üretilen Her öznitelik class = "Sütunum" sahip olmak zorunda kalacaktır javascript'iniz onu bulabilir.

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

Ve son olarak, bu gibi bir yerde senin başlık dosyasında jQuery bir bağlantı eklemeyi unutmayın: Bunu yapmak için, aşağıdaki gibi, DataGrid'in istenen sütununa bir <ItemStyle /> unsur ekleyebilir

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

download jQuery here.

Answer 3

Kişisel görüşüm JQuery'yi kullanmak olacaktır.

Sütunu bulmak için seçiciyi kullanın ve stile bir 'hidden: true' ekleyin. Bu saf bir JS çözümüdür.

Answer 4

bu jQuery eklentisi bak,

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

sayfanızda Bu eklentiyi dahil edin ve bağlantının tıklama olayı diyoruz.

Answer 5

Jquery'yi başkalarının önerdiği gibi kullanın ... bunun gibi bir seçici bir şey yapmalıdır. Bu aslında sütun saklasın 3.

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