protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridViewBind(""); } } private void GridViewBind(string sqlWhere) { int TotalCount; DataTable dt = bll.GetList("stu_score", "code,name,beginTime,endTime,score", "id", this.AspNetPager1.PageSize, this.AspNetPager1.CurrentPageIndex, 1,sqlWhere, out TotalCount); this.AspNetPager1.RecordCount = TotalCount; this.GridView1.DataSource = dt; this.GridView1.DataBind(); this.AspNetPager1.CustomInfoHTML = string.Format("当前第{0}/{1}页 共{2}条记录 每页{3}条", new object[] { this.AspNetPager1.CurrentPageIndex, this.AspNetPager1.PageCount, this.AspNetPager1.RecordCount, this.AspNetPager1.PageSize }); } //GridView高亮行显示 protectedvoid GridView1_RowDataBound1(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor,this.style.backgroundColor='#C7DEF3'"); e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c"); } }
前台代码
<table> <tr> <td> beginTime:<asp:TextBox runat="server"></asp:TextBox> endTime:<asp:TextBox runat="server"></asp:TextBox> </td> <td> <asp:Button runat="server" Text="Search"></asp:Button> <asp:Button runat="server" Text="Create" OnClientClick="javascript:return false;" /> </td> </tr> <tr> <td colspan="2"> <asp:GridView runat="server" CellPadding="2" CssClass="GridViewStyle" CellSpacing="2" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="name" HeaderText="name" /> <asp:BoundField DataField="code" HeaderText="code" /> <asp:BoundField DataField="beginTime" HeaderText="beginTime" /> <asp:BoundField DataField="endTime" HeaderText="endTime" /> <asp:BoundField DataField="score" HeaderText="score" /> </Columns> <FooterStyle CssClass="GridViewFooterStyle" /> <RowStyle CssClass="GridViewRowStyle" /> <SelectedRowStyle CssClass="GridViewSelectedRowStyle" /> <PagerStyle CssClass="GridViewPagerStyle" /> <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" /> <HeaderStyle CssClass="GridViewHeaderStyle" /> </asp:GridView> </td> </tr> <tr> <td colspan="2"> <webdiyer:AspNetPager runat="server" CssClass="paginator" CurrentPageButtonClass="cpb" OnPageChanged="AspNetPager1_PageChanged" PageSize="5" FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" CustomInfoHTML="共%RecordCount%条，第%CurrentPageIndex%页 /共%PageCount% 页" CustomInfoSectionWidth="30%" ShowCustomInfoSection="Right"> </webdiyer:AspNetPager> </td> </tr> </table>
4 、当然你可以对你的gridview进行样式调整，新建gridviewSY.css
.GridViewStyle { border-right: 2px solid #A7A6AA; border-bottom: 2px solid #A7A6AA; border-left: 2px solid white; border-top: 2px solid white; padding: 4px; } .GridViewStyle a { color: #FFFFFF; } .GridViewHeaderStyle th { border-left: 1px solid #EBE9ED; border-right: 1px solid #EBE9ED; } .GridViewHeaderStyle { background-color: #5D7B9D; font-weight: bold; color: White; } .GridViewFooterStyle { background-color: #5D7B9D; font-weight: bold; color: White; } .GridViewRowStyle { background-color: #F7F6F3; color: #333333; } .GridViewAlternatingRowStyle { background-color: #FFFFFF; color: #284775; } .GridViewRowStyle td, .GridViewAlternatingRowStyle td { border: 1px solid #EBE9ED; } .GridViewSelectedRowStyle { background-color: #E2DED6; font-weight: bold; color: #333333; } .GridViewPagerStyle { background-color: #284775; color: #FFFFFF; } .GridViewPagerStyle table /* to center the paging links*/ { margin: 0 auto 0 auto; 分页控件也添加样式，当然gridview样式和分页样式在同一个css中了 .paginator { font: 11px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;} .paginator a {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin-right:2px} .paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;} .paginator .cpb {padding: 1px 6px;font-weight: bold; font-size: 13px;border:none} .paginator a:hover {color: #fff; background: #ffa501;border- color:#ffa501;text-decoration: none;}
页面最总结果显示样式，
接下来我们给时间添加样式,给时间添加样式普遍选择的是datePicker插件，导入控件所用的js和css