grid dojo editable

**khattat** · 06/04/2009, 10h19

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**emmanuel.remy** · 07/04/2009, 12h05

Salut,
Tu génères ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**khattat** · 07/04/2009, 13h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**emmanuel.remy** · 07/04/2009, 13h42

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

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 ?

3.pour le contenu de la POST, j'ai l'idée que dans le code de la grid lorsqu'on ecrit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Dans ton POST,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**khattat** · 07/04/2009, 21h11

Merci pour vos reposes tres claire comme d'habitude,

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é

, 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**emmanuel.remy** · 08/04/2009, 11h28

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**khattat** · 08/04/2009, 11h41

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**emmanuel.remy** · 08/04/2009, 12h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ERE

grid dojo editable [Dojo]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager