简介：为了程序的专业性和用户的体验性。我觉得像这样的GridView不仅漂亮而且也 { 节省了宝贵的页面空间(
Dflying Chen 说的 ) } 。。
以下我直接贴出代码，因为你对 GridView 事件 和 JS 比较熟悉的话，，就当复习吧， 如果不熟悉，在这里我们也不深度讨论了，，直接COPU好了。
不过要用我还是用AjaxControlToolkit 的 Hover Menu控件。
1.HTML 部分：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="CreateAjax.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>Untitled Page</title>
<script type="text/javascript">
function ShowPopup(lbtn1,lbtn2, panel, gridviewRow) {
var link1 = document.getElementById(lbtn1);
var link2 = document.getElementById(lbtn2);
var pnl = document.getElementById(panel);
var row= document.getElementById(gridviewRow);
pnl.style.display = "block";
row.style.backgroundImage = "url(../images/header-opened.png)";
if(link1 != null)
link1.style.display = "block";
if(link2 != null)
link2.style.display = "block";
pnl.style.backgroundImage = "url(../images/header-opened.png)";
}
//隐藏 DIV popup
function HidePopup(lbtn1,lbtn2, panel, gridviewRow) {
var link1 = document.getElementById(lbtn1);
var link2 = document.getElementById(lbtn2);
var pnl = document.getElementById(panel);
var row= document.getElementById(gridviewRow);
row.style.backgroundImage="url(../images/spacer.gif)";
pnl.style.display = "none";
if(link1 != null)
link1.style.display = "none";
if(link2 != null)
link2.style.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView
ID="gvCategories"
PageSize="5"
runat="server"
DataKeyNames="CategoryID"
AutoGenerateColumns="false"
OnRowDataBound="GvCustomers_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="CategoryID">
<ItemTemplate>
<%# Eval("CategoryID") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CategoryName">
<ItemTemplate>
<%# Eval("CategoryName") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<%# Eval("Description") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Hove Menu 对象单元格">
<ItemTemplate>
<asp:Label runat="server" ID="lblStatus" Text='<%# Eval("CategoryID") %>' />
<div id="gridPopup" style="display: none; z-index: 101; position: absolute; height: 38px"
runat="server">
<asp:LinkButton ID="lbtngrdEdit" Text="编辑" runat="server" CausesValidation="false" />
<asp:LinkButton ID="lbtngrdDelete" Text="删除" runat="server" CausesValidation="false" />
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
2. 后台编码部分：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Collections.Generic;
namespace CreateAjax {
public partial class WebForm1 : System.Web.UI.Page {
protected void Page_Load ( object sender, EventArgs e ) {
if ( !Page.IsPostBack ) {
BindData ();
}
}
private void BindData () {
string connectionString = "Data Source=.;Initial Catalog=Northwind;Persist Security Info=True;User ID=sa;Password=windows";
SqlConnection conn = new SqlConnection ( connectionString );
SqlDataAdapter ad = new SqlDataAdapter ( "SELECT * FROM Categories", conn );
DataSet ds = new DataSet ();
ad.Fill ( ds );
gvCategories.DataSource = ds;
gvCategories.DataBind ();
}
protected void GvCustomers_RowDataBound ( object sender, GridViewRowEventArgs e ) {
if ( e.Row.RowType == DataControlRowType.DataRow ) {
LinkButton lbtngrdEdit = ( LinkButton )e.Row.Cells[ 3 ].FindControl (
"lbtngrdEdit" );
LinkButton lbtnGrdDelete = ( LinkButton )e.Row.Cells[ 3 ].FindControl (
"lbtnGrdDelete" );
HtmlGenericControl panel =
( HtmlGenericControl )e.Row.Cells[ 3 ].FindControl (
"gridPopup" );
string showPopup = "ShowPopup('" + lbtngrdEdit.ClientID +
"','" + lbtnGrdDelete.ClientID + "','" +
panel.ClientID + "','" + e.Row.ClientID + "')";
string hidePopup = "HidePopup('" + lbtngrdEdit.ClientID +
"','" + lbtnGrdDelete.ClientID
+ "','" + panel.ClientID + "','" +
e.Row.ClientID + "')";
e.Row.Attributes.Add ( "onmouseover",
"javascript:" + showPopup );
e.Row.Attributes.Add ( "onmouseout",
"javascript:" + hidePopup );
}
}
}
}
。。
3.编译通过，运行程序看看：
。。样式没搞好，
。。