Lien et image dans un Datagrid

Version imprimable

Bonjour,

voila j'utilise les fonctions data.ItemFileReadStore pour générer un tableau a partir d'une variable que j'aurai rempli precedement avec un resultat de requete SQL.

J'aurai aimé inserer dans la derniére cellule du tableau des bouton ou image cliquable pour effectuer des opérations sur les cellules concernées.

Mais apparement tout ce qui est code html n'est pris en compte dans le tableau.

quelqu'un sait il comment s'y prendre ?

Voici le code utilisé.

Merci d'avance.

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script>
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.form.ComboBox");
		dojo.require("dojox.grid.DataGrid");
 
		var layoutCountries = [
            [{
            field: "abbr",
            name: "Abbeviation",
            width: 10
        },
        {
            field: "name",
            name: "Name",
            width: 10
        },
        {
            field: "capital",
            name: "Capital",
            width: 'auto'
        }]];
 
        var storeData = {
            identifier: 'abbr',
            label: 'name',
            items: [{
                abbr: 'ec',
                name: 'Ecuador',
                capital: '<a href=\'test\'>test</a>'
            },
            {
                abbr: 'eg',
                name: 'Egypt',
                capital: 'Cairo'
            },
            {
                abbr: 'sv',
                name: 'El Salvador',
                capital: 'San Salvador'
            },
            {
                abbr: 'gq',
                name: 'Equatorial Guinea',
                capital: 'Malabo'
            },
            {
                abbr: 'er',
                name: 'Eritrea',
                capital: 'Asmara'
            },
            {
                abbr: 'ee',
                name: 'Estonia',
                capital: 'Tallinn'
            },
            {
                abbr: 'et',
                name: 'Ethiopia',
                capital: 'Addis Ababa'
            }]
        }
 
    </script>
 
<div style="width: 400px; height: 300px;">
            <div dojoType="dojo.data.ItemFileReadStore" jsId="countryStoreForGrid" data="storeData">
            </div>
            <div id="grid" dojoType="dojox.grid.DataGrid" store="countryStoreForGrid"
            structure="layoutCountries" queryOptions="{deep:true}" query="{}" rowsPerPage="40">
            </div>
        </div>

08/07/2010, 16h14
Daniel_Gibot

Alors il y a :
- soit "escapeHTMLInData" à passer à "true" dans les parametres du tableau. Mais ce n'est pas tres securise etant donne que c'est sur l'ensemble des cellules.

- soit un "formatter" à la création du tableau permettant de cibler une cellule (dans le layout) et d'y integrer du format HTML sans passer par le "escapeHTMLInData".

Merci pour la réponse rapide.

Bon alors je vais m'orienter vers autre chose, j'aimerai rajouter un evenement sur un double clic et en gros recuperer la valeur d'un des champs.

J'ai modifié le GRID en mettant ca :
Code:

1 2 3 4 5 6 7 8 9 <div id="grid" dojoType="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries" queryOptions="{deep:true}" query="{}" rowsPerPage="40"> <script type="dojo/connect" event="onRowDblClick" args="inRow"> // depending on store values //var item = grid.store.getValue(grid.getItem(1), "Abbeviation"); alert("ok"); </script> </div>
Mais je n'ai rien en retour. la ligne var item = grid.store.getValue(grid.getItem(1), "Abbeviation") provoque une erreur apparement.

Question donc, comment récuperer la valeur d'une des cellules (par exemple un ID unique) dans un data grid ?

Merci

La fonction que j'utilise (sans doute améliorable) est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var tableau = dijit.byId('monTableau');
var items = tableau.selection.getSelected();
var cellule = "";
if (items.length) {
	dojo.forEach(items, function(selectedItem) {
		if (selectedItem !== null) {
			dojo.forEach(tableau.store.getAttributes(selectedItem), function(attribute) {
				var value = tableau.store.getValues(selectedItem, attribute);
                                //on recupere la valeur de ou des cellules que l'on veut
				if(attribute == 'maCellule'){
					cellule = value;
				}
			}); // end forEach
                         //ici on execute ce que l'on souhaite faire avec les valeurs que l'on a recupere sur la ligne.
		} // end if
	}); // end forEach
} // end if

Salut,

Citation:

La fonction que j'utilise (sans doute améliorable)

;)
Code:

1 2 3 4 5 6 7 8 dojo.forEach(tableau.store.getAttributes(selectedItem), function(attribute) { //on recupere la valeur de ou des cellules que l'on veut if(attribute == 'maCellule'){ var value = tableau.store.getValues(selectedItem, attribute); cellule = value; } }); // end forEach
ERE

EDIT:
----
et au passage, je viens de m'apercevoir qu'on connait l'attribut :( ; on n'a pas trop de raison de passer en revue la collection complète mais plutôt de récupérer la valeur directement.

08/07/2010, 17h11
Lerdouille

Merci beaucoup,

ca marche nikel.

Me reste plus qu'a chercher maintenant comment mettre de l'Ajax dans Dojo.

Merci.

Re,

Par rapport à ton code précédent:

Code:

1
2
3
4
5
6
7
8
<div id="grid" dojoType="dojox.grid.DataGrid" store="countryStoreForGrid"
            structure="layoutCountries" queryOptions="{deep:true}" query="{}" rowsPerPage="40">
            <script type="dojo/connect" event="onRowDblClick" args="inRow">
				// depending on store values
				//var item = grid.store.getValue(grid.getItem(1), "Abbeviation");
				alert("ok");
   			</script>
            </div>

l'erreur vient du type retourné par onRowDblClick qui n'est pas le numéro de la ligne mais un événement:

Code:

1
2
3
4
5
6
7
8
9
<div id="grid" dojoType="dojox.grid.DataGrid" store="countryStoreForGrid"
            structure="layoutCountries" queryOptions="{deep:true}" query="{}" rowsPerPage="40">
            <script type="dojo/connect" event="onRowDblClick" args="e">
	// depending on store values
	var item = grid.store.getValue(grid.getItem(e.rowIndex), "Abbeviation");
...
   			</script>
            </div>
...

ERE