Classer les véhicules par groupes
salut, je suis confronté a une problème. je voudrais afficher les véhicules par groupes. lorsque je rencontre un groupe, j'affiche le nom du groupe et tous les véhicules appartenant a ce groupe. présentement, il m'affiche pour chaque véhicule, le nom du groupe. je voudrais un nom de groupe, puis la liste des véhicules et ainsi de suite. voici mon script :
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
function objectLoadList() {
var $self = $('#side_bar_objects_object_list_grid');
var id;
var j ;
//test de l'existence de l'id
if ($self.length > 0) {
console.log("true");
if ($('ul#side_bar_objects_object_list_grid li').length >= 1) {
console.log("true1");
for (id in $self.empty(), settingsObjectData) {
var params = settingsObjectData[id];
if ("true" == params.active) {
var name_object = params.name.toLowerCase();
var group_id = params.group_id;
console.log(group_id);
var group_name = settingsObjectGroupData[group_id].name ;
var html1 = '<div class="groupe_content" style="background: #fff;padding: 9px;height: 39px;">'
+'<div class="groupe_name" style="font-size: 14px;font-weight: 600;">'+group_name+'</div>'
+'<div class="_daea"><img src="/eye.svg" /></div>'
+'<div class="_daea"><img src="follow.svg" /></div>'
+'<div class="_daea"><i style="margin-top:2px;" class="fas fa-caret-up"></i></div>'
+'</div>';
$self.append(html1);
for (j in group_id ){
var plate_number = params.plate_number;
var model = params.model;
var html='<ul>'
+'<li>'
+'<div class="content_objet">'
+'<ul>'
+'<li class="top_content">'
+'<div class="titel_content">'
+'<h4>'+name_object+'</h4>'
+'<span>'+model+'</span>'
+'</div>'
+'<div class="bootton_rigth">'
+'<span><a href="#"><img style="width: 25px;" type="action" src="ressources/images/icon/ic_more_vert.png"></a></span>'
+'</div> '
+'</li>'
+'<li class="middle_content">'
+'<div class="left_content">'
+'<ul>'
+'<li title="statut du vehicule" class="autologo">'
+'<a href="#"><image width="100%" height="auto" src="' + params.icon + '" style="width: 26px;"/></a>'
+'</li>'
+'<li title="vitesse">'
+'<h1 class="speed" id="object_speed_' + id + '">'+ 0 +'</h1>'
+'<span>' + la.UNIT_SPEED +'</span>'
+'</li>'
+'</ul>'
+'</div>'
+'<div class="infos">'
+'<span>'
+'<div><img src="/theme/images/street-view.svg" />yvan</div>'
+'<div title=""><img src="/theme/images/address.svg" />xx, xx, xx</div>'
+'<div ><img src="/theme/images/nearest-zone.svg" />xxxx(0.25 km)</div>'
+'<div><img src="/theme/images/engine-hours.svg" /> 2019-02-14 08:36:47</div>'
+'</span>'
+'</div>'
+'</li>'
+'<li class="hide_content"> '
+'</li>'
+'<li class="footer_content">'
+'<div class="ordometri_img"><img src=https:/theme/images/odometer.svg" /></div>'
+'<div title="ordometre journalier" class="_mdda">50<br>km</div>'
+'<div title="ordometre" class="_mdda">730<br>km</div>'
+'<div class="option_footer">'
+'<ul>'
+'<li class="connection" id="object_connection_' + id + '">' + getConnectionIcon(0) + '</li>'
+'<li><img src="/theme/images/eye.svg" /></li>'
+'<li><img src="/theme/images/follow.svg" /></li>'
+'<li><img src="/theme/images/plus.svg" /></li>'
+'</ul>'
+'</div>'
+'</li>'
+'</ul>'
+'</div>'
+'</li>'
+'</ul>';
$self.append(html);
}
}
}
}
}
} |
merci
mes "li" ne s'affichent pas
salut, j'ai réussi a classer les véhicules par groupe sauf que les "li" que je crée ne s'affiche pas sur l'interface graphique.
aidez moi a voir plus clair. qu'est ce qui bloque. merci!!
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
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
|
function objectLoadList() {
var $self = $('#side_bar_objects_object_list_grid');
var id;
var imei;
var tableau_grp_id= new Array();
//test de l'existence de l'id
if ($self.length > 0) {
console.log("true");
if ($('ul#side_bar_objects_object_list_grid li').length >= 1) {
$.each(settingsObjectData, function( index, value ) {
var found = tableau_grp_id.find(function(element) {
if(element== value.group_id){
return true;
}
});
if(!found){
tableau_grp_id.push(value.group_id);
}
});
//filtreobjet fonction qui return un objet resul qui contient
function filtreobjet(index) {
var resul= new Array();
for (id in $self.empty(), settingsObjectData) {
var params = settingsObjectData[id];
if ("true" == params.active) {
if(index==params.group_id){
console.log("supression des precedents li");
resul.push({id:id,objet:settingsObjectData[id]});
}
}
}
return resul;
}
//tableau_grp_id contient id de chaque groupe
tableau_grp_id.forEach(function(tableau_grp_id_item) {
var id_group = tableau_grp_id_item[0];
var group_name = settingsObjectGroupData[id_group].name;
console.log(group_name);
var entete='<li><div class="groupe_content" style="background: #fff;padding: 9px;height: 39px;">'
+ '<div class="groupe_name" style="font-size: 14px;font-weight: 600;">'+ group_name +'</div>'
+ '<div class="_daea"><img src="/theme/images/eye.svg" /></div>'
+ '<div class="_daea"><img src="/theme/images/follow.svg" /></div>'
+ '<div class="_daea"><i style="margin-top:2px;" class="fas fa-caret-up"></i></div>'
+ '</div></li>';
$self.append(entete);
const result = filtreobjet(tableau_grp_id_item);
//console.log(result);
//result contient id et les infos des voitures de chaque groupe
result.forEach(function(result_item) {
//result_item contient les information d'une voiture
var name_object = result_item.objet.name.toLowerCase();
var plate_number = result_item.objet.plate_number;
var model = result_item.objet.model;
var encodedKeyOrRange;
encodedKeyOrRange = getDriver(result_item.id,result_item.objet.params);
if (0 != encodedKeyOrRange) {
console.log(encodedKeyOrRange.driver_id ,encodedKeyOrRange.name);
console.log("recuperation des infos du chauffeur reussie");
}
/*
html=html+'<ul> <li>'
+ '<div class="content_objet">'
+ '<ul>'
+ '<li class="top_content">'
+ '<div class="titel_content">'
+ '<h4>' + name_object + '</h4>'
+ '<span>' + model + '</span>'
+ '</div>'
+ '<div class="bootton_rigth">'
+ '<span><a href="#"><img style="width: 25px;" type="action" src="ressources/images/icon/ic_more_vert.png"></a></span>'
+ '</div> '
+ '</li>'
+ '<li class="middle_content">'
+ '<div class="left_content">'
+ '<ul>'
+ '<li title="statut du vehicule" class="autologo">'
+ '<a href="#"><image width="100%" height="auto" src="' + result_item.icon + '" style="width: 26px;"/></a>'
+ '</li>'
+ '<li title="vitesse">'
+ '<h1 class="speed" id="object_speed_' + id + '">' + 0 + '</h1>'
+ '<span>' + la.UNIT_SPEED + '</span>'
+ '</li>'
+ '</ul>'
+ '</div>'
+ '<div class="infos">'
+ '<span>'
if (0 != encodedKeyOrRange) {
+ '<div><img src="/theme/images/street-view.svg"/>'+ command_module_id +'</div>'
}
+ '<div><img src="/theme/images/address.svg" /><span id="'+ id +'_address"></span></div>'
+ '<div ><img src="/theme/images/nearest-zone.svg" />lq plus proche</div>'
+ '<div><img src="/theme/images/engine-hours.svg" /> 2019-02-14 08:36:47</div>'
+ '</span>'
+ '</div>'
+ '</li>'
+ '<li class="hide_content"> '
+ '</li>'
+ '<li class="footer_content">'
+ '<div class="ordometri_img"><img src="/theme/images/odometer.svg" /></div>'
+ '<div title="ordometre journalier" class="_mdda">50<br>km</div>'
+ '<div title="ordometre" class="_mdda">730<br>km</div>'
+ '<div class="option_footer">'
+ '<ul>'
+ '<li class="connection" id="object_connection_' + id + '">' + getConnectionIcon(0) + '</li>'
+ '<li><img src="/theme/images/eye.svg" /></li>'
+ '<li><img src="/theme/images/follow.svg" /></li>'
+ '<li><img src="/theme/images/plus.svg" /></li>'
+ '</ul>'
+ '</div>'
+ '</li>'
+ '</ul>'
+ '</div>'
+ '</li>'
+ '</ul><li>';
*/
console.log(result_item);
});
//console.log(result);
});
//console.log(tableau_grp_id);
}
}
} |
