ASP.NET GridView 列選中高亮、滑鼠懸停變色與點擊事件完整實作

前端 .aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewSelectDemo.aspx.cs" Inherits="Demo.GridViewSelectDemo" %>
<!DOCTYPE html>
<html><head><title>GridView 列選中互動</title>
<style>
    .gv { border-collapse: collapse; width: 100%; font-family: 'Microsoft JhengHei', sans-serif; }
    .gv th { background: #007bff; color: white; padding: 10px; text-align: left; cursor: pointer; }
    .gv td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
    .gv tbody tr { cursor: pointer; transition: background 0.2s; }
    .gv tbody tr:hover { background: #e3f2fd !important; } /* 懸停最高優先級 */
    .gv tbody tr.selected { background: #cce5ff !important; font-weight: bold; } /* 選中狀態 */
    .hidden-col { display: none; } /* 隱藏主鍵欄 */
</style></head><body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <h2>員工資料列表 (點選列查看明細)</h2>
    
    <!-- 隱藏欄位：儲存目前選中的 EmployeeID -->
    <asp:HiddenField ID="hfSelectedId" runat="server" OnValueChanged="hfSelectedId_ValueChanged" />

    <asp:UpdatePanel ID="upGrid" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:GridView ID="gvEmployees" runat="server" 
                AutoGenerateColumns="False" 
                DataKeyNames="EmployeeID" 
                CssClass="gv"
                OnRowDataBound="gvEmployees_RowDataBound"
                AllowPaging="True" PageSize="10"
                OnPageIndexChanging="gvEmployees_PageIndexChanging"
                AllowSorting="True"
                OnSorting="gvEmployees_Sorting">
                
                <Columns>
                    <asp:BoundField DataField="EmployeeID" HeaderText="編號" ItemStyle-CssClass="hidden-col" HeaderStyle-CssClass="hidden-col" />
                    <asp:BoundField DataField="LastName" HeaderText="姓氏" />
                    <asp:BoundField DataField="FirstName" HeaderText="名字" />
                    <asp:BoundField DataField="Title" HeaderText="職稱" />
                    <asp:BoundField DataField="HireDate" HeaderText="到職日" DataFormatString="{0:yyyy/MM/dd}" HtmlEncode="False" />
                    <asp:BoundField DataField="City" HeaderText="城市" />
                </Columns>
                
                <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
                <PagerStyle CssClass="pagination" HorizontalAlign="Center" />
            </asp:GridView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="gvEmployees" EventName="PageIndexChanging" />
            <asp:AsyncPostBackTrigger ControlID="gvEmployees" EventName="Sorting" />
        </Triggers>
    </asp:UpdatePanel>

    <div style="margin-top:20px; padding:15px; background:#f8f9fa; border:1px solid #dee2e6;">
        <h4>選中員工明細</h4>
        <asp:DetailsView ID="dvDetail" runat="server" AutoGenerateRows="True" CssClass="table table-bordered" />
    </div>
</form>

<script>
    (function () {
        var gv = document.getElementById('<%= gvEmployees.ClientID %>');
        var hf = document.getElementById('<%= hfSelectedId.ClientID %>');
        var lastTr = null;

        if (!gv) return;

        // 事件委派：針對 tbody tr
        gv.querySelector('tbody').addEventListener('click', function (e) {
            var tr = e.target.closest('tr');
            if (!tr || tr === gv.querySelector('thead tr')) return;

            // 取得 DataKey (EmployeeID) - 從隱藏欄位或 data 屬性
            var key = tr.cells[0].innerText.trim(); // 第 0 欄為 EmployeeID (隱藏但存在 DOM)
            // 或使用 data-key: tr.dataset.key (見 RowDataBound 註冊)

            // 切換 selected class
            if (lastTr) lastTr.classList.remove('selected');
            tr.classList.add('selected');
            lastTr = tr;

            // 更新隱藏欄位並觸發伺服器端 ValueChanged
            if (hf.value !== key) {
                hf.value = key;
                // 手動觸發 change 事件 (ASP.NET HiddenField 需此才引發 OnValueChanged)
                if ('onpropertychange' in hf) hf.fireEvent('onpropertychange'); // IE
                else {
                    var evt = document.createEvent('HTMLEvents');
                    evt.initEvent('change', true, false);
                    hf.dispatchEvent(evt);
                }
            }
        });

        // 分頁/排序後重新套用選中狀態 (UpdatePanel 非同步更新後)
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            gv = document.getElementById('<%= gvEmployees.ClientID %>'); // 重新取得
            if (gv && hf.value) {
                var rows = gv.querySelectorAll('tbody tr');
                rows.forEach(function (tr) {
                    if (tr.cells[0].innerText.trim() === hf.value) {
                        tr.classList.add('selected');
                        lastTr = tr;
                    }
                });
            }
        });
    })();
</script>

後端 .aspx.cs

using System;
using System.Data;
using System.Web.UI.WebControls;

namespace Demo
{
    public partial class GridViewSelectDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGrid();
            }
        }

        private void BindGrid()
        {
            // 模擬資料來源 (實務從 DB / EF / Service 取得)
            DataTable dt = GetEmployeeData();
            gvEmployees.DataSource = dt;
            gvEmployees.DataBind();
        }

        // 核心：RowDataBound 註冊 data-key 與滑鼠樣式
        protected void gvEmployees_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                // 1. 取得主鍵 (DataKeyNames 設定的欄位)
                string empId = gvEmployees.DataKeys[e.Row.RowIndex].Value.ToString();

                // 2. 註冊 data-key 供 JS 讀取 (比解析 innerText 更可靠)
                e.Row.Attributes["data-key"] = empId;

                // 3. 滑鼠懸停樣式 (CSS :hover 已處理，此處可加強制游標)
                e.Row.Style["cursor"] = "pointer";

                // 4. 若為目前選中列，加上 selected class (配合 endRequest 重新套用)
                if (hfSelectedId.Value == empId)
                {
                    e.Row.CssClass = "selected";
                }
            }
        }

        // 隱藏欄位值改變 → 觸發明細查詢
        protected void hfSelectedId_ValueChanged(object sender, EventArgs e)
        {
            if (int.TryParse(hfSelectedId.Value, out int empId))
            {
                LoadDetail(empId);
            }
        }

        private void LoadDetail(int empId)
        {
            DataTable dt = GetEmployeeDetail(empId); // 查詢單筆明細
            dvDetail.DataSource = dt;
            dvDetail.DataBind();
        }

        // 分頁
        protected void gvEmployees_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            gvEmployees.PageIndex = e.NewPageIndex;
            BindGrid();
        }

        // 排序
        protected void gvEmployees_Sorting(object sender, GridViewSortEventArgs e)
        {
            // 簡易排序實作 (實務建議在資料層排序)
            DataTable dt = GetEmployeeData();
            dt.DefaultView.Sort = e.SortExpression + (e.SortDirection == SortDirection.Ascending ? " ASC" : " DESC");
            gvEmployees.DataSource = dt;
            gvEmployees.DataBind();
        }

        // --- 模擬資料存取 ---
        private DataTable GetEmployeeData()
        {
            var dt = new DataTable();
            dt.Columns.Add("EmployeeID", typeof(int));
            dt.Columns.Add("LastName", typeof(string));
            dt.Columns.Add("FirstName", typeof(string));
            dt.Columns.Add("Title", typeof(string));
            dt.Columns.Add("HireDate", typeof(DateTime));
            dt.Columns.Add("City", typeof(string));

            dt.Rows.Add(1, "Davolio", "Nancy", "Sales Representative", new DateTime(1992, 5, 1), "Seattle");
            dt.Rows.Add(2, "Fuller", "Andrew", "Vice President, Sales", new DateTime(1993, 8, 14), "Tacoma");
            dt.Rows.Add(3, "Leverling", "Janet", "Sales Representative", new DateTime(1993, 4, 1), "Kirkland");
            dt.Rows.Add(4, "Peacock", "Margaret", "Sales Representative", new DateTime(1993, 5, 3), "Redmond");
            dt.Rows.Add(5, "Buchanan", "Steven", "Sales Manager", new DateTime(1993, 10, 17), "London");
            dt.Rows.Add(6, "Suyama", "Michael", "Sales Representative", new DateTime(1993, 10, 17), "London");
            dt.Rows.Add(7, "King", "Robert", "Sales Representative", new DateTime(1994, 1, 2), "London");
            dt.Rows.Add(8, "Callahan", "Laura", "Inside Sales Coordinator", new DateTime(1994, 3, 5), "Seattle");
            dt.Rows.Add(9, "Dodsworth", "Anne", "Sales Representative", new DateTime(1994, 11, 15), "London");
            return dt;
        }

        private DataTable GetEmployeeDetail(int empId)
        {
            var dt = new DataTable();
            dt.Columns.Add("Field");
            dt.Columns.Add("Value");

            // 實務查詢 DB
            var row = GetEmployeeData().Select($"EmployeeID = {empId}")[0];
            foreach (DataColumn col in row.Table.Columns)
            {
                dt.Rows.Add(col.ColumnName, row[col]);
            }
            return dt;
        }
    }
}

關鍵技術點解析