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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
|
<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("dojox.grid._Grid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
var mygrid1 = null;
var jsonStore1 = null;
var mygrid2 = null;
var jsonStore2 = null;
function visuels1() {
// définition de la structure:
jsonStore1 = new dojo.data.ItemFileReadStore({ url: 'visuelsdis.json'});
var mylayout1 = [
{ field: 'champ1', name: 'Visuels disponibles' },
{ field: 'champ2', name: 'Entité' }
];
// création d'un grid:
mygrid1 = new dojox.grid.DataGrid({
query: {champ1: '*', champ2: '*'},
store: jsonStore1,
clientSort: true,
autoWidth: true,
rowSelector: '20px',
structure: mylayout1,
title: 'Tableau1'
}, document.createElement('td'));
// ajouter le nouveau grid à la section td "myContainer":
dojo.byId("myContainer1").appendChild(mygrid1.domNode);
// Init du grid au lancement de la page
mygrid1.startup();
}
function visuels2() {
// définition de la structure:
jsonStore2 = new dojo.data.ItemFileWriteStore({ url: 'visuelsel.json'});
var mylayout2 = [
{ field: 'champ1', name: 'Visuels sélectionnés' },
{ field: 'champ2', name: 'Entité' }
];
// création d'un grid:
mygrid2 = new dojox.grid.DataGrid({
query: {champ1: '*', champ2: '*'},
store: jsonStore2,
clientSort: true,
autoWidth: true,
rowSelector: '20px',
structure: mylayout2,
title: 'Tableau2'
}, document.createElement('td'));
// ajouter le nouveau grid à la section td "myContainer":
dojo.byId("myContainer3").appendChild(mygrid2.domNode);
// Init du tableau au lancement de la page
mygrid2.startup();
}
function transfert() {
var column1 = null;
var column2 = null;
var items = mygrid1.selection.getSelected();
if(items.length){
dojo.forEach(items, function(selectedItem) {
if(selectedItem !== null) {
column1 = jsonStore1.getValues(selectedItem,"champ1");
column2 = jsonStore1.getValues(selectedItem,"champ2");
jsonStore2.newItem({champ1: column1, champ2: column2});
} // end if
}); // end forEach
} // end if
else {
alert('Vous devez sélectionner 1 ou plusieurs visuels');
}
}
function boutonTransfert() {
// var mybouton = new dijit.form.Button({img: "resources/images/selection.jpg"}, document.createElement('td'));
var mybouton = new dijit.form.Button({label: "TRANSFERT", onClick: transfert}, document.createElement('td'));
// ajouter le nouveau bouton à la section <td> "myContainer":
dojo.byId("myContainer2").appendChild(mybouton.domNode);
}
function suppression() {
// Suppression des lignes sélectionnées
var row = mygrid2.removeSelectedRows();
}
function boutonSuppression() {
var mybouton = new dijit.form.Button({label: "SUPPRIMER", onClick: suppression}, document.createElement('td'));
// ajouter le nouveau bouton à la section td "myContainer":
dojo.byId("myContainer4").appendChild(mybouton.domNode);
}
dojo.addOnLoad(visuels1);
dojo.addOnLoad(visuels2);
dojo.addOnLoad(boutonTransfert);
dojo.addOnLoad(boutonSuppression);
</script>
</head>
<body>
<table>
<tr>
<td id="myContainer1" style="width: 400px; height: 200px;"></td>
<td id="myContainer2" style="width: 250px; height: 200px;"></td>
<td id="myContainer3" style="width: 250px; height: 200px;"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td id="myContainer4" style="width: 250px; height: 200px;"></td>
</tr>
</table>
</body>
</html> |
Partager