GridView行の展開と縮小
19170 ワード
原文住所:
http://www.codeproject.com/KB/webforms/GridViewExpandCollapse.aspx
コードのダウンロード:
/Files/sunfishlu/GridViewExpandCollapse.rar
効果図:
この記事では、JavaScriptを使用してGridView行を折りたたむ/展開する機能を紹介し、所望の効果を実現するためにGridViewのヘッダーに1枚の画像を置き、対応する画像をクリックするとGridView行を折りたたんで展開します.
HTMLコードはGridViewにテンプレート列を追加し、画像をテンプレート列のHeaderTemplateに配置します.このGridViewのHTMLコードは以下の通りです.
Code
1
ShowFooter="True">3
4
5
6
7
8
ToolTip="Collapse"/>10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
VerticalAlign="Middle"/>27
28
29
30
31
GridViewのヘッダピクチャバインドonclickイベント
Code
JavaScriptコードは次のコードをscriptラベルに入れます.
Code
varGrid=null;
varUpperBound=0;
varLowerBound=1;
varCollapseImage='minus.gif';
varExpandImage='plus.gif';
varIsExpanded=true;
varRows=null;
varn=1;
varTimeSpan=25;
window.onload=function()
{
Grid=document.getElementById('<%=this.gvTab.ClientID%>');
UpperBound=parseInt('<%=this.gvTab.Rows.Count%>');
Rows=Grid.getElementsByTagName('tr');
}
functionToggle(Image)
{
ToggleImage(Image);
ToggleRows();
}
functionToggleImage(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;
}
}
functionToggleRows()
{
if(nUpperBound)return;
Rows[n].style.display=Rows[n].style.display==''?'none':'';
if(IsExpanded)n--;elsen++;
setTimeout("ToggleRows()",TimeSpan);
}
上のコードでは、グローバルパラメータはwindowです.onloadイベントで初期化されました.3つの方法があります.toogle ToogleImageとToggleRowsです.Toogleメソッドはclickイベントに応答し、まず表の頭の画像を見つけ、ToogleImageとToggleRowsを呼び出すことで私たちの目的を実現します.注意ToggleRows法では,いくつかの動的効果を達成するために,スムーズな展開と折り畳みの効果を達成するために
http://www.codeproject.com/KB/webforms/GridViewExpandCollapse.aspx
コードのダウンロード:
/Files/sunfishlu/GridViewExpandCollapse.rar
効果図:
この記事では、JavaScriptを使用してGridView行を折りたたむ/展開する機能を紹介し、所望の効果を実現するためにGridViewのヘッダーに1枚の画像を置き、対応する画像をクリックするとGridView行を折りたたんで展開します.
HTMLコードはGridViewにテンプレート列を追加し、画像をテンプレート列のHeaderTemplateに配置します.このGridViewのHTMLコードは以下の通りです.

Code
1




























GridViewのヘッダピクチャバインドonclickイベント

Code



JavaScriptコードは次のコードをscriptラベルに入れます.

Code





























































上のコードでは、グローバルパラメータはwindowです.onloadイベントで初期化されました.3つの方法があります.toogle ToogleImageとToggleRowsです.Toogleメソッドはclickイベントに応答し、まず表の頭の画像を見つけ、ToogleImageとToggleRowsを呼び出すことで私たちの目的を実現します.注意ToggleRows法では,いくつかの動的効果を達成するために,スムーズな展開と折り畳みの効果を達成するために
setTimeout 。
, ToggleRows 25 , TimeSpan 。
, setTimeout
を り し いた.