用Javascript隐藏datagrid列？ [英] Hide a datagrid column with Javascript?

问题描述

我有一个.net datagrid，大约20列。我需要一个列的可见性，根据使用javascript点击按钮来切换。任何想法？

解决方案

您要使用COLGROUP执行此操作，否则您必须将样式应用于 / em>单元格每个行，这将非常低效，并可能会挂起浏览器，特别是如果您的网格很大。所有依赖第三方库（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）; $ var $ = $（$）
 
 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]; //隐藏前3列
 var tableId =tableIdHere; //查看您的页面的源代码以获取此
 hideColumns（tableId，columnsToHide）; 
  

在IE7和FF3中测试：使用Javascript隐藏表列

I have a .net datagrid with some 20 columns. I need a column's visibilty to be toggled based on the click of a button using javascript. Any ideas?

解决方案

You want to use COLGROUP to do this, otherwise you have to apply a style to every cell on every row, which will be terribly inefficient and will likely hang the browser, especially if your grid is large. All of the aforementioned answers that rely on a third-party library (jQuery) are doing it the slow/lazy way. Since all Javascript runs on the client-side, you probably want to have a little more consideration when it comes to efficiency.

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

Use it like this...

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

Tested in IE7 and FF3: Hide Table Columns Using Javascript

这篇关于用Javascript隐藏datagrid列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！