Question

我有一个包含大约20列的.net数据网格。我需要根据使用javascript点击按钮来切换列的可见性。有什么想法吗？

Answer 1

您希望使用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

Answer 2

使用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。

Answer 3

看看这个jQuery插件，

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

将此插件合并到您的网页上，并在链接的点击事件中调用它。

Answer 4

我个人的意见是使用JQuery。

使用选择器查找列并为样式添加“hidden：true”。这是一个纯粹的JS解决方案。

Answer 5

像其他人建议的那样使用jquery ......像这样的选择器应该这样做。这基本上会隐藏第3列。

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

使用Javascript隐藏datagrid列？

5 个答案: