Выберите строку в GridView с помощью JavaScript

Question

У меня есть несколько проблем с GridView в asp.net,

<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 различных способа сделать следующее:

1. Получить идентификатор строки
2. Получить индекс строки
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>