Javascript로 DataGrid 열 숨기기?

Question

저는 20 개의 컬럼을 가진 .net DataGrid를 가지고 있습니다. 자바 스크립트를 사용하여 버튼 클릭을 기준으로 전환하려면 열의 가시성이 필요합니다. 어떤 아이디어?

Answer 1

당신은 그렇지 않으면 당신은 에 에 대단히 비효율적 일 것입니다 모든 행을, 모든 셀 스타일을 적용해야하고 의지 가능성이 걸어,이 작업을 수행하는 COLGROUP을 사용하려면 브라우저, 특히 눈금이 큰 경우. 제 3 자 라이브러리 (jQuery)에 의존하는 앞서 언급 한 모든 대답은 느리고 게으른 방식으로 진행됩니다. 모든 자바 스크립트는 클라이언트 측에서 실행되기 때문에 효율면에서 좀 더 고려해야 할 사항이 있습니다.

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> 

자바 스크립트 함수를 다음과 같이 할 수 있습니다

function ToggleColumn() 
{ 
    $(".myColumn").toggle(); 
} 

원하는 열에서 생성 된 각을 속성 클래스 = "myColumn"을 가지고 있어야합니다 그래서 귀하의 자바 스크립트를 찾을 수 있습니다.

<asp:TemplateColumn runat="server"> 
    <ItemStyle CssClass="myColumn" /> 
</asp:TemplateColumn> 

을 그리고 마지막으로, 다음과 같이 어딘가에 헤더 파일에 jQuery를에 대한 링크를 포함해야합니다 :이 작업을 수행하려면 다음과 같이 귀하의 데이터 그리드의 원하는 컬럼에 <ItemStyle /> 요소를 추가 할 수 있습니다

<script src="/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 

download jQuery here 수 있습니다.

Answer 3

개인적인 의견은 JQuery를 사용하는 것입니다.

선택기를 사용하여 열을 찾고 스타일에 '숨김 : 참'을 추가하십시오. 이것은 순수한 JS 솔루션입니다.

Answer 4

이 jQuery 플러그인에서 봐,

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

하면 페이지에서이 플러그인을 통합하고 링크의 클릭 이벤트에 문의하십시오.

Answer 5

jquery를 다른 사람이 제안한대로 사용하십시오. 선택기와 같은 것이 좋습니다. 이것은 본질적으로 열을 숨길 것 3.

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