隐藏的JavaScript DataGrid列？ [英] Hide a datagrid column with Javascript?

问题描述

我有一个.NET数据网格与一些20列。我需要一个列的的可见性的基础上使用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?

推荐答案

您想要使用COLGROUP要做到这一点，否则，您必须一个样式应用到的每次的上的的每一个细胞行，这将是非常低效的，并可能会挂在浏览器，特别是如果网格是大的。所有这一切都依赖于第三方的库（jQuery的）上述答案是这样做的慢/偷懒的方法。由于所有的Javascript运行在客户端，你可能想有更多一点的考虑，当涉及到效率。

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.

下面亚去...

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

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