Home>

We analyze today a specific need,Introduce how to use jquery to achieve the asp.net gridview folding and stretching effect.

There is a need when doing static pages today,This is a radio button with a set of two options on the page and a list with 6 rowsNot div), when option 1 of the radio button is selected,The first three messages of the list are displayed and the last three messages are hidden.When option two of the radio button is selected,The first three messages in the list are hidden and the last three messages are displayed.Well, it is related to our topic today,How to achieve it?What scenarios can this implementation be applied to after implementation?

1.First reaction solution

After encountering this demand,My first reaction was simple.Use two divs to wrap the tr tags in the first three tables with the last three tr tags.Then control the display of the div through js.

Step 1:Use div to wrap the tr that needs to be hidden. code show as below:

<table>
<div>
<tr>
<td>Name:</td>
<td><input type="text" /></td>
</tr>
</div>
<div>
<tr>
<td>Age:</td>
<td><input type="text" /></td>
</tr>
</div>
</table>

Step 2:Use js to control the display of the div to achieve the effect of controlling the hidden or displayed rows:

$("#divname"). style.display="none";

$("#divsex"). style.display="block";

Step 3:Run the program,You'll find it doesn't work at all,Haha, it feels a bit tricked ~! Because tr tags can only be used with table tags! OK, although the above code doesn't work! But it still plays a guiding role,Failure is the successful wife!

2.Recommended panel solution

This is after I described that div and tr cannot be used together,Joke by colleagues,Hey, it seems that I have to learn more about html in the future. After the joke,My colleague Dong Ning told me to use a panel control to wrap tr and use the visible property to control tr output at the server level.

The first step:use the panel control to wrap the tr tag for display or hide, the code is as follows:

<table>
<asp:panel runat="server">
<tr>
<td>Name:</td>
<td><input type="text" /></td>
</tr>
</asp:panel>
<asp:panel runat="server">
<tr>
<td>Age:</td>
<td><input type="text" /></asp:panel>
</tr>
</asp:panel>
</table>

Step 2:Use the visible property of the panel control to control the output of the row on the server side.code show as below:

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 no problem,But it still feels too clueless?Should the code displayed on the control page be done by the server?Too wasteful performance! And the page control code and the logic interaction code are very confusing together.When vetoing this approach,Our hero Comrade Weiwai is here.I have to admire Comrade Weiwei,The crookedness of a project manager,The skill of writing code is even stronger than that of programmers.No code hinting at all,Typing the keyboard by hand and clear thinking perfectly solved the problem!

3. Non-trivial solution

So let ’s look at this idea,First assign a class style to each tr tag, but this style is not implemented,Just do get the identity of the tr.

Step 1:Add an unimplemented class style to the tr tag. code show as below:

<table>
<tr>
<td>Name:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" /></td>
</tr>
</table>

Step 2:Use jquery to get the tr element according to the class and control whether it is hidden or displayed.code show as below:

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

The third step:running, no problem at all,This issue is resolved!

4.Application scenarios of Lenovo according to the third solution

We can now control the display and hide of tr in the table.We can think of the data part of the asp.net gridview control output to the browser after the data is bound,Also displayed in the form of tr,So can we control the display and hide of the gridview content?Of course no problem.

Step 1:How to add the class attribute to the gridview data row?We can set it with the row style of the gridview (), the code is as follows:

<asp:gridview runat="server">
<rowstyle cssclass="test" />
</asp:gridview>

At this point we run the page,Looking at the source code of the page output, you will see that all tr ​​of the gridview data part is assigned a class="test" attribute!

Step 2:Binding the data,code show as below:

if (! ispostback)
  {
   list<student>slist=new list<student>()
   {
    new student () {sid="s001", sname="Zhang San", ssex="male"},    new student () {sid="s002", sname="Li Si", ssex="Female"},    new student () {sid="s003", sname="Wang Wu", ssex="male"}
   };
   gridview1.datasource=slist;
   gridview1.databind ();
  }
 }

The third step:add buttons to control the display or hide gridview data,code show as below:

<input type="button" value="hide" onclick="showdate ()" />

The fourth step:implement the js method to control the display and hide, 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 "show":
     $rows.show ();
     $("#btn"). val ("hidden");
     break;
   }
  }

Hehe, the reasons, characters, inspiration, and the whole cause and effect to achieve this function have been introduced.Well, programming is not just about implementing functions,Even more integrated into life.

The above four methods are all closely linked,Interconnected,I hope you have a good taste.Ponder carefully,What truly becameApply to learning.

  • Previous Method for bulk modifying MySQL data table prefix using phpMyAdmin
  • Next Analysis of transaction usage examples in C #