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