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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/Dojo-1.3.0/dojo/dojo.js">
</script>
<style type="text/css">
@import "resources/Dojo-1.3.0/dijit/themes/nihilo/nihilo.css";
@import "resources/Dojo-1.3.0/dojox/grid/resources/Grid.css";
@import "resources/Dojo-1.3.0/dojox/grid/resources/nihiloGrid.css";
.dojoxGrid table {
margin: 0;
}
</style>
<script type="text/javascript">
djConfig="parseOnLoad: true, isDebug: true";
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dojox.grid.cells._base");
var jsonStore = new dojo.data.ItemFileWriteStore({
url: 'jsonvisuels.json'
});
function modifBouton() {
var bouton = '<button onClick=\'console.log("Mon bouton")\'>MODIFIER</button>';
return bouton;
}
function displayVisuels() {
// définition de la structure dans le cas BUTTON:
var layoutVisuels1 = [
{ field: 'champ1', name: 'ID', width: '30px' },
{ field: 'champ2', name: 'Nom du visuel', width: '200px'},
{ field: 'champ3', name: 'Date création', width: '150px'},
{ field: 'champ4', name: 'Date modif', width: '150px'},
{ field: 'champ5', name: 'Date synchro', width: '150px'},
{ field: 'champ6', name: 'Date fermeture', width: '150px'},
{ field: 'mod', name: 'Modification', width: '100px', formatter: modifBouton}
];
// définition de la structure dans le cas CHECKBOX:
var layoutVisuels2 = [
{ field: 'champ1', name: 'ID', width: '30px' },
{ field: 'champ2', name: 'Nom du visuel', width: '200px'},
{ field: 'champ3', name: 'Date création', width: '150px'},
{ field: 'champ4', name: 'Date modif', width: '150px'},
{ field: 'champ5', name: 'Date synchro', width: '150px'},
{ field: 'champ6', name: 'Date fermeture', width: '150px'},
{ field: 'mod', name: 'Sélection', width: '100px', styles: 'text-align: center;', editable: true, type:dojox.grid.cells.Bool}
];
// création d'un grid avec BOUTON:
var gridVisuels1 = new dojox.grid.DataGrid({
query: {
champ1: '*',
champ2: '*',
champ3: '*',
champ4: '*',
champ5: '*',
champ6: '*'
},
store: jsonStore,
clientSort: true,
autoWidth: true,
rowSelector: '20px',
structure: layoutVisuels1
}, document.createElement('div'));
// création d'un grid avec CHECKBOX:
var gridVisuels2 = new dojox.grid.DataGrid({
query: {
champ1: '*',
champ2: '*',
champ3: '*',
champ4: '*',
champ5: '*',
champ6: '*'
},
store: jsonStore,
clientSort: true,
autoWidth: true,
rowSelector: '20px',
structure: layoutVisuels2
}, document.createElement('div'));
dojo.byId("listeVisuels").appendChild(gridVisuels1.domNode);
gridVisuels1.startup();
dojo.byId("listeVisuelsbis").appendChild(gridVisuels2.domNode);
gridVisuels2.startup();
}
dojo.addOnLoad(displayVisuels);
</script>
<head>
<body>
<!-- Affichage des visuels avec bouton -->
<div class="nihilo" id="listeVisuels" style="width: 1000px; height: 200px;" >
</div>
<!-- Affichage des visuels avec checkbox -->
<div class="nihilo" id="listeVisuelsbis" style="width: 1000px; height: 200px;" >
</div>
</body> |
Partager