使用JavaScript在GridView中选择行

Question

我在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弹出面板，但是如何知道点击了哪一行？有解决方法吗？请帮帮我。

- jokidz90

Answer 1

您的问题并不太清楚，当您说想要“行”时，意思是什么，因此以下是3种不同的方法来完成以下操作：

1. 获取行的ID
2. 获取行的索引
3. 在鼠标悬停时突出显示该行

通过上述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>

- NakedBrunch

Answer 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;
}

- DDRider62

Answer 3

您可以将Id作为参数添加到传递给ShowPopUpAdmin函数中，以了解点击的是哪一行。类似于以下内容：

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

- Roman