使用 JavaScript 在 GridView 中选择行答案

【问题标题】：Select row in GridView with JavaScript使用 JavaScript 在 GridView 中选择行
【发布时间】：2011-04-09 14:32:47
【问题描述】：

我在 asp.net 中的 GridView 有一些问题，

<asp:GridView 
    ID="gridAdministrator" 
    runat="server" 
    AllowSorting="true" 
    AutoGenerateColumns="false" 
    AllowPaging="true" 
    OnRowDeleting="gridAdministrator_RowDeleting" >
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="ID" ReadOnly="true" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Phone" HeaderText="Phone" />
        <asp:BoundField DataField="Address" HeaderText="Address" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Mail" HeaderText="Mail" />
        <asp:BoundField DataField="Password" HeaderText="Password" />
        <asp:TemplateField>
            <ItemTemplate>
                <a href="#" onclick="ShowPopUpAdmin();">Edit</a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="true" />
    </Columns>
</asp:GridView>

当我点击编辑链接时，它会显示编辑 AJAX 弹出面板，但我现在如何才能点击哪一行？有什么解决办法吗？请帮帮我。

【问题讨论】：

标签： c# javascript .net asp.net gridview

【解决方案1】：

当你说你想要“行”时，你的问题不是很清楚你的意思，所以，这里有 3 种不同的方法来执行以下操作：

获取行的ID
获取行的索引
鼠标悬停时突出显示该行

通过以上 3 种方法，您应该能够弄清楚您正在尝试做的任何事情。

代码如下：

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {       
            $(".tbl tr:has(td)").css({ background: "ffffff" }).hover(
                function() { $(this).css({ background: "#C1DAD7" }); },
                function() { $(this).css({ background: "#ffffff" }); }
                );
        });
</script>

HTML/ASPX

<asp:GridView 
    ID="gridAdministrator" 
    CssClass="tbl"
    runat="server" 
    AllowSorting="true" 
    AutoGenerateColumns="false" 
    AllowPaging="true" 
    OnRowDeleting="gridAdministrator_RowDeleting" >
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="ID" ReadOnly="true" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Phone" HeaderText="Phone" />
        <asp:BoundField DataField="Address" HeaderText="Address" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Mail" HeaderText="Mail" />
        <asp:BoundField DataField="Password" HeaderText="Password" />
        <asp:TemplateField>
            <ItemTemplate>
                <a href="#" onclick="ShowPopUpAdmin();">Edit</a>
                <a href="#" onclick="alert('<%# Eval("ID") %>');">Click to show ID</a><br />
                <a href="#" onclick="alert('<%# Container.DataItemIndex %>');">Click to show Row Index</a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="true" />
    </Columns>
</asp:GridView>

【讨论】：

【解决方案2】：

我知道这篇文章很旧，但我有一个更简单的解决方案。使用以下方法创建您的控件：

   <RowStyle CssClass="GridRow" />

在 asp:GridView 标签内的某处。

然后在页面客户端脚本中添加以下内容（我用的是jQuery）

$(document).ready(function () {
    $('.GridRow').click(ChangeSelectedRow);
});

function ChangeSelectedRow(evt) {
           $('.GridRow').removeClass('GridSelectedRow');
           $(this).addClass('GridSelectedRow');
 }

最后，在您的样式表中为 GridSelectedRow 定义您想要的样式。类似于下面显示的代码。需要 !important 标记来确保它覆盖之前的背景颜色设置。

.GridSelectedRow
{
    background-color: #E0F76F !important;
}

【讨论】：

【解决方案3】：

您可以将Id 作为参数添加到ShowPopUpAdmin 函数中，以了解正在单击哪一行。类似于

<asp:TemplateField>
    <ItemTemplate>
        <a href="#" onclick='ShowPopUpAdmin(Eval("Id"));'>Edit</a>
    </ItemTemplate>
</asp:TemplateField>

【讨论】：