WEB-d Développement Web

PHP, SQL, HTML5, CSS3, Javascript, Mootools, Référencement, SEO, CMS, e-commerce, Apache, Linux, Ubuntu, ...

Créer une datagrid avec Mootools

Mootools permet de créer simplement et sans module supplémentaire une datagrid, autrement dit un tableau dans lequel l'utilisateur peut directement modifier les données (un peu comme une feuille de calcul excel).

Mootools Datagrid

L'idée consiste à ne pas afficher les données dans un tableau (table), mais bien dans des formulaires (un formulaire par ligne):


<form action="" method="post">
    <input type="hidden" name="id" value="123" />
    <input type="text" name="name" value="test equipment"/>
    <input type="text" name="manufacturer" value="R&S"/>
    <input type="checkbox" name="visible" value="1" title="Visible"/>
    <select name="lab" title="Lab">
        <option>OMRA</option>
        <option>TELE</option>
    </select>
</ form>

<form action="" method="post">
    <input type="hidden" name="id" value="124" />
    <input type="text" name="name" value="another equipment"/>
    <input type="text" name="manufacturer" />
    <input type="checkbox" name="visible" value="1" checked="checked"/>
    <select name="lab">
        <option>OMRA</option>
        <option>TELE</option>
    </select>
</ form>
 

Pour que cela ressemble plus à un tableau, on peut naturellement utiliser CSS :


form {
    font-size: 75%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #CCC;
}

form:hover {
    background-color: #EEE;
}

input {
    border: none;
    padding: 1px;
    margin: 0;
    background: transparent;
}

select {
    border: none;
    padding: 1px;
    margin: 0;
    background: transparent;
}
 

Il suffit ensuite d'utiliser Mootools pour envoyer le formulaire au serveur en utilisant une requête Ajax lors de chaque modification :


window.addEvent('domready', function() {
    $$('form').each(function(form) {
        form.addEvent('change', function() {
            $('feedback').innerHTML = 'Saving...';

            new Request.HTML({
                onSuccess: function(response){
                },
                update: 'feedback'
            }).post(this);
        }.bind(form));
    });

    // Pour que le contenu de la "cellule" soit sélectionné
    // dès que l'utilisateur clique dessus...
    $$('input').each(function(input) {
        input.addEvent('click', function() {
            this.select();
        }.bind(input));
    });
});
 

Sur le serveur, il faudra donc sauver le contenu du formulaire :


<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
    $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
   
    echo "OK";
    var_dump($_POST);
    exit();
}
?>
 

Articles similaires