如何点击选中GridView每行单个单元格并在后台获取值？含多供应商场景

嘿，这个需求我之前做过类似的，分前端交互高亮和后台获取选中值两部分就能搞定，给你详细拆解下：

我们可以用jQuery来处理前端的点击交互，保证每行只能选中一个价格单元格，同时添加高亮样式。

1. 先加CSS高亮样式 #

在页面的<style>里定义选中状态的样式：

/* 选中单元格的高亮样式，可根据需求自定义 */
.selected-cell {
    background-color: #ffeb3b;
    font-weight: bold;
    cursor: pointer;
}
/* 价格单元格默认样式，提示可点击 */
.vendor-price {
    cursor: pointer;
    padding: 4px 8px;
}

2. GridView的ASPX配置 #

把GridView的列改成模板列，给价格单元格加统一的类和供应商标识，同时每行加一个隐藏字段存选中信息：

<asp:GridView ID="gvProductPrices" runat="server" AutoGenerateColumns="False" CellPadding="4">
    <Columns>
        <asp:TemplateField HeaderText="Product">
            <ItemTemplate>
                <span class="product-name"><%# Eval("Product") %></span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Vendor1">
            <ItemTemplate>
                <span class="vendor-price" data-vendor="Vendor1"><%# Eval("Vendor1Price") %></span>
                <!-- 每行一个隐藏字段，存选中的产品/供应商/价格 -->
                <asp:HiddenField ID="hdnSelectedItem" runat="server" CssClass="selected-data" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Vendor2">
            <ItemTemplate>
                <span class="vendor-price" data-vendor="Vendor2"><%# Eval("Vendor2Price") %></span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Vendor3">
            <ItemTemplate>
                <span class="vendor-price" data-vendor="Vendor3"><%# Eval("Vendor3Price") %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <HeaderStyle BackColor="#f0f0f0" Font-Bold="True" />
</asp:GridView>

（注：你示例里写了两个Vendor2，我这里修正成Vendor3了，实际用的时候根据你的数据源调整就行）

3. jQuery交互脚本 #

在页面底部加脚本，绑定点击事件，处理单选和选中信息存储：

$(document).ready(function() {
    // 绑定所有价格单元格的点击事件
    $(".vendor-price").on("click", function() {
        var $currentCell = $(this);
        var $currentRow = $currentCell.closest("tr");
        
        // 移除当前行所有价格单元格的选中样式
        $currentRow.find(".vendor-price").removeClass("selected-cell");
        // 给当前点击的单元格添加选中样式
        $currentCell.addClass("selected-cell");
        
        // 获取当前行的产品名、选中的供应商和价格
        var productName = $currentRow.find(".product-name").text().trim();
        var vendor = $currentCell.attr("data-vendor");
        var price = $currentCell.text().trim();
        
        // 把信息存入当前行的隐藏字段，方便后台读取
        $currentRow.find(".selected-data").val(`${productName}|${vendor}|${price}`);
    });
});

如果你的页面用了UpdatePanel，要记得在异步刷新后重新绑定事件，不然点击会失效：

// 处理UpdatePanel刷新后的事件绑定
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    $(".vendor-price").off("click").on("click", function() {
        // 这里复制上面的点击逻辑就行
        var $currentCell = $(this);
        var $currentRow = $currentCell.closest("tr");
        $currentRow.find(".vendor-price").removeClass("selected-cell");
        $currentCell.addClass("selected-cell");
        
        var productName = $currentRow.find(".product-name").text().trim();
        var vendor = $currentCell.attr("data-vendor");
        var price = $currentCell.text().trim();
        $currentRow.find(".selected-data").val(`${productName}|${vendor}|${price}`);
    });
});

后台可以通过遍历GridView的行，读取每行的隐藏字段值，把选中的信息收集起来。

1. 先定义一个实体类存选中信息（可选，但更规范） #

public class SelectedVendorPrice
{
    public string ProductName { get; set; }
    public string Vendor { get; set; }
    public decimal Price { get; set; }
}

2. 按钮点击事件中读取数据 #

比如加一个提交按钮，点击后获取所有选中项：

protected void btnSaveSelections_Click(object sender, EventArgs e)
{
    List<SelectedVendorPrice> selectedList = new List<SelectedVendorPrice>();
    
    foreach (GridViewRow row in gvProductPrices.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {
            HiddenField hdnSelected = (HiddenField)row.FindControl("hdnSelectedItem");
            if (!string.IsNullOrEmpty(hdnSelected.Value))
            {
                // 拆分隐藏字段里的信息
                string[] selectedParts = hdnSelected.Value.Split('|');
                if (selectedParts.Length == 3)
                {
                    // 做个格式验证，避免报错
                    if (decimal.TryParse(selectedParts[2], out decimal price))
                    {
                        selectedList.Add(new SelectedVendorPrice
                        {
                            ProductName = selectedParts[0],
                            Vendor = selectedParts[1],
                            Price = price
                        });
                    }
                }
            }
        }
    }
    
    // 这里就可以对selectedList做业务处理了，比如存数据库、生成报表等
    // 示例：打印选中信息到控制台（实际项目换成你的逻辑）
    foreach (var item in selectedList)
    {
        Console.WriteLine($"产品：{item.ProductName}，供应商：{item.Vendor}，价格：{item.Price}");
    }
}

• 如果不想用隐藏字段，也可以通过Request.Form获取前端提交的选中状态，但隐藏字段的方式更直观可靠
• 可以给默认选中的单元格加selected-cell类，比如页面加载时自动选中价格最低的供应商
• 高亮颜色可以根据你的系统主题调整，保证和整体UI风格统一

内容的提问来源于stack exchange，提问作者Debiprasad