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弹出面板，但我现在怎样才能点击哪一行？有解决方案吗请帮帮我。

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

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

Answer 3

您可以将Id添加为要传递到ShowPopUpAdmin函数的参数，以了解要点击的行。

的内容

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

使用JavaScript在GridView中选择行

3 个答案: