分享GridView 排序上下箭头的实现和鼠标移上行的变色及序号列上带小三角形
2011-09-03 11:01 佳明 阅读(1341) 评论(0) 编辑 收藏 举报效果图：
本文主要介绍双向排序功能和选择行背景颜色
1、排序主要通过 gridview_sorting 自带的排序
要实现加上小三角需在gridview_RowDataBound
if (e.Row.RowType == DataControlRowType.Header)
{
foreach (DataControlField dataControlField in gridview.Columns)
{
if (dataControlField.SortExpression.Equals(this.SortExpression))
{
Label label = new Label();
label.Text = this.SortDire.Equals("ASC") ? "▲" : "▼";
e.Row.Cells[gridview.Columns.IndexOf(dataControlField)].Controls.Add(label);
}
}
}
2、选择行背景色
if (e.Row.RowType == DataControlRowType.DataRow)
{
//鼠标经过时，行背景色变
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA'; document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=\"<div id='trigon' class = 'sanjiao'></div>\"");
//鼠标移出时，行背景色变
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=''");
}
具体实现代码
前台
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebTest.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.GridViewStyle
{
font-size: 12px;
width: 100%;
border-right: 1px solid #CCCDD2;
border-bottom: 1px solid #CCCDD2;
border-left: 1px solid CCCDD2;
border-top: 1 px solid CCCDD2;
padding: 2px;
}
.GridViewStyle a
{
color: #000000;
text-decoration:none;
}
.GridViewHeaderStyle th
{
border-left: 1px solid #CCCDD2;
border-right: 1px solid #CCCDD2;
height: 19px;
}
.GridViewHeaderStyle
{
/* background-color: #F6F6F8;*/
background: url(1.jpg);
}
.GridViewFooterStyle
{
background-color: #5D7B9D;
font-weight: bold;
color: White;
}
.GridViewRowStyle
{
height: 20px; /*background-color: #FFFFFF; */
}
.GridViewAlternatingRowStyle
{
height: 20px; /*background-color: #F7F6F3; */
}
.GridViewRowStyle td, .GridViewAlternatingRowStyle td
{
text-indent: 10px;
color: "#F00";
border: 1px solid #CCCDD2;
}
.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;
}
.xuhao
{
background-color: #EEF3F7;
}
.sanjiao
{
border-top: 4px solid #FFFFFF;
border-left: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
float: left;
margin-left: 4px;
margin-top: 4px;
background-color: #EEF3F7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gridview" CssClass="GridViewStyle" runat="server" AutoGenerateColumns="false"
AllowSorting="true" OnSorting="gridview_Sorting" GridLines="Both" OnRowDataBound="gridview_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="序号">
<ItemTemplate>
<label id="lblIndex" runat="server">
</label>
<%# this.gridview.PageIndex * this.gridview.PageSize + Container.DataItemIndex + 1%>
</ItemTemplate>
<ItemStyle Width="50px" BackColor="#F5F5F7" />
<HeaderStyle Width="50px" Font-Bold="false" />
</asp:TemplateField>
<asp:BoundField HeaderText="用户名" DataField="UserName" SortExpression="UserName">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
<asp:BoundField HeaderText="姓名" DataField="Realname" SortExpression="Realname">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
<asp:BoundField HeaderText="公司" DataField="CompanyName" SortExpression="CompanyName">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
<asp:BoundField HeaderText="部门" DataField="DepartmentName" SortExpression="DepartmentName">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
</Columns>
<EmptyDataTemplate>
</EmptyDataTemplate>
<FooterStyle CssClass="GridViewFooterStyle" />
<RowStyle CssClass="GridViewRowStyle" />
<SelectedRowStyle CssClass="GridViewSelectedRowStyle" />
<PagerStyle CssClass="GridViewPagerStyle" />
<AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
<HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.GridViewStyle
{
font-size: 12px;
width: 100%;
border-right: 1px solid #CCCDD2;
border-bottom: 1px solid #CCCDD2;
border-left: 1px solid CCCDD2;
border-top: 1 px solid CCCDD2;
padding: 2px;
}
.GridViewStyle a
{
color: #000000;
text-decoration:none;
}
.GridViewHeaderStyle th
{
border-left: 1px solid #CCCDD2;
border-right: 1px solid #CCCDD2;
height: 19px;
}
.GridViewHeaderStyle
{
/* background-color: #F6F6F8;*/
background: url(1.jpg);
}
.GridViewFooterStyle
{
background-color: #5D7B9D;
font-weight: bold;
color: White;
}
.GridViewRowStyle
{
height: 20px; /*background-color: #FFFFFF; */
}
.GridViewAlternatingRowStyle
{
height: 20px; /*background-color: #F7F6F3; */
}
.GridViewRowStyle td, .GridViewAlternatingRowStyle td
{
text-indent: 10px;
color: "#F00";
border: 1px solid #CCCDD2;
}
.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;
}
.xuhao
{
background-color: #EEF3F7;
}
.sanjiao
{
border-top: 4px solid #FFFFFF;
border-left: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
float: left;
margin-left: 4px;
margin-top: 4px;
background-color: #EEF3F7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gridview" CssClass="GridViewStyle" runat="server" AutoGenerateColumns="false"
AllowSorting="true" OnSorting="gridview_Sorting" GridLines="Both" OnRowDataBound="gridview_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="序号">
<ItemTemplate>
<label id="lblIndex" runat="server">
</label>
<%# this.gridview.PageIndex * this.gridview.PageSize + Container.DataItemIndex + 1%>
</ItemTemplate>
<ItemStyle Width="50px" BackColor="#F5F5F7" />
<HeaderStyle Width="50px" Font-Bold="false" />
</asp:TemplateField>
<asp:BoundField HeaderText="用户名" DataField="UserName" SortExpression="UserName">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
<asp:BoundField HeaderText="姓名" DataField="Realname" SortExpression="Realname">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
<asp:BoundField HeaderText="公司" DataField="CompanyName" SortExpression="CompanyName">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
<asp:BoundField HeaderText="部门" DataField="DepartmentName" SortExpression="DepartmentName">
<HeaderStyle Font-Bold="false" />
</asp:BoundField>
</Columns>
<EmptyDataTemplate>
</EmptyDataTemplate>
<FooterStyle CssClass="GridViewFooterStyle" />
<RowStyle CssClass="GridViewRowStyle" />
<SelectedRowStyle CssClass="GridViewSelectedRowStyle" />
<PagerStyle CssClass="GridViewPagerStyle" />
<AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
<HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>
</form>
</body>
</html>
后台
View Code
using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest
{
public partial class WebForm1 : System.Web.UI.Page
{
public DataTable DT
{
get { return Session["DT"] as DataTable; }
set { Session["DT"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
SqlConnection sqlConnection = new SqlConnection("Data Source=localhost;Initial Catalog=UserCenterV36;User Id = sa ; Password = sa;");
sqlConnection.Open();
SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("SELECT top 20 * FROM Base_User", sqlConnection);
DT = new DataTable();
sqlDataAdapter.Fill(DT);
sqlConnection.Close();
}
this.gridview.DataSource = DT;
this.gridview.DataBind();
}
//
// 排序功能部分
//
public string SortExpression
{
get
{
if (ViewState["sortExpression"] == null)
{
ViewState["sortExpression"] = "SortCode";
}
return ViewState["sortExpression"].ToString();
}
set
{
ViewState["sortExpression"] = value;
}
}
public string SortDire
{
get
{
if (ViewState["sortDire"] == null)
{
ViewState["sortDire"] = " DESC ";
}
return ViewState["sortDire"].ToString();
}
set
{
ViewState["sortDire"] = value;
}
}
protected void gridview_Sorting(object sender, GridViewSortEventArgs e)
{
if (this.SortDire == "ASC")
{
this.SortDire = "DESC";
}
else
{
this.SortDire = "ASC";
}
this.SortExpression = e.SortExpression;
this.DT.DefaultView.Sort = this.SortExpression + " " + this.SortDire;
this.gridview.EditIndex = -1;
this.gridview.DataSource = this.DT;
this.gridview.DataBind();
}
protected void gridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//鼠标经过时，行背景色变
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA'; document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=\"<div id='trigon' class = 'sanjiao'></div>\"");
//鼠标移出时，行背景色变
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=''");
}
if (e.Row.RowType == DataControlRowType.Header)
{
foreach (DataControlField dataControlField in gridview.Columns)
{
if (dataControlField.SortExpression.Equals(this.SortExpression))
{
Label label = new Label();
label.Text = this.SortDire.Equals("ASC") ? "▲" : "▼";
e.Row.Cells[gridview.Columns.IndexOf(dataControlField)].Controls.Add(label);
}
}
}
}
}
}
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest
{
public partial class WebForm1 : System.Web.UI.Page
{
public DataTable DT
{
get { return Session["DT"] as DataTable; }
set { Session["DT"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
SqlConnection sqlConnection = new SqlConnection("Data Source=localhost;Initial Catalog=UserCenterV36;User Id = sa ; Password = sa;");
sqlConnection.Open();
SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("SELECT top 20 * FROM Base_User", sqlConnection);
DT = new DataTable();
sqlDataAdapter.Fill(DT);
sqlConnection.Close();
}
this.gridview.DataSource = DT;
this.gridview.DataBind();
}
//
// 排序功能部分
//
public string SortExpression
{
get
{
if (ViewState["sortExpression"] == null)
{
ViewState["sortExpression"] = "SortCode";
}
return ViewState["sortExpression"].ToString();
}
set
{
ViewState["sortExpression"] = value;
}
}
public string SortDire
{
get
{
if (ViewState["sortDire"] == null)
{
ViewState["sortDire"] = " DESC ";
}
return ViewState["sortDire"].ToString();
}
set
{
ViewState["sortDire"] = value;
}
}
protected void gridview_Sorting(object sender, GridViewSortEventArgs e)
{
if (this.SortDire == "ASC")
{
this.SortDire = "DESC";
}
else
{
this.SortDire = "ASC";
}
this.SortExpression = e.SortExpression;
this.DT.DefaultView.Sort = this.SortExpression + " " + this.SortDire;
this.gridview.EditIndex = -1;
this.gridview.DataSource = this.DT;
this.gridview.DataBind();
}
protected void gridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//鼠标经过时，行背景色变
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA'; document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=\"<div id='trigon' class = 'sanjiao'></div>\"");
//鼠标移出时，行背景色变
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=''");
}
if (e.Row.RowType == DataControlRowType.Header)
{
foreach (DataControlField dataControlField in gridview.Columns)
{
if (dataControlField.SortExpression.Equals(this.SortExpression))
{
Label label = new Label();
label.Text = this.SortDire.Equals("ASC") ? "▲" : "▼";
e.Row.Cells[gridview.Columns.IndexOf(dataControlField)].Controls.Add(label);
}
}
}
}
}
}
源代码下载
/Files/lmm1508561/源码下载/WebTest.rar
