Construire un tableau interactif

Version imprimable

12/04/2022, 12h41
X7_900

2 pièce(s) jointe(s)

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 :
Pièce jointe 617212

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 :
Pièce jointe 617211

Problème : Je ne trouve pas de documentation là-dessus. 8O
(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.
12/04/2022, 15h10
SpaceFrog

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...

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:

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. :D