GridView行の展開と縮小

19170 ワード

GridView

原文住所:
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

ToolTip="Collapse"/>10

VerticalAlign="Middle"/>27

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法では,いくつかの動的効果を達成するために,スムーズな展開と折り畳みの効果を達成するために

setTimeout  。
               ，     ToggleRows      25  ，         TimeSpan  。

  
      ，    setTimeoutを り し いた.

[Python / Pandas] DataFrameに対して`replace`で`None`に置き換えようとするとバグが発生する

ハニーポットのレポートを LINEで通知させてみた