Home > Others

Best implementation of the gridview Fixed Header

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Recently, the gridview Fixed Header is often used, and the drop-down scroll bar appears when there is too much data in the gridview. Although it is implemented, the best method has not been found. Finally let me find and implement it perfectly.

First, there are two divs, one of which is in div2.

 

 

<Div id = "divone" style = "overflow-X: hidden; overflow-Y: auto; Height: expression (this. scrollheight> 500? '500px ': 'auto'); ">

</Div>

<Div id = "divtwo" style = "overflow-X: hidden; overflow-Y: auto; Height: expression (this. scrollheight> 500? '500px ': 'auto'); ">

// The gridview is here

</Div>

Then, clone the header of the gridview to divone in JavaScript to completely display the Fixed Header.

Disadvantages: too much JavaScript code is written, the page layout is troublesome, And the compatibility is poor. The later versions of IE are compatible.

 

Second, the one that has just been successfully tested, recommended

Scrollabletable is used. JS "this small js code is very small on the Internet. It is very good to fix the header and end of a table from thead, tbody, and tfooter.

1. Reference this JS

<SCRIPT src = "javascript/scrollabletable. js" type = "text/JavaScript"> </SCRIPT>

2.

<Body onload = "makescrollabletable ('gridview1', true, '500px ')"> // ------ Here is the focus
<Form ID = "form1" runat = "server">
<Div> <asp: gridview id = "gridview1" runat = "server" autogeneratecolumns = "false"
Backcolor = "white" bordercolor = "# cccccc" borderstyle = "NONE" borderwidth = "1px"
Cellpadding = "3" datasourceid = "sqldatasource1"
Onprerender = "gridviewjavasprerender">
<Rowstyle forecolor = "#000066" type = "regxph" text = "yourobjectname"/>
<Columns>
<Asp: boundfield datafield = "username" headertext = "username"
Sortexpression = "username"/>
<Asp: boundfield datafield = "deptname" headertext = "Company"
Sortexpression = "deptname"/>
<Asp: boundfield datafield = "officename" headertext = "department"
Sortexpression = "officename"/>
<Asp: boundfield datafield = "suboffice" headertext = "Department Workshop"
Sortexpression = "suboffice"/>
<Asp: boundfield datafield = "ipaddres" headertext = "ip address"
Sortexpression = "ipaddres"/>
</Columns>
<Footerstyle backcolor = "white" forecolor = "#000066"/>
<Pagerstyle backcolor = "white" forecolor = "#000066" horizontalalign = "Left"/>
<Selectedrowstyle backcolor = "#669999" font-bold = "true" forecolor = "white"/>
<Headerstyle backcolor = "#006699" font-bold = "true" forecolor = "white"/>
</ASP: gridview>
</Div>
</Form>
<Body>

3. Compile the prerender event of gridview1

 

Protected void gridviewincluprerender (Object sender, eventargs E)
{
Gridview1.useaccessibleheader = true;
Gridview1.headerrow. tablesection = tablerowsection. tableheader;
}

According to my experiment, this is mainly to convert the gridview into thead and tbody, because "scrollabletable. js" can only be used in this form.

4. Delete this part of the page header

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I am bored. If there is such a part of the statement, it will not achieve the effect. In fact, this part can be completely deleted, but this part is really depressing. I have been looking for a long time to solve this problem, but I don't know why. I hope the experts can solve it! I wonder if it is a bug in scrollabletable. js. I don't know.

 

Advantages: less code, concise, simple structure, and good compatibility. At least I have not found any compatibility problems.

 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More