How to use jQuery to achieve the folding and stretching effect of ASP.NET GridView_jquery

There is a requirement when making a static page today, that is, there is a set of radio buttons with two options and a list of 6 rows on the page (the list is implemented with the Table tag, not DIV). When the option of the radio button is selected For a moment, the first three pieces of information in the list are displayed and the last three pieces of information are hidden. When option 2 of the radio button is selected, the first three pieces of information in the list are hidden and the last three pieces of information are displayed. So that brings us to today’s topic, how to achieve it? After implementation, what other scenarios can this implementation be applied to?

1. First response solution

After encountering this requirement, my first reaction was that it was very simple. Use two DIVs to wrap the TR tags in the first three Tables and the last three TR tags, and then control the display of the DIVs through JS.

Step one: Use DIV wrapping to hide the displayed TR. The code is as follows:

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

Step 2: Use JS to control the display of DIV to achieve the effect of hiding or showing rows:

$("#divName").style.display = "none";
$("#divSex").style.display = "block";
Step 3: Run the program, you will find that it doesn’t work at all, haha, it feels a bit like being fooled~! Because the TR tag can only be used with the TABLE tag! Ok, although the above code doesn’t work! But it still plays a guiding role. Failure is a success!

2. Recommended panel solution

This is after I described that DIV and TR cannot be used together, and I was laughed at by my colleagues. Hey, it seems that I need to learn more about HTML in the future. After laughing at me, my colleague Dong Ning told me to wrap TR with PANEL control. , use the Visible attribute to control the output of TR at the server level.

Step one: Use the PANEL control to wrap the TR tag used to show or hide. The code is as follows:

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

Step 2: Use the Visible property of the Panel control on the server side to control the output of the rows. The code is as follows:

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

Although there is nothing wrong with this method, it still feels too nonsensical, right? Should the code that controls page display also be done on the server side? What a waste of performance! Moreover, putting the page control code and the logical interaction code together is simply confusing. When this method was rejected, our hero Comrade Wai Wai appeared on the stage and said that I have to admire Comrade Wai Wai. As a project manager, Wai Wai Weird, my coding skills are even better than those of a programmer. No code prompts are needed at all. Just manual keyboard typing and clear thinking solve the problem perfectly!

3. Nonsensical solution

So, let’s look at this idea. First, assign a class style to each TR tag. However, this style is not implemented. It only obtains the identifier of the TR.

Step one: Add an unimplemented class style to the TR tag. The code is as follows:

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

Step 2: Use Jquery to get the TR element based on class and control its hiding or display. The code is as follows:

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

Step 3: Run, there is no problem at all, this problem is solved!

4. Implement Lenovo’s application scenarios according to the third solution

Now that we can control the display and hiding of TR in TABLE, we can think of the data part of the ASP.NET GridView control that is output to the browser after binding data, and is also displayed in the form of TR, so we can Can you control the display and hiding of GridView content? Of course no problem.

Step one: How to add class attributes to GridView data rows? We can use the GridView's row style () to set it. The code is as follows:

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

At this point, when we run the page and view the source code output by the page, we will see that all TRs in the GridView data part have been given a class="test" attribute!

Step 2: Bind data, the code is as follows:

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

Step 3: Add a button to control the display or hiding of GridView data. The code is as follows:

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

Step 4: Implement the JS method to control display and hiding. The code is as follows:

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, that’s it for introducing the reasons, characters, inspirations, and the entire cause and effect of realizing this function. Programming is not only about realizing functions, but also integrating into life.

The above four methods are closely connected and related to each other. I hope everyone can taste them carefully, ponder them carefully, truly make them your own, and apply them to your studies.