Comment utiliser jQuery pour obtenir l'effet de pliage et d'étirement d'ASP.NET GridView_jquery

Il y a une exigence lors de la création d'une page statique aujourd'hui, c'est-à-dire qu'il y a un ensemble de boutons radio avec deux options et une liste de 6 lignes sur la page (la liste est implémentée avec la balise Table, pas DIV). Lorsque l'option du bouton radio est sélectionnée. Pendant un instant, les trois premières informations de la liste sont affichées et les trois dernières informations sont masquées. Lorsque l'option 2 du bouton radio est sélectionnée, les trois premières informations sont sélectionnées. dans la liste sont masqués et les trois dernières informations sont affichées. Cela nous amène donc au sujet d’aujourd’hui, comment y parvenir ? Après la mise en œuvre, à quels autres scénarios cette mise en œuvre peut-elle être appliquée ?

1. Solution de première réponse

Après avoir rencontré cette exigence, ma première réaction a été que c'était très simple. Utilisez deux DIV pour envelopper les balises TR dans les trois premières tables et les trois dernières balises TR, puis contrôlez l'affichage des DIV via JS.

Première étape : utilisez l'habillage DIV pour masquer le TR affiché. Le code est le suivant :

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

Étape 2 : Utilisez JS pour contrôler l'affichage des DIV afin d'obtenir l'effet de masquer ou d'afficher des lignes :

$("#divName").style.display = "aucun"
$("#divSex").style.display = "bloquer"
Étape 3 : Exécutez le programme, vous constaterez qu'il ne fonctionne pas du tout, haha, c'est un peu comme être dupé~ ! Parce que la balise TR ne peut être utilisée qu'avec la balise TABLE ! Ok, même si le code ci-dessus ne fonctionne pas ! Mais il joue toujours un rôle directeur. L’échec est une réussite !

2. Solution de panneau recommandée

C'est après avoir décrit que DIV et TR ne peuvent pas être utilisés ensemble, et mes collègues se sont moqués de moi. Hé, il semble que j'ai besoin d'en apprendre davantage sur HTML à l'avenir. Après s'être moqué de moi, mon collègue Dong. Ning m'a dit d'envelopper TR avec PANEL control et d'utiliser l'attribut Visible pour contrôler la sortie de TR au niveau du serveur.

Première étape : utilisez le contrôle PANEL pour envelopper la balise TR utilisée pour afficher ou masquer. Le code est le suivant :

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

Étape 2 : Utiliser la propriété Visible du contrôle Panel côté serveur pour contrôler la sortie des lignes. Le code est le suivant :

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

Bien qu'il n'y ait rien de mal avec cette méthode, elle semble quand même trop absurde, n'est-ce pas ? Le code qui contrôle l’affichage de la page doit-il également être réalisé côté serveur ? Quel gâchis de performances ! De plus, assembler le code de contrôle de page et le code d'interaction logique est tout simplement déroutant. Lorsque cette méthode a été rejetée, notre héros, le camarade Wai Wai, est apparu sur scène et a dit que je devais admirer le camarade Wai Wai en tant que chef de projet. Bizarre, mes compétences en codage sont encore meilleures que celles d'un programmeur. Aucune invite de code n'est nécessaire. Il suffit de taper manuellement au clavier et de penser clairement pour résoudre parfaitement le problème !

3. Solution absurde

Alors, regardons cette idée. Tout d'abord, attribuez un style de classe à chaque balise TR. Cependant, ce style n'est pas implémenté. Il obtient uniquement l'identifiant du TR.

Première étape : ajoutez un style de classe non implémenté à la balise TR. Le code est le suivant :

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

Étape 2 : Utilisez Jquery pour obtenir l'élément TR en fonction de la classe et contrôler son masquage ou son affichage. Le code est le suivant :

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

Étape 3 : Exécutez, il n'y a aucun problème, ce problème est résolu !

4. Implémenter les scénarios d'application de Lenovo selon la troisième solution

Maintenant que nous pouvons contrôler l'affichage et le masquage de TR dans TABLE, nous pouvons penser à la partie données du contrôle ASP.NET GridView qui est sortie vers le navigateur après la liaison des données et est également affichée sous la forme de TR. , afin que nous puissions contrôler l'affichage et le masquage du contenu GridView ? Bien sûr, aucun problème.

Première étape : Comment ajouter des attributs de classe aux lignes de données GridView ? Nous pouvons utiliser le style de ligne du GridView () pour le définir. Le code est le suivant :

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

À ce stade, lorsque nous exécutons la page et visualisons le code source généré par la page, nous verrons que tous les TR de la partie données GridView ont reçu un attribut class="test" !

Étape 2 : Lier les données, le code est le suivant :

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

Étape 3 : Ajouter un bouton pour contrôler l'affichage ou le masquage des données GridView Le code est le suivant :

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

Étape 4 : Implémenter la méthode JS pour contrôler l'affichage et le masquage Le code est le suivant :

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

Haha, c'est tout pour présenter les raisons, les personnages, les inspirations et toutes les causes et effets de la réalisation de cette fonction. La programmation ne consiste pas seulement à réaliser des fonctions, mais aussi à s'intégrer dans la vie.

Les quatre méthodes ci-dessus sont étroitement liées les unes aux autres. J'espère que tout le monde pourra les goûter attentivement, y réfléchir attentivement, les approprier vraiment et les appliquer à vos études.