用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列？

回答

相关问题