用Javascript隱藏一個datagrid列？

我有一個.net數據網格大約20列。我需要使用javascript來點擊按鈕來切換列的可見性。有任何想法嗎？用Javascript隱藏一個datagrid列？

2009-07-02 blntechie

您想使用COLGROUP要做到這一點，否則，你將樣式應用到每細胞上每行，這將是非常低效的，並很可能被掛起瀏覽器，特別是如果你的網格很大。所有上述依賴於第三方庫（jQuery）的答案都是以慢/懶惰的方式進行的。由於所有Javascript都在客戶端運行，因此在提高效率時可能需要考慮一些問題。

這裏亞去...

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

使用它像這樣...

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和FF3：Hide Table Columns Using Javascript

來源

2009-07-03 01:07:55

使用jQuery！這很棒。

您的鏈接可以是這樣的：

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

你的JavaScript函數可以是這樣的：

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

每個所需列產生必須具有屬性class =「myColumn」所以你的JavaScript可以找到它。要做到這一點，你可以在<ItemStyle />元素添加到您的DataGrid的所需的列，就像這樣：

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

最後，請記住，包括一個鏈接到jQuery的在你的頭文件的地方，像這樣：

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

您可以download jQuery here。

來源

2009-07-02 18:15:36 JerSchneid

'列' 是不是一個真正的HTML您可以像這樣切換的元素。 – SolutionYogi 2009-07-02 18:21:13

@SolutionYogi：當然是！ jQuery選擇器正在尋找myColumn類。這段代碼很好用！ :) – JerSchneid 2009-07-02 18:26:03

-1

我個人的意見是使用JQuery。

使用選擇器查找列並向樣式添加'hidden：true'。這是一個純粹的JS解決方案。

來源

2009-07-02 18:16:24

看看這個jQuery插件，

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

納入您的網頁上這個插件並調用它鏈接的點擊事件。

來源

2009-07-02 18:22:59 SolutionYogi

-1

像其他人一樣使用jquery ......像這樣的選擇器應該這樣做。這將從根本上隱藏列3

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

來源

2009-07-02 18:39:58 Jab

用Javascript隱藏一個datagrid列？

回答

相關問題