Sélectionnez la ligne dans GridView avec JavaScript

J'ai quelques problèmes avec GridView dans 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>

Lorsque je clique sur le lien Éditer, il apparaîtra le panneau contextuel d'édition AJAX, mais comment puis-je maintenant, quelle ligne est-ce cliqué? Toute solution? Aidez-moi, s'il vous plaît.

Votre question n'est pas très claire quant à ce que vous voulez dire lorsque vous dites que vous voulez la "ligne", donc, il existe trois façons différentes de faire ce qui suit:

Obtenir l'ID de la rangée
Obtenir l'index de la rangée
Mettez en surbrillance la ligne sur mouseover

Avec les 3 manières ci-dessus, vous devriez pouvoir trouver tout ce que vous essayez de faire.

Voici le code:

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>

Je sais que cette publication est ancienne, mais j'ai une solution beaucoup plus simple. Créez votre contrôle en utilisant:

  <RowStyle CssClass="GridRow" />

Quelque part dans l'asp: les étiquettes GridView.

Ajoutez ensuite ce qui suit dans le script client de la page (j'utilise jQuery)

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

Enfin, dans votre feuille de style, définissez le style souhaité pour GridSelectedRow. Quelque chose comme le code montré ci-dessous. L'étiquette importante est nécessaire pour s'assurer qu'elle remplace le réglage précédent de la couleur d'arrière-plan.

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

Vous pouvez ajouter l' Id tant que paramètre pour passer à la fonction ShowPopUpAdmin pour connaître la ligne en cours de clics. Quelque chose dans le sens de

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