IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Construire un tableau interactif


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2022
    Messages : 4
    Points : 6
    Points
    6
    Par défaut Construire un tableau interactif
    Bonjour à tous,

    Je ne sais pas si ce que je veux faire s'appelle "tableau interactif" mais je trouve aucune documentation dessus. Alors voilà :

    Pour mon projet personnel, je réalise un petit site (PHP/HTML/JS) avec une base de données MySQL pour gérer des palettes et des commandes (dans un entrepôt).
    La logique est qu'une commande est composé de palettes.

    Afin de rendre la rédaction de commande plus simple j'ai pensé à une idée de tableau interactif :
    Nom : forum1.png
Affichages : 139
Taille : 7,4 Ko

    A gauche, nous avons un tableau qui affiche toutes les palettes contenue dans la base de données, avec un bouton OK.
    Lorsqu'on clique dessus, la palette en question va être déplacée (ou ajoutée) dans le tableau à droite.

    On peut annuler cette sélection en cliquant sur le bouton supprimé. (Ce qui va l'enlever)

    Voilà la base de données de commande :
    Nom : forum2.png
Affichages : 112
Taille : 74,3 Ko

    Problème : Je ne trouve pas de documentation là-dessus.
    (Je suppose que je ne connais juste pas comment ça s'appelle)

    Je voulais savoir si vous pouviez me rediriger vers de bonnes documentations pour que je puisse réaliser mon idée.
    Merci d'avance.

    PS : Désolé pour les fautes d'orthographes.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 659
    Points
    66 659
    Billets dans le blog
    1
    Par défaut
    regarde ça par exemple
    https://www.jqueryscript.net/form/jQ...ldChooser.html

    Après juste avec des boutons c'est plus simple que du drag/drop il suffit de faire un append dans le nouveau conteneur...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2022
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Avril 2022
    Messages : 4
    Points : 6
    Points
    6
    Par défaut
    Merci beaucoup de l'aide !
    J'ai commencé à coder le drag and drop (je pense rester sur cette solution au lieu du bouton).

    Voilà mon code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
            <link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui.css" />
     
            <script src="scripts/jquery-1.10.2.js"></script>
            <script src="scripts/jquery-ui.js"></script>
            <script src="../fieldChooser.js"></script>
     
            <script>
                $(document).ready(function () {
                    var $sourceFields = $("#sourceFields");
                    var $destinationFields = $("#destinationFields");
                    var $chooser = $("#fieldChooser").fieldChooser(sourceFields, destinationFields);
                    $chooser.on("listChanged", function(event, selection, list) {
                        alert("test");
                    });
                });
            </script>
        </head>
        <body>
            <?php
                //Appel au sous programme qui permet d'afficher le menu + connexion à la BDD
                require_once('fonction.php');
                menu();
                //Lien avec les informations du sous programme "fonction"
                $linkpdo = connection();
            ?>
            <?php
                //Lien avec les informations du sous programme "fonction"
                $linkpdo=connection();                   
                //Préparation de la requête
                $req = $linkpdo->prepare("SELECT * FROM palette WHERE prise = 0 ORDER BY num_palette ASC");
                //Exécution de la requête
                $req->execute();
                if($req) {
                    echo "<h2>Cahiers des Charges Renseignée</h2>\n";
                    //Compter le nombre de cahier dans la BDD
                    $nbUtilisateur = $req->rowCount();
                    if($nbUtilisateur > 0) {
                        echo "<div id='fieldChooser' tabIndex='1'>";
                            echo "<div id='sourceFields'>";
                            while($utilisateur = $req->fetch()) {
                                echo "<div>".$utilisateur["num_palette"]."</div>";
                            }
                            echo "</div>";
                            echo "<div id='destinationFields'>";
                            echo "</div>";
                        echo "</div>";
            ?>

    Et depuis je n'arrive pas à comprendre la documentation, notamment au niveau des fonctions du plugins.
    En gros j'aimerais juste récupérer les "num_palette" (qui sont des varchar) qui sont dans la table à droite (selected il me semble).

    En théorie c'est cette fonction var fields = _list.getFields();.

    S'il y a des gens qui savent utiliser la fonction, n'hésitez pas.

Discussions similaires

  1. [Tableaux] Construire un tableau de manière récursive
    Par eclipse012 dans le forum Langage
    Réponses: 26
    Dernier message: 23/01/2007, 15h59
  2. Construire un tableau hexagonale
    Par charly dans le forum Algorithmes et structures de données
    Réponses: 19
    Dernier message: 23/01/2007, 00h33
  3. [XSLT] construire un tableau JavaScript
    Par Mike35 dans le forum XSL/XSLT/XPATH
    Réponses: 1
    Dernier message: 16/10/2006, 14h21
  4. [Tableaux] Construire un tableau compliqué
    Par Bomba dans le forum Langage
    Réponses: 5
    Dernier message: 08/06/2006, 16h38
  5. [HTML] Construire un tableau colonne par colonne ?
    Par Cthulhu 22 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 11/05/2005, 15h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo