Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use jQuery to achieve ASP.NET GridView folding and stretching effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use jQuery to achieve ASP.NET GridView folding and stretching effect" bar!

1. The solution of * reaction

After meeting this requirement, my response is very simple. I use two DIV to wrap the TR tags in the first three Table and the last three TR tags, and then control the display of the DIV through JS.

* step: using DIV to package requires hiding the displayed TR. The code is as follows:

Name: age:

Step 2: use JS to control the display of DIV to achieve the effect of controlling hidden or displayed rows:

("# divName"). Style.display = "none"; $("# divSex"). Style.display = "block"

Step 3: run the program, you will find that it doesn't work at all, , it feels like being played ~! Because TR tags can only be used with TABLE tags! Well, even though the above code doesn't work! But it still plays a guiding role, failure is the mother of success!

2. Use panel solution recommended by colleagues

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

* * step: use the PANEL control to wrap the TR tags that are used to show or hide, as follows:

Name: age:

Step 2: use the Visible property of the Panel control to control the output of the line on the server side, 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 no problem with this method, it still feels too unreasonable, doesn't it? Does the code that controls the display of the page also have to be done by the server? What a waste of performance! And the page control code and logical interaction code together is simply chaotic ah, when rejecting this method, our hero crooked comrade appeared on the stage, said crooked comrade I have to admire ah, as a project manager, the foundation of writing code is even stronger than programmers, there is no need for code hints, pure manual keystroke and clear ideas * * to solve this problem!

3. The nonsense solution of the colleague "crooked" warrior.

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

* step: add an unimplemented class style to the TR tag. The code is as follows:

Name: age:

Step 2: use Jquery to get the TR element according to 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, no problem at all, this problem is solved!

4. according to the application scenario of the realization of the association of the warrior.

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

* step: how to add a class attribute to a GridView data row? We can set it with the line style () of GridView, as follows:

When we run the page, look at the source code of the page output and see that all the TR in the GridView data section is assigned a class= "test" attribute!

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

If (! IsPostBack) {List sList = new List () {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 ();}}

Step 3: add a button to control the display or hiding of GridView data, as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.