jQueryでASPを実現する方法NET GridView折りたたみストレッチ効果

今日、静的なページを作るときに必要なのは、ページに2つのオプションのセットがあるラジオボタンと6行のリスト(このリストはTableラベルで実現され、DIVではありません)があり、ラジオボタンのオプションを選択すると、リストの最初の3つの情報が表示された後、3つの情報が隠され、ラジオボタンのオプション2を選択すると、リストの最初の3つの情報が非表示になった後、3つの情報が表示されます.では、私たちの今日の話題に巻き込まれて、どのように実現しますか?実装後にどのようなシーンに適用できますか?
1、第一反応の解決方案
この需要に出会った後、私の最初の反応は簡単ですね.前の3つのTableのTRラベルと後の3つのTRラベルをそれぞれ2つのDIVで包んで、JSでDIVの表示を制御します.
ステップ1:DIVラップを使用するには、表示されているTRを非表示にする必要があります.コードは次のとおりです.

名前:
年齢:
ステップ2:JSを使用してDIVの表示を制御し、行の非表示または表示を制御する効果を達成する:
$("#divName").style.display = "none";  $("#divSex").style.display = "block"; 第三歩:プログラムを実行して、あなたは全然役に立たないことを発見することができて、ははは、少しからかわれた感じ~!TRタグはTABLEタグとしか使えないから!はい、上のコードは使いませんが!しかし、まだ一つの導きの役割を果たしているのではないでしょうか.失敗は成功したおばあさんですね.
2、推奨するpanelソリューションの使用
これはDIVとTRがうまく使えないことを説明した後、同僚に笑われたのです.ああ、これからHTMLの勉強をたくさんしなければなりませんね.笑われた後、同僚の董寧さんは私にPANELコントロールでTRを包み、Visible属性でサーバーレベルでTRの出力をコントロールするように教えてくれました.
手順1:PANELコントロールを使用してTRラベルを表示または非表示にします.コードは次のとおりです.

名前:
年齢:
ステップ2:サーバ側でPanelコントロールのVisible属性を使用して行の出力を制御します.コードは以下の通りです.

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) 
{ 
 string val = RadioButtonList1.SelectedValue; 
 switch (val) 
 { 
  case "Name": 
   plName.Visible = true; 
   plSex.Visible = false; 
   break; 
  case "Sex": 
   plName.Visible = false; 
   plSex.Visible = true; 
   break; 
  default: 
   plName.Visible = true; 
   plSex.Visible = true; 
   break; 
 } 
} 

この方法は問題ありませんが、あまりにも無厘な感じがしますよね?ページ表示を制御するコードもサーバー側にやらせますか?性能がもったいない!しかもページ制御のコードは論理インタラクティブコードと一緒に置くのは混乱していますね.この方法を否決する時、私たちの大侠歪同志が登場しました.歪同志といえば感心せざるを得ません.プロジェクトマネージャーとしての歪、コードを書く基礎は意外にも程序員よりも強く、コードのヒントは全く必要ありません.純粋な手作業でキーボードを叩くと、考えがはっきりしていて、この問題を完璧に解決します.
3、無厘頭解決方案
では,この考え方を見ると,まず各TRラベルにclassスタイルを付与するが,このスタイルは実現されず,そのTRを取得する標識のみを行う.
ステップ1:TRラベルに実装されていないclassスタイルを追加します.コードは次のとおりです.

名前:
年齢:
ステップ2:Jqueryを使用してclassに基づいてTR要素を取得し、その非表示または表示を制御します.コードは次のとおりです.

var $rowsName = $("#MyList").find(".NameCSS"); 
var $rowsSex = $("#MyList").find(".SexCss"); 
switch (selectedValue) 
{ 
 case "Name": 
 $rowsSex.hide(); 
 $rowsName.show(); 
 break; 
 case "Sex": 
 $rowsSex.show(); 
 $rowsName.hide(); 
 break; 
} 

ステップ3:実行、問題なし、この問題を解決!
4、第三案による連想を実現する応用シーン
TABLEのTRの表示と非表示を制御できるようになった後、ASPを考えることができます.NET GridViewコントロールは、データをバインドしてブラウザに出力したデータ部分もTR形式で表示されますが、GridViewコンテンツの表示と非表示を制御できますか?もちろん大丈夫です.
ステップ1:GridViewデータ行にclassプロパティを追加するにはどうすればいいですか?GridViewの行スタイル()で設定できます.コードは次のとおりです.

このときページを実行し、ページ出力のソースコードを表示すると、GridViewデータ部分のすべてのTRにclass=「test」属性が付与されていることがわかります.
ステップ2:データをバインドします.コードは次のとおりです.

if (!IsPostBack) 
  { 
   List sList = new List() 
   { 
    new Student(){ SID = "s001", SName="  ", SSex=" "}, 
    new Student(){ SID = "s002", SName="  ", SSex=" "}, 
    new Student(){ SID = "s003", SName="  ", SSex=" "} 
   }; 
 
   GridView1.DataSource = sList; 
   GridView1.DataBind(); 
  } 
 } 

ステップ3:GridViewデータの表示または非表示を制御するボタンを追加します.コードは次のとおりです.

ステップ4:表示と非表示を制御するJS方法を実現する.コードは以下の通りである.

function ShowDate() { 
   var val = $("#btn").val(); 
   var $rows = $("#GridView1").find(".test"); 
   switch (val) { 
    case "  ": 
     $rows.hide(); 
     $("#btn").val("  "); 
     break; 
    case "  ": 
     $rows.show(); 
     $("#btn").val("  "); 
     break; 
   } 
  } 

ほほほ、この機能を実現する原因、人物、インスピレーション、全体の前因と結果は紹介し終わって、プログラミングは機能を実現するだけではなくて、更に生活に溶け込みます.
以上の4つの方法はすべて緊密につながっていて、互いに連絡があって、みんなが細かく味わって、よく考えて、本当に自分のものになって、勉強の中で運用することを望んでいます.