Div overflow, ASP.NET GridView, JQuery and anchor
I'm not a pro in web UI, so I will try to explain myself clearly. I have a tag with overflow: auto;. Inside that div, I have a GridView. There's a JQuery function that select the line clicked in the grid, only by changing the CSS class (to change the backgroud_color). I would like to know if I can put a kind of anchor so that the grid return to the selected row when the user make a postback (with a "Refresh" button).
Here is som code sample to show you the idea. The grid :
<div id="divGrilleConsole" class="pnlGrilleConsole">
<asp:GridView id="dbgListeOperations" runat="server" CssClass="texte-normal" Width="930px" AutoGenerateColumns="False" ShowHeader="False" >
<HeaderStyle Font-Size="11px" Font-Names="Verdana" Font-Bold="True" BackColor="#E8EDF5"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="NO_S开发者_JAVA技巧EQ_ACT_DEPLO" HeaderText="No Séq.">
<HeaderStyle Width="35px"></HeaderStyle>
</asp:BoundColumn>
<asp:TemplateColumn>
<HeaderStyle Width="10px"></HeaderStyle>
<ItemTemplate>
<asp:HiddenField ID="hdfNoAction" runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="NOM_PROJ_DEPLO" HeaderText="Projet">
<HeaderStyle Width="295px"></HeaderStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="NOM_SERVE_PHYSIQUE" HeaderText="Serveur physique">
<HeaderStyle Width="275px"></HeaderStyle>
</asp:BoundColumn>
</Columns>
</asp:GridView>
</div>
Partial JQuery script :
$(document).ready(function() {
var gv = $("#<%= dbgListeOperations.ClientId %>");
var rows = gv.find('tbody > tr');
//Boucle dans toutes les lignes de la grille maitre
rows.each(function() {
//add handler for click event on each row
$(this).click(function() {
$(this).toggleClass("GrilleDonneesTriee_Select");
//Rest of logic here...
.
.
.
});
});
Do you think that it is possible to position the div to the selected line when a postback occur ? How would I do that ? With anchors I guess, but I don't realy understand how those works.
Just in case some people run into this post looking for a solution, I finally used a JQuery plugin. http://plugins.jquery.com/project/ScrollTo Works fine and easy to use.
精彩评论