grid dojo editable

Version imprimable

grid dojo editable

Bonjour tout le monde!
Depuis quelques jour j'essaye de mettre un grid dojo editable, c'est a dire apres l'affichage des données dans la grid je veux donner la possibilité de modifier ces données directement et d'envoyé les modification au serveur pour les mettre à jour.
j'ai reussi a affiche les donnes de la bdd dans le grid, et aussi de mettre les champs du grid modifiable.
Mon problème est comment alors envoyé les modification au serveur pour mettre a jour les champs modifiées.
voici le code qui afiche la grid(dans la vue, j'utilise dojo avec Zend Framework):

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
51
52
53
54
<?php $a=$this->baseUrl(); ?>
<html>
<head>
<title>Dojo Grid example</title>
<style type="text/css">
  @import "<?php echo $a; ?>/js/dojo/dijit/themes/nihilo/nihilo.css";
</style>
 
<style type="text/css">
    @import "<?php echo $a; ?>/js/dojo/dijit/themes/nihilo/nihilo.css";
    @import "<?php echo $a; ?>/js/dojo/dojox/grid/resources/nihiloGrid.css";
</style>
 
<script type="text/javascript" src="<?php echo $a ?>/js/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileWriteStore");
</script>
<body class="nihilo">
<span dojoType="dojo.data.ItemFileWriteStore"
    jsId="store3" url="records">
    <script type="dojo/connect" event="onSet" args="item,attr,oldVal,newVal">
       console.debug("About to change  "+attr+" from "+oldVal+" to "+newVal);
       // Save the record with dojo.xhrPost or your favorite remote method
         dojo.xhrPost({
           url: 'save',
           content: {type: dojo.byId('type') }
        });
    </script>
</span>
 
 
<table dojoType="dojox.grid.DataGrid"
    jsId="grid3"
    store="store3"
    query="{ name: '*' }"
    rowsPerPage="20"
    clientSort="true"
    style="width: 400px; height: 200px;"
    rowSelector="20px">
    <thead>
        <tr>
         <th width="200px"
                field="id">Id</th>
            <th width="200px"
                field="name">Country/Continent Name</th>
            <th width="auto"
                field="type"
                editable="true">Type</th>
        </tr>
    </thead>
</table>
</body>
</html>

Et la code du contrôleur qui récupère les données de la base et l'envoyé à la grid (sous format json):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
public function  recordsAction()
     {
              $this->_helper->layout->disableLayout (  );
       /*$regles = new  JobsModel();
       $data= $regles->getJobsData();*/
 
       $jobs = new JobsModel();
       $data= $jobs->getJobsData();
       $dojoData= new Zend_Dojo_Data('id',$data,'id');
       echo $dojoData->toJson();
       //exit;
     }

est-ce que j'ai oublie quelque chose ou quoi?
quelqu'un pour m'aider?

Salut,
Tu génères ce code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <span dojoType="dojo.data.ItemFileWriteStore" jsId="store3" url="records"> <script type="dojo/connect" event="onSet" args="item,attr,oldVal,newVal"> console.debug("About to change "+attr+" from "+oldVal+" to "+newVal); // Save the record with dojo.xhrPost or your favorite remote method dojo.xhrPost({ url: 'save', content: {type: dojo.byId('type') } }); </script> </span>
Premièrement, vois tu dans la console Firebug la ligne de debug ?
Secondo, à chaque modification d'un élément de ton store3, un post est envoyé vers l'URL 'save'. Existe-t-elle bien ?
Troisièmement, le contenu du POST: est il juste ? Je ne vois nulle part d'ID type dans ton code.

ERE

07/04/2009, 13h05
khattat
Merci emmanuel.remy,
1.Pour pour la ligne de debug je le vois bien dans la console avec l'ancien valeur et la nouvelle valeur du champ "type".
2. la méthode save existe bien dans la même contrôleur d'action que la méthode records, mais apparemment il n'est pas appelé car je n'est aucun exception zend levé.
3.pour le contenu de la POST, j'ai l'idée que dans le code de la grid lorsqu'on ecrit:
Code:

1 2 3 <th width="auto" field="type" editable="true">Type</th>
que ces champs sont par la suite(après génération du grid) transformées sous forme par exemple des champs html avec pour attribue name="type" id="type",est-ce juste?

Merci pour votre aide.
07/04/2009, 13h42
emmanuel.remy
Citation:

Envoyé par khattat

Merci emmanuel.remy,
1.Pour pour la ligne de debug je le vois bien dans la console avec l'ancien valeur et la nouvelle valeur du champ "type".

C'est une bonne nouvelle, c'est que tout est correctement connecté. :D

Citation:

2. la méthode save existe bien dans la même contrôleur d'action que la méthode records, mais apparemment il n'est pas appelé car je n'est aucun exception zend levé.

Je ne sais pas comment ZEND gère ses URL, mais là clairement c'est une URL ./save qui sera appelée par Dojo. Cela correspond il à ce que tu attends ?
Citation:
3.pour le contenu de la POST, j'ai l'idée que dans le code de la grid lorsqu'on ecrit:

Code:

1 2 3 <th width="auto" field="type" editable="true">Type</th>

que ces champs sont par la suite(après génération du grid) transformées sous forme par exemple des champs html avec pour attribue name="type" id="type",est-ce juste?
Pas du tout ! ;)

Ce qui est mis à jour c'est le store qui constitue la grid. C'est pour cela que tu connectes un événement onSet sur store3. Il n'y a pas de création d'id ou autre. Donc tu dois tout faire à partir de ton code déclenché sur le onSet. Pour cela utilise les paramètres passés.

Code:

<script type="dojo/connect" event="onSet" args="item,attr,oldVal,newVal">

Dans ton POST,
Code:

1 2 3 4 dojo.xhrPost({ url: 'save', content: {param1: valeur1, param2: valeur2 } });
content indique les paramètres et les valeurs associées qui seront transmis, après sérialization des valeurs.

Permets moi juste de te faire observer que cette technique que tu utilises pour la sauvegarde des données représente un effet de bord. En effet, à chaque modification d'une cellule de ta grid, le store associé est modifié, donc tu vas générer un appel AJAX vers le server. Si il y a beaucoup de modifications cela sera des allers-retours incessants. A mon avis tu devrais plutôt ajouter un bouton "Sauver" et utiliser alors les fonctionnalités du store (ou le gérer toi même) pour transmettre d'un bloc toutes les modifications à sauvegarder.

Bon courage,

ERE
07/04/2009, 21h11
khattat
Merci pour vos reposes tres claire comme d'habitude,

Citation:

Je ne sais pas comment ZEND gère ses URL, mais là clairement c'est une URL ./save qui sera appelée par Dojo. Cela correspond il à ce que tu attends ?

En faite c'est exactment c'est ce que j'attends.

J'ai suivi les modifications que vous avez suggérez, mais ça n'a pas marché :cry: , En fait je pense que l'appel de la méthode dojo.xhrPost(ou xhrGet) n'est pas pris en compte dans l'exemple ci-dessus, car j'ai essaye la chose suivant:
j'ai definit deux methode handleOnError(qui sera exécuter si'il y a des erreurs) et handleOnSucces(exécuter en cas de sucées) et j'ai donc modifier le code de xhrPost comme suit:
Code:

1 2 3 4 5 6 dojo.xhrPost({ url: 'save', error:handleOnError(), load:handleOnSucces(), content: {type: dojo.byId('type') } });
c'est qui est blizzard pour moi c'est que lorsque je fait la modification d'une champ dans la grid ces deux méthodes sont exécuter alors que seule entre eux doit être exécuter à la fois.
avez-vous une idée?

Merci
Naji Khattat.
08/04/2009, 11h28
emmanuel.remy
Citation:
Code:

1 2 3 4 5 6 7 dojo.xhrPost({ url: 'save', error:handleOnError(), load:handleOnSucces(), content: {type: dojo.byId('type') } });
ton dojo.byId('type') ne me semble pas bon.
D'abord, parce que que je ne vois pas à quoi cela correspond dans ton code ;) , et ensuite parce ce n'est pas une valeur correcte à passer, en raison de la serialization que Dojo va faire.

Fais un console.log(dojo.byId('type')); pour voir ce que tu obtiens.

Et dis moi ce que tu t'attends à envoyer vers le server.

ERE
08/04/2009, 11h41
khattat
Bonjour,

Citation:

ton dojo.byId('type') ne me semble pas bon.
D'abord, parce que que je ne vois pas à quoi cela correspond dans ton code , et ensuite parce ce n'est pas une valeur correcte à passer, en raison de la serialization que Dojo va faire.

Je m'excuse il s'agit juste d'une erreur copie/coller, mais je la modifer comme vous m'avez indiquer plus haut. le code xhrPos est plus tot:
Code:

1 2 3 4 5 6 dojo.xhrPost({ url: 'save', error:handleOnError(), load:handleOnSucces(), content: {type: newVal} });
avec newVal la valeur modifié du champ "type" que je veux envoyé au serveur.

Merci.
08/04/2009, 12h33
emmanuel.remy
Citation:
Envoyé par khattat

Bonjour,

Je m'excuse il s'agit juste d'une erreur copie/coller, mais je la modifer comme vous m'avez indiquer plus haut. le code xhrPos est plus tot:

Code:

1 2 3 4 5 6 dojo.xhrPost({ url: 'save', error:handleOnError(), load:handleOnSucces(), content: {type: newVal} });

avec newVal la valeur modifié du champ "type" que je veux envoyé au serveur.

Merci.
Bon, première chose, supprime tes parenthèses car là tu appelles tes fonctions au lieu de fournir une référence vers elles.

Et dis moi alors le comportement qui devrait changer:
Code:

1 2 3 4 5 6 dojo.xhrPost({ url: 'save', error:handleOnError, load:handleOnSucces, content: {type: newVal} });
ERE