Deplacer cellules asp.net

Question

Bonjour,

Je travail sur un projet en ASP .Net 1.1

Je dois créer une page qui contient un tableau (remplie dynamiquement à partir d'une base de données).
Chaque ligne du tableau contient une checkbox cochée ou non ainsi que deux bouton Up et down.

En cliquant sur up la ligne en question doit se déplacer vers le haut et inversement en cliquant sur down.

Je dois utiliser du javascript pour éviter des retours au serveur mais je suis débutant et ne connais rien au javascript, quelqu'un pourrait-il m'aider ?

Merci.

Renaud

ggtry · Answer

Bonjour,

J'ai peut-être un script qui pourrait aider.
Peux-tu montrer le rendu html pour une ou deux lignes de ton tableau ?

GGtry

iceman_688 · Answer

Qu'est-ce que tu entends par "rendu HTML", tu veux le code ? ou une capture d'écran du résultat ?

renaud

ggtry · Answer

En fait, ni le code ni une capture d'écran, mais la source de ta page quand tu la lis dans un navigateur.
Par exemple, dans le menu affichage de Firefox tu "as Code Source de la page", ou dans le menu affichage de IE, tu as "Source".
Dans cette source, tu trouveras à un moment ton tableau en html. Il faudrait au moins l'exemple d'une ligne (en principe ce qu'il y a entre les balises <tr>).
Pour intervenir avec du javascript, il vaut mieux voir comment ta table est rendue en html.

GGtry

iceman_688 · Answer

OK, voici le code IndicatorLayoutPreferences renaud

ggtry · Answer

Bonsoir, J'ai un peu adapté la fonction javascript que j'avais à ton cas. Ceci devrait marcher (en tout cas étant donné l'html envoyé). Sinon, il faudra adapter. Ce n'est peut être pas du très bon javascript, mais bon... Le script est à mettre entre les balises . Dans ton tableau, il faut supprimer la balise et laisser seulement l'image. Il faut ajouter dans la balise de cette image l'événement client onclick="monter(this)" Si tu ajoutes à tes lignes des cellules à la suite des deux premières, il faut modifier t<2 Note bien (je ne sais pas exactement ce que tu veux faire) qu'un postback remettrait à zéro la liste, sans tenir compte des changements d'ordre apportés côté client... A noter évidemment que la fonction ne fait que monter les éléments (et donc descendre celui qui avait la place auparavant). Mais il est vrai que cela est en principe suffisant. Cordialement, GGtry

iceman_688 · Answer

Bonsoir et merci pour ton aide.

J'ai inserer ton code dans ma page. Tout d'abord, je ne peut pas supprimer le href car en fait j'insére un Hyperlink sur lequel je met une image comme ca :

HyperLink hl = new HyperLink();

hl.ImageUrl = "images\fleche_up.gif";

hl.NavigateUrl = "javascript:monter(this);";

Lorque je lance ma page et que je clique sur l'image j'ai une Error on page sur la ligne :
var nu=bt.parentNode.parentNode.getElementsByTagName("input")[0].id
parentNode is null or not an object. Est-ce qu'il me manque une référence ?

renaud

iceman_688 · Answer

C'est bon j'ai adapté mon code. tout marche merci beacoup pour cette aide 

renaud

ggtry · Answer

Bonjour, 

Content que ça marche.
Une dernière précision : dans le script que je t'ai donné sont recherchés tous les input du document, ce qui posera problème si tu ajoutes à ta page des contrôles dont le tag html est input. Dans ce cas, le script ne fonctionnera plus correctement. Comme tu dis ne pas connaître je javascript, autant anticiper...
Le mieux est de donner un id à ta table et de rechercher les input à l'intérieur de la table seulement.
Dans ce cas, il faut remplacer  var ta=document.getElementsByTagName("input") par :
var table=document.getElementById("table1")
var ta=table.getElementsByTagName("input")
où "table1" est l'id donné à ta table.
D'autre part, dans la première boucle for, il ne faut pas écrire var n=1 mais var n=0.
De même, dans le test qui appelle l'alerte lorsque l'élément du haut de la table est cliqué, il faut écrire également : if (n==0)...
De cette façon, il n'y aura pas de problèmes...

Cordialement,

GGtry

iceman_688 · Answer

Bonjour,

Je reviens encors vers toi pour mon tableau dans lequel on dépace les rows.


Dans le Load de la page je récupère en base une liste triée dans un certain ordre. Grace à ton script, je peux ensuite changer cette ordre. Lorsque je valide avec un bouton save (dans l'intention de sauvegarder les changements de positions effectués), un PostBack se produit et réinitialise mon tableau dans l'ordre présent en base, donc modif perdue. 


Si je met if(!IsPostBack) avant de dessiner mon tableau, mon tableau est vide lorsque j'arrive dans ma methode Save. Y a-t-il un moyen de palier ce problème ?
Merci


ren

ggtry · Answer

Bonjour,

Je ne suis pas sûr de bien comprendre ce que tu veux faire. Par exemple, qu'entends-tu par "sauvegarder les changements" ?
Je ne réponds donc que sur un aspect de ta question en supposant ceci : un utilisateur modifie l'ordre de la liste ; il y a postback de la page pour faire une opération (je ne sais pas laquelle) ; tu veux que le changement d'ordre apporté par l'utilisateur persiste.
Premièrement (et dans tous les cas), tu dois d'abord récupérer le nouvel ordre de la liste. Cela nécessite d'abord une opération côté client : une modification côté client ne persiste pas sauf si elle intervient sur un contrôle de type input (checkbox, textbox, etc.).
Tu peux donc lire ta liste et inscrire les valeurs pertinentes, dans le nouvel ordre, dans un hiddenfield, qui est aussi traité comme un input, mais invisible.
Ensuite, soit tu réordonnes tes éléments avec une fonction javascript après le postback, soit tu donnes cet ordre côté serveur, ce qui peut être fait de plusieurs manières. 
L'une d'elle serait de le faire par le biais d'une requête sql, avec une clause order by du type :
Order By Case A when X then 0 when Y then 1 ... end
où A est la colonne de la table de ta base sur laquelle faire le tri
et où X est la première donnée récupérée dans le hiddenfield, Y la seconde, etc.
0, 1 donne l'ordre de tri.
Ce n'est toutefois peut-être pas l'idéal s'il y a d'autres contrôles dans ta table (comme des checkbox) car leur état ne se maintiendra pas.
Le plus simple est donc peut-être de réordonner la liste dans le code, soit côté client soit côté serveur.

GGtry

iceman_688 · Answer

Désolé si je me suis mal exprimé, je reprend.

Une fois que j'ai modifié l'ordre des cellules du tableau il faut que je sauvegarde cet ordre en base en cliquant sur un bouton Save.

Mais lorsque je clique sur le bouton, la page commence par se réinitialisée et donc la modification de l'ordre des cellules est perdue. Je parcours les Rows de mon tableau dans la méthode onClickSave(...) mais elles appaissent dans l'ordre initiale.
Je ne peux pas utiliser de HiddenField car je suis en .NET 1.1

En espérant avoir été plus clair,

ren

ggtry · Answer

Bonjour,

Je ne connais pas du tout le 1.1, et il faut donc prendre ma réponse avec cette réserve.
En fait, ce que je ne comprends pas, c'est comment et pourquoi tu entres ton ordre dans ta base et dans quelle mesure cet ordre entré dans la base entre en ligne de compte pour l'affichage de la liste (je veux dire : veux-tu que le nouvel ordre donné, tant qu'il n'est pas changé de nouveau, s'affiche à chaque fois que tu ouvres ta page ? ou qu'il ne persiste que lors du postback et revienne à l'ordre original dans les autres cas ? La question se pose notamment pour savoir comment donner un ordre à la liste : à partir de la base, ou autrement)
Je vais donc laisser cette question de côté.
Si il n'y a pas d'hiddenfield asp, tu dois sans doute pouvoir utiliser l'hidden input html. Il faut alors lui ajouter runat="server".
Pour le récupérer éventuellement côté serveur, il doit exister un truc du genre : dim ceci as htmlinputhidden = ... avec findcontrol

La fonction javascript suivante permet d'écrire les éléments de ta liste, dans l'ordre modifié, dans un tel htmlinputhidden :

function valider()
    {
    var table=document.getElementById("table1")
    var ta=table.getElementsByTagName("label")
    var tt=document.getElementById("Hidden1")
    tt.value=""
    for (var n=0 ; n<ta.length ; n++)
        {
        if (tt.value!=""){tt.value=tt.value+","}
        tt.value=tt.value+ta[n].innerHTML
        }
    }

où Hidden1 est l'id de l'Hiddeninput.
En principe, il faudrait l'appeler avec le onclientclick sur le bouton qui déclenche le postback. Mais je ne sais pas si en 1.1 onclientclick existe. Dans ce cas, peut-être faut-il passer dans le code par add.attributes avec onclick ???
Sinon, s'il y a un problème, tu peux toujours appeler cette fonction à la fin de la fonction qui te sert à monter les éléments (mais il y aura alors mise à jour de l'hiddeninput à chaque montée d'un élément). Mais dans ce cas, il faut la modifier. Tu peux par exemple remplacer tt.value="" par var t = "", 
puis remplacer  tt.value=tt.value+ta[n].innerHTML par t=t+ta[n].innerHTML
et ajouter juste avant la dernière accolade fermante tt.value=t
A présent que l'HiddenInput est rempli, tu peux le récupérer côté serveur : les données sont séparées par une virgule, utilise split pour faire un tableau de ces données.
C'est donc cet HiddenInput qu'il faut lire pour obtenir l'ordre défini côté client, pas la table.
Pour que la table garde l'ordre défini côté client, il te faut imposer cet ordre par le code. Là, cela dépend de ton projet, comme je le dis au début.

GGtry

iceman_688 · Answer

Bonjour,

Excuse moi de ne pas avoir répondu plus tôt mais je travaillais sur autre chose.

En fait mon problème est le suivant :

J'ai une table dans une base de données contenant des éléments à afficher dans un tableau.Cette table contient une colonne "DataOrder"  qui définie l'ordre dans lequel les données doivent apparraitre à l'écran (et même lors d'une impression). Je fais donc un SELECT ..... ORDER BY DataOrder je récupère une liste d'objets, je crée dynamiquement mon tableau en insérant les éléments de la liste. Grace à ton script je peux déplacer les cellules du tableau pour modifier l'ordre, lors de la sauvegarde je dois répercupter ces changements dans la base de données. L'ID de chaque ROW du tableau contient l'ID de l'objet en BD, je fait donc SELECT ..... WHERE ID=row.ID (aprés un cast évidement mais la je simplifi). Puis je dois faire monObj.DataOrder = nouvel ordre et enfin UPDATE ..... WHERE ID=row.ID et c'est donc précisément ce nouvel ordre que je sais pas comment récupérer car suite au postback le tableau est réinitialisé avec l'ordre définie en base, je perd donc les modifications effectuées.

J'espère avoir été un peu plus claire,

ren

ggtry · Answer

Bonjour, 

D'accord.
Le moyen donné ci-dessus est donc valable : tu dois avant d'envoyer la page inscrire l'ordre dans un hidden input html (avec runat="server" dessus), que tu pourras lire côté serveur. La fonction javascript donnée récupère toutefois les noms affichés dans les label (dans l'exemple que tu donnais, Name, Alias, etc.). Tu devras donc adapter la fonction si tu veux récupérer autre chose : regarde dans le rendu html ce que tu dois récupérer. 

GGtry

Deplacer cellules asp.net

14 réponses

Votre réponse

Discussions similaires