jQuery を使用して ASP.NET GridView_jquery の折りたたみと伸縮効果を実現する方法

現在、静的ページを作成する場合、要件があります。つまり、ページ上に 2 つのオプションを持つラジオ ボタンのセットと 6 行のリストが存在します (リストは DIV ではなく Table タグで実装されます)。ラジオボタンの選択肢を選択した場合 しばらくの間、リストの最初の 3 つの情報が表示され、最後の 3 つの情報が非表示になります。 ラジオボタンの選択肢 2 を選択した場合、最初の 3 つの情報が非表示になります。リスト内の情報は非表示になり、最後の 3 つの情報が表示されます。それでは、今日のテーマは、どうやってそれを達成するかということになります。実装後、この実装は他のどのようなシナリオに適用できますか?

1. 最初の対応策

この要件に遭遇した後、私の最初の反応は、2 つの DIV を使用して最初の 3 つのテーブルと最後の 3 つの TR タグをラップし、JS を通じて DIV の表示を制御するというものでした。

ステップ 1: DIV ラッピングを使用して、表示されている TR を非表示にします。コードは次のとおりです:

<table> 
<div id="divName"> 
<tr> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</div> 
<div id="divSex"> 
<tr> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</div> 
</table> 

ステップ 2: JS を使用して DIV の表示を制御し、行の非表示または表示の効果を実現します:

$("#divName").style.display = "なし"
$("#divSex").style.display = "ブロック"; ステップ 3: プログラムを実行してみると、まったく動作しないことがわかります (笑)、ちょっとだまされたような気分ですね～!なぜなら、TR タグは TABLE タグと一緒にのみ使用できるからです。わかりました。ただし、上記のコードは機能しません。しかし、それでも失敗は成功への導きの役割を果たします。

2. 推奨パネル ソリューション

これは、DIV と TR を併用できないことを説明した後、同僚に笑われました。今後は HTML についてもっと学ぶ必要があるようです。 Ning は、TR を PANEL コントロールでラップし、Visible 属性を使用してサーバー レベルで TR の出力を制御するように言いました。

ステップ 1: PANEL コントロールを使用して、表示または非表示に使用する TR タグをラップします。コードは次のとおりです。

<table> 
<asp:Panel ID="plName" runat="server"> 
<tr> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</asp:Panel> 
<asp:Panel ID="plSex" runat="server" > 
<tr> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></asp:Panel></td> 
</tr> 
</asp:Panel> 
</table> 

ステップ 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 タグにクラス スタイルを割り当てます。ただし、このスタイルは TR の識別子を取得するだけです。 ステップ 1: 未実装のクラス スタイルを TR タグに追加します。コードは次のとおりです:

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

<table id="MyList"> 
<tr class="NameCSS"> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
<tr class="SexCss"> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</table> 

ステップ 3: 実行します。まったく問題はありません。この問題は解決されました。

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; 
} 

4. 3 番目のソリューションに従って Lenovo のアプリケーション シナリオを実装します

TABLE で TR の表示と非表示を制御できるようになったので、データをバインドした後にブラウザーに出力され、TR の形式で表示される ASP.NET GridView コントロールのデータ部分について考えることができます。 GridView コンテンツの表示と非表示を制御できますか?もちろん問題ありません。

ステップ 1: GridView データ行にクラス属性を追加するにはどうすればよいですか? GridView の行スタイル () を使用して設定できます。コードは次のとおりです:

この時点で、ページを実行し、ページによって出力されたソース コードを表示すると、GridView データ部分のすべての TR に class="test" 属性が与えられていることがわかります。

ステップ 2: データをバインドします。コードは次のとおりです:

<asp:GridView ID="GridView1" runat="server"> 
<RowStyle CssClass="test" /> 
</asp:GridView> 

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

if (!IsPostBack) 
  { 
   List<Student> sList = new List<Student>() 
   { 
    new Student(){ SID = "s001", SName="张三", SSex="男"}, 
    new Student(){ SID = "s002", SName="李四", SSex="女"}, 
    new Student(){ SID = "s003", SName="王五", SSex="男"} 
   }; 
 
   GridView1.DataSource = sList; 
   GridView1.DataBind(); 
  } 
 } 

ステップ 4: 表示と非表示を制御する JS メソッドを実装する コードは次のとおりです:

<input id="btn" type="button" value="隐藏" onclick="ShowDate()" /> 

はは、この機能を実現する理由、登場人物、インスピレーション、そしてその因果関係の紹介は以上です。プログラミングは機能を実現するだけでなく、生活に統合するものでもあります。 上記の 4 つの方法は密接に関連しており、皆さんもじっくり味わい、よく考え、自分のものにして、学習に応用していただければと思います。