How to use jquery to realize folding and stretching effect of asp.net gridview _jquery

Today, there is a need to do static pages, that is, there is a set of two options on the page radio buttons and a list of 6 rows (the list is implemented with a table tag, not div), when selecting the option for a radio button, the first three messages in the list show the three hidden information, when the option to select the radio button is two o'clock, The first three messages in the list are hidden and the following three messages are displayed. So it involves our topic today, how to achieve it? What are the scenarios that the implementation can apply to after implementation?

1, the first reaction solution

Encounter this demand, my first reaction is very simple ah, respectively, with two div to the first three table of the TR tag with the last three TR tags, and then through JS Control div display.

First step: Use div wrap to hide the shown tr. The code is as follows:

<table> 
<div id= "Divname" > 
<tr> 
<td> name:</td> 
<td><input Id= "Txtname" type= "text"/></td> 
</tr> 
</div> 
<div id= "Divsex" > 
< tr> 
<td> Age:</td> 
<td><input id= "Txtsex" type= "text"/></td> 
Tr> 
</div> 

The second step: Use JS control div display, to achieve control to hide or show the effect of the line:

$ ("#divName"). Style.display = "None";
$ ("#divSex"). Style.display = "block";
Step three: Run the program, you will find that no use, haha, a bit of the feeling of being played ~! Because the TR tag can only be used with the table tag! OK, although the code above doesn't work! But it is also a guide to the role of it, failure is the mother of success!

2, recommended use of the Panel solution

This is in my description of the DIV and TR can not be used together, by colleagues jokes, hey, it seems to learn more HTML after the joke, my colleague Dong Ning told me to use the Panel control to wrap TR, with the Visible property at the server level control of the output of tr.

Step one: Use the Panel control to wrap the TR tag that is used to display or hide the following code:

<table> 
<asp:panel id= "plname" runat= "Server" > 
<tr> 
<td> name:</td> 
<td><input id= "txtname" type= "text"/></td> 
</tr> 
</asp:Panel> 
<asp :P anel id= "plsex" runat= "Server" > 
<tr> 
<td> age:</td> <td><input id= 
" Txtsex "type=" text "/></asp:panel></td> 
</tr> 
</asp:Panel> 

Step two: Using the Visible property of the Panel control on the server side to control the output of the row, 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 this method is not a problem, but the feeling is still too unreasonable? Does the code that controls the page display have to be done by the server? It's a waste of performance! and the code that controls the page with the logical interaction code is a mess, in the veto this approach, our hero crooked Comrade debut, said crooked Comrade I have to admire Ah, as the project manager crooked, write code of the foundation than the programmer still fierce, completely without code hints, Pure hand-tapping keyboard and clear ideas to solve the problem perfectly!

3, the Unreasonable solution

So, let's take a look at this idea, first give each TR tag a class style, but this style is not implemented, just to get the identity of the TR.

First step: Add a class style that is not implemented for the TR tag. The code is as follows:

<table id= "MyList" > 
<tr class= "Namecss" > 
<td> name:</td> <td><input id= 
"Txtname" type= "text"/></td> 
</tr> 
<tr class= "Sexcss" > 
<td> Age:</td> 
<td><input id= "Txtsex" type= "text"/></td> 
</tr> 

Step two: Use jquery to get the TR element based on class and control it to hide or display the code 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 three: Run, there is no problem, solve this problem!

4, according to the implementation of the third Plan Lenovo application scenario

We can now control the display and hide of TR in table, we can think of the ASP.net GridView control after binding the data to the browser after the data part, but also in the form of TR, then we could control the content of the GridView display and hide it? Of course it's no problem.

First step: How do I add the class attribute to the GridView data row? We can set the GridView line style (<rowstyle cssclass= "test"/>) to the following code:

<asp:gridview id= "GridView1" runat= "Server" > 
<rowstyle cssclass= "test"/> 

At this point we run the page, view the page output of the source code will see the GridView Data section of all TR is given a class= "test" attribute!

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

if (! IsPostBack) 
  { 
   list<student> slist = new List<student> () 
   { 
    new Student () {SID = "s001", Sname= "John", Ssex= "Man"}, 
    new Student () {sid = "s002", sname= "Dick", ssex= "female"}, 
    new Student () {SID = "s003", Sname= "King" Five ", ssex=" Men "} 
   ; 
 
   Gridview1.datasource = slist; 
   Gridview1.databind (); 
  } 
 

Step three: Add the button to control the display or hide the GridView data as follows:

<input id= "btn" type= "button" value= "Hide" onclick= "Showdate" () "/>" 

Fourth step: To achieve control display and hidden JS method, the code is as follows:

function Showdate () { 
   var val = $ ("#btn"). Val (); 
   var $rows = $ ("#GridView1"). Find (". Test"); 
   Switch (val) {case 
    "hidden": 
     $rows. Hide (); 
     $ ("#btn"). Val ("show"); 
     break; 
    Case "Display": 
     $rows. Show (); 
     $ ("#btn"). Val ("hidden"); 
     break; 
    
  

Oh, to achieve the function of the reasons, characters, inspiration, the entire cause and result of the introduction, programming is not only to achieve the function, but also to integrate into life.

The above four methods are closely linked to each other, and I hope that we savor, carefully pondering, really become their own things, apply to the study.