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 72 73 74 75 76 77 78 79 80
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="language" content="fr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Démonstration lecture store avec checkbox</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/soriaGrid.css" />
<style type="text/css">
html, body {
height: 100%; /* TRES IMPORTANT pour Dojo ! */
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Button");
// Donnees de test
// Les donnees sont ici directement passees sous forme d'un variable js (parametre "data"),
// mais peuvent bien sur etre chargées directement avec une URL
var dummydata = {"identifier": "id", "label": "lnom", "items": [
{"id":"0", "lnom":"Premier nom", "essai":"Premier essai", "mod":true},
{"id":"1", "lnom":"Deuxième nom", "essai":"Deuxième essai", "mod":false},
{"id":"2", "lnom":"Troisième nom", "essai":"Troisième essai", "mod":true}
]};
// Lecture du store
function lectureStore() {
myStore.fetch({
query: {"mod":true}, // on ne recherche que les checkbox a 'true', comme demandé ...
onComplete: function(items, request) {
// Pour le test, on affiche les resultats dans un div
var resultats = dojo.byId("resultats");
var html = "";
dojo.forEach(items, function(item) {
html += item.lnom + ":" + item.mod + "<br />";
});
resultats.innerHTML = html;
}
});
}
</script>
</head>
<body class="tundra">
<!-- store du Grid (table) -->
<div dojoType="dojo.data.ItemFileWriteStore" jsId="myStore" data="dummydata"></div>
<!-- Grid -->
<table autoHeight="true" id="mytable" jsId="myGrid" dojoType="dojox.grid.DataGrid" store="myStore" >
<thead>
<tr>
<th width="30px" field="mod" editable="true" alwaysEditing="true" cellType="dojox.grid.cells.Bool"> </th>
<th width="20%" field="essai" >Essai</th>
<th width="100%" field="lnom" >Nom</th>
</tr>
</thead>
</table>
<!-- Bouton pour faire la lecture du store
on aurait aussi pu utiliser un connect sur l evenement onSet du store -->
<button style="margin:15px 0px;" dojoType="dijit.form.Button" onClick="lectureStore" >Lecture store</button>
<!-- Pour afficher les resultats du fetch dans la page HTML -->
<div id="resultats"></div>
</body>
</html> |
Partager