Scroll dans un div

Scroll dans un div - HTML/CSS - Programmation

Marsh Posté le 05-10-2017 à 13:42:36    

Bonjour,
J'ai fait cette fonction:  
- input : DataTable  
- output :code HTML.  
 
Sur un clique de cette grille on mémorise le click coté serveur. Au rafraîchissement de la page, la ligne sélectionnée s'affiche en bleu. Cela fonctionne.  
J'aimerai maintenant jouer avec les scrollbar, actuellement il s'affiche, mais au rafraîchissement de la page il remonte tout en haut, ceci ne me convient pas. J'aimerai que le scroll soit automatique sur la valeur sélectionnée (on est sur la ligne sélectionné si dans la boucle isSelected est à 1).
Pouvez-vous me donner un coup de main ?
Merci.
 

Code :
  1. Public Shared Function printTableFromDataTable(ByVal sguid As String, ByVal username As String, ByVal oDT As DataTable, ByVal colNameIndex As String, ByVal dataSelection As String, OperationName As OperationName, ByVal redirect As String, ByVal scrollEnable As Boolean) As String
  2.             If Not IsNothing(oDT) Then
  5.                 Dim table As New StringBuilder
  6.                 Dim color As String = "#FFFFFF"
  7.                 Dim style As String = ""
  8.                 Dim isSelected As Boolean = False
  9.                 table.AppendLine("<div style=""overflow: scroll; height: inherit; width: inherit"">" )
  10.                 ' table.AppendLine("<div>" )
  11.                 table.AppendLine("<table>" )
  12.                 table.AppendLine("<tr>" )
  13.                 table.AppendLine("<th style=""border-top:solid 1px;border-left:solid 1px;border-right:solid 1px;border-bottom:solid 1px;padding: 2px;background:#e0e0eb"">&nbsp;&nbsp;&nbsp;</th>" )
  14.                 For i = 0 To oDT.Columns.Count - 1
  15.                     If Not oDT.Columns(i).ColumnName.StartsWith("hide" ) And Not oDT.Columns(i).ColumnName.StartsWith("color" ) Then
  16.                         table.AppendLine("<th style=""border-top:solid 1px;border-left:solid 1px;border-right:solid 1px;border-bottom:solid 1px;padding: 2px;background:#e0e0eb"">&nbsp;" & oDT.Columns(i).ColumnName & "</th>" )
  17.                     End If
  18.                 Next
  19.                 table.AppendLine("</tr>" )
  21.                 Dim row As DataRow
  22.                 For Each row In oDT.Rows
  24.                     isSelected = If(dataSelection = row(colNameIndex), True, False)
  26.                     Dim hrefSelectParameter As String = "href=""OperationSU.ashx?" & "&guid=" & sguid &
  27.                                                 "&indexOperationValue=" & addOperationValue(sguid, username, OperationName, row.Item(colNameIndex)).ToString() &
  28.                                                 "&redir=" & redirect & """"
  30.                     If row.Table.Columns.Contains("color" ) Then
  31.                         table.AppendLine("<tr style=""background:" & row("color" ) & ";"">" )
  32.                     Else
  33.                         If isSelected Then
  34.                             table.AppendLine("<tr style=""background:#99ccff;"">" )
  35.                         Else
  36.                             table.AppendLine("<tr>" )
  37.                         End If
  38.                     End If
  40.                     If isSelected Then
  41.                         style = "height:25px;border-top:solid 1px;border-left:solid 0px;border-right:solid 1px;border-bottom:solid 1px;padding: 3px"
  42.                         table.AppendLine("<td align=""right"" style=""background:#2E2EFE;border-top:solid 1px;border-left:solid 1px;border-right:solid 1px;border-bottom:solid 1px;padding: 2px""><a " & hrefSelectParameter & " ><font size=""2"" color=""black""></font></a></td>" )
  43.                     Else
  44.                         style = "height:25px;border-top:solid 1px;border-left:solid 0px;border-right:solid 1px;border-bottom:solid 1px;padding: 3px"
  45.                         table.AppendLine("<td align=""right"" style=""background:#A4A4A4;border-top:solid 1px;border-left:solid 1px;border-right:solid 1px;border-bottom:solid 1px;padding: 2px""><a " & hrefSelectParameter & " ><font size=""2"" color=""black""></font></a></td>" )
  46.                     End If
  48.                     For j = 0 To oDT.Columns.Count - 1
  49.                         If Not oDT.Columns(j).ColumnName.StartsWith("hide" ) And Not oDT.Columns(j).ColumnName.StartsWith("color" ) Then
  50.                             If IsNumeric(row(j)) Then
  51.                                 table.AppendLine("<td align=""right"" style=""" & style & """><a " & hrefSelectParameter & " ><font size=""2"" color=""black"">" & If(isSelected, "<b>", "" ) & row(j) & If(isSelected, "</b>", "" ) & "</font></a></td>" )
  52.                             Else
  53.                                 table.AppendLine("<td align=""left"" style=""" & style & """><a " & hrefSelectParameter & " ><font size=""2"" color=""black"">" & If(isSelected, "<b>", "" ) & row(j) & If(isSelected, "</b>", "" ) & "</font></a></td>" )
  54.                             End If
  56.                         End If
  57.                     Next
  58.                     table.AppendLine("</tr>" )
  59.                 Next
  61.                 table.AppendLine("</table>" )
  62.                 table.AppendLine("</div>" )
  64.                 Return table.ToString
  65.             Else
  66.                 Return Nothing
  67.             End If
  69.         End Function

Reply

Marsh Posté le 05-10-2017 à 13:42:36   

Reply

Marsh Posté le 10-10-2017 à 07:02:31    

Hello, pas de réponse car la question n'est pas claire ? ou parce qu'il n'y a pas de solution ?

Reply

Marsh Posté le 10-10-2017 à 17:55:20    

Ce n'est pas clair.
Je n'ai aucune idée si ta scrollbar appartient au tableau ou à la page.
Et puis, le code est illisible et ne sert à rien en l'état.
En outre, je ne comprends pas ce que tu fais

Citation :


Sur un clique de cette grille on mémorise le click coté serveur. Au rafraîchissement de la page, la ligne sélectionnée s'affiche en bleu


Pourquoi vouloir rafraichir la page pour mettre une ligne en bleu ?

 

Si par contre, tu veux lors de la visite suivante scroller la page jusqu'à la ligne, tu le fais en javascript.
https://developer.mozilla.org/fr/do [...] w/scrollTo

 

Et si tu ne connais pas très bien le HTML, CSS tu peux employer des kits d'interface. (désolé mais le code de ton tableau n'est vraiment pas bon)
https://purecss.io/tables/ par exemple


Message édité par David Boring le 10-10-2017 à 17:55:56
Reply

Marsh Posté le 11-10-2017 à 06:48:21    

Merci d'avoir pris du temps pour répondre et essayer de comprendre le bordel.
Je rafraîchi la page car je ne sais pas comment mettre en bleu la ligne sélectionner + sauver la valeur coté serveur sans faire de rafraîchissement.
Je truc c'est que les pages contiennent plusieurs grilles, donc il faut faire un scroll-to sur chaque DIV de la page. C'est pour cela que j'aimerai que ce code de scroll-to soit codé dans cette fonction qui génère le code de la table.
 
Est-il possible de mettre une balise sur la ligne sélectionner et de scroller automatiquement sur cette balise ?

Reply

Marsh Posté le 11-10-2017 à 15:02:41    

Tu dois faire de l'ajax
https://developer.mozilla.org/fr/docs/AJAX/Premiers_pas
 
Tu envoies ton code au serveur, et en même temps tu donnes une classe à ta ligne pour la rendre bleu, pas besoin du serveur pour faire cela.
Tu fais cela en javascript, avec un event listener.
 
Et si tu as plusieurs table avec une ligne sélectionné, et bien tu scrolles seulement à la première occurence de ta classe

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed