使用Javascript隐藏datagrid列？

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中测试:使用Javascript隐藏表列