ASP.NET : Freeze GridView Header using GridViewScroll jQuery plugin
查看效果演示,请点击这里
When you have lots of rows to be displayed in a gridview say for example 500 records, if an user is interested in seeing 400th record, the user has to scroll all the way down through the page, if there is no paging or scrolling functionality. Also when gridview is made scrollable, headers will also scroll along with the other gridview contents making it difficult for the user to understand the data properly. There are many javascript and css solutions to freeze gridview header, but each of them has its own drawback like some solutions are not compatible with all browsers, some does not get aligned properly and some does not support other gridview features such as paging and sorting.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Fixed Header GridView</title>
<link href="Styles/GridviewScroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
gridviewScroll();
});
function gridviewScroll() {
$('#<%=GridView1.ClientID%>').gridviewScroll({
width: 660,
height: 300,
startHorizontal:0,
wheelstep:10,
barhovercolor:"#3399FF",
barcolor: "#3399FF"
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="width:670px;margin-left:auto;margin-right:auto;">
<h2 style="text-align:center;">Freeze/Fixed GridView Header using GridViewScroll jQuery plugin</h2>
<p style="text-align:center;">Demo by Priya Darshini - Tutorial @ <a href="">Programmingfree</a></p>
<asp:GridView ID="GridView1" runat="server" Width="660px"
AutoGenerateColumns="false" AllowPaging="false">
<Columns>
<asp:BoundField DataField="Code" HeaderText="Code" />
<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="150px" ItemStyle-Width="150px" ItemStyle-CssClass="Wrap" />
<asp:BoundField DataField="Continent" HeaderText="Continent" />
<asp:BoundField DataField="Region" HeaderText="Surface Area" />
<asp:BoundField DataField="Population" HeaderText="Population" />
<asp:BoundField DataField="IndepYear" HeaderText="Year of Independence" />
<asp:BoundField DataField="LocalName" HeaderText="Local Name" />
<asp:BoundField DataField="Capital" HeaderText="Capital" />
<asp:BoundField DataField="HeadOfState" HeaderText="Head of State" />
<asp:BoundField DataField="SurfaceArea" HeaderText="Surface Area" />
</Columns>
<HeaderStyle CssClass="GridviewScrollHeader" />
<RowStyle CssClass="GridviewScrollItem" />
<PagerStyle CssClass="GridviewScrollPager" />
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
Do not forget to reference jQuery and jQueryUI library in aspx page. In the above code, after page had loaded we are calling gridviewscroll jquery method with all necessary parameters like width and height of gridview.
4. Write code to load gridview with data in code-behind, I have written code to fetch data from mysql database below,
public partial class GridViewScroll : System.Web.UI.Page
{
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
try
{
//Fetch data from mysql database
MySqlConnection conn = new MySqlConnection("server=localhost;uid=root;password=xxxxx;database=world; pooling=false;");
conn.Open();
string cmd = "select * from country";
MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn);
DataSet ds = new DataSet();
dAdapter.Fill(ds);
dt = ds.Tables[0];
//Bind the fetched data to gridview
GridView1.DataSource = dt;
GridView1.DataBind();
}
catch (MySqlException ex)
{
System.Console.Error.Write(ex.Message);
}
}
}
5. That is all, now build the project. You can see a beautiful gridview with fixed header, horizontal and vertical scroller. Take a look at the live demo here and start using it to create fixed header gridviews.
原文地址:
http://www.programming-free.com/2013/03/freeze-gridview-header-using-jquery.html