패왕넷

마이크로소프트의 웹 플랫폼에 대한 정보를 얻을 수 있는 곳입니다. 더 자세한 정보는 <철수네 소프트웨어 세상>을 참조하세요. http://blogs.msdn.com/bkchung/archive/2008/10/16/microsoft-web.aspx


마이크로소프트 웹 플랫폼
http://www.microsoft.com/web/

Microsoft Innovators 58호에 Cover Story로 Visual Studio 2008를 다루었습니다.


[Chapter 1] Visual Studio 2008을 주목해야 하는 이유
http://www.microsoft.com/korea/magazine/2008-summer/coverstory/part1.mspx
[Chapter 2] Visual Studio 2008로 성공을 이야기하다
http://www.microsoft.com/korea/magazine/2008-summer/coverstory/part2.mspx
[Chapter 3] Visual Studio 2008의 가치
http://www.microsoft.com/korea/magazine/2008-summer/coverstory/part3.mspx

들어가는 말

이 아티클은 자바스크립트를 사용하여 GridView rows의 확장 / 축소 기능을 보여준다. 이 기능을 시연하기 위해서 GridView 헤더에 Image를 사용했다. 이 Image를 연속해서 누르면 GridView의 열(row)은 확장되고 축소된다.

HTML 코드 사용

GridView 내부에 TemplateField를 추가하고 TemplateField.의 HeaderTemplate 안에 Image를 추가한다. GridView를 위한HTML 코드는 다음과 같다.
 

<asp:GridView ID="gvTab" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False" GridLines="Vertical"

                                                                                             ShowFooter="True">

   <Columns>

      <asp:TemplateField>

         <HeaderStyle Width="25px" />

         <ItemStyle Width="25px" BackColor="White" />

         <HeaderTemplate>

            <asp:Image ID="imgTab" onclick="javascript:Toggle(this);" runat="server" ImageUrl="~/minus.gif"

                                                                                         ToolTip="Collapse" />

         </HeaderTemplate>

      </asp:TemplateField>

      <asp:BoundField HeaderText="n" DataField="n">

         <HeaderStyle Width="25px" />

         <ItemStyle Width="25px" />

      </asp:BoundField>

      <asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">

         <HeaderStyle Width="150px" />

         <ItemStyle Width="150px" />

      </asp:BoundField>

      <asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">

         <HeaderStyle Width="150px" />

         <ItemStyle Width="150px" />

      </asp:BoundField>

   </Columns>

   <HeaderStyle Height="25px" Font-Bold="True" BackColor="DimGray" ForeColor="White" HorizontalAlign="Center"

                                                                                    VerticalAlign="Middle" />

   <RowStyle Height="25px" BackColor="Gainsboro" HorizontalAlign="Center" VerticalAlign="Middle" />

   <AlternatingRowStyle Height="25px" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle" />

   <FooterStyle BackColor="Gray" />

</asp:GridView>

onclick event를 the GridView 헤더의 Image에 추가한다.

<asp:Image ID="imgTab" onclick="javascript:Toggle(this);" runat="server" ImageUrl="~/minus.gif"

                                                                                          ToolTip="Collapse" />

자바스크립트 코드 사용

script tag태그 안에 다음 코드를 추가한다.

 <script type="text/javascript">

 var Grid = null;

 var UpperBound = 0;

 var LowerBound = 1;

 var CollapseImage = 'minus.gif';

 var ExpandImage = 'plus.gif';

 var IsExpanded = true;  

 var Rows = null;

 var n = 1;

 var TimeSpan = 25;

 window.onload = function()

 {

    Grid = document.getElementById('<%= this.gvTab.ClientID %>');

    UpperBound = parseInt('<%= this.gvTab.Rows.Count %>');

    Rows = Grid.getElementsByTagName('tr');

 }

 function Toggle(Image)

 {

    ToggleImage(Image);

    ToggleRows(); 

 }   

 function ToggleImage(Image)

 {

    if(IsExpanded)

    {

       Image.src = ExpandImage;

       Image.title = 'Expand';

       Grid.rules = 'none';

       n = LowerBound;

       IsExpanded = false;

    }

    else

    {

       Image.src = CollapseImage;

       Image.title = 'Collapse';

       Grid.rules = 'cols';

       n = UpperBound;

       IsExpanded = true;

    }

 }

 function ToggleRows()

 {

    if (n < LowerBound || n > UpperBound)  return;

    Rows[n].style.display = Rows[n].style.display == '' ? 'none' : '';

    if(IsExpanded) n--; else n++;

    setTimeout("ToggleRows()",TimeSpan);

 }

 </script>

위 코드에서, window.onload event 안의 전역 변수들은 초기화된다. 여기에는 세 가지 메소드 Toggle, ToggleImage와 ToggleImage가 있다. Toggle 메소드는 헤더 이미지를 연속으로 누르면 호출된다. 이 메소드는 먼저 헤더 이미지를 반전시키고 그 다음에는 ToggleImage와 ToggleImage 메소드의 호출에 의해 GridView의 열을 반전시킨다. ToggleRows 메소드는 여기에서 setTimeout 메소드를 사용하여 회귀적으로 호출된다는 점을 유의하자. GridView 열을 확대하고 축소하는 동안 몇 가지 역동적인 효과를 생성하기 위해 여기에서 회귀적으로 호출하였다.

각 재귀호출에서 지연을 만들기 위해서, ToggleRows 메소드의 각 호출을 25 밀리세컨드로 설정했다. 필요하다면 TimeSpan 값을 바꿔서 변경할 수 있다.
 

맺는 말

이 아티클에서는, 매끄러운 확장/축소Collapse 기능을 위해 setTimeout 메소드를 사용했다.

출처 : http://www.codeproject.com/KB/webforms/GridViewExpandCollapse.aspx

GridViewExpandCollapse.zip