IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Classer les véhicules par groupes


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Homme Profil pro
    Etudiant du Genie Logiciel
    Inscrit en
    Juillet 2011
    Messages
    397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Etudiant du Genie Logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juillet 2011
    Messages : 397
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Membre éclairé
    Homme Profil pro
    Etudiant du Genie Logiciel
    Inscrit en
    Juillet 2011
    Messages
    397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Etudiant du Genie Logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juillet 2011
    Messages : 397
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
        }
     
    }
    }

Discussions similaires

  1. afficher les dossiers par groupe
    Par mvr20 dans le forum SharePoint
    Réponses: 4
    Dernier message: 30/09/2008, 09h46
  2. numéroter les lignes par groupe
    Par Kurdran dans le forum Langage SQL
    Réponses: 10
    Dernier message: 04/04/2008, 14h08
  3. [Shell] Regrouper les lignes par groupe de trois
    Par bazouil29 dans le forum Applications et environnements graphiques
    Réponses: 5
    Dernier message: 04/01/2008, 21h43
  4. Classer les procédures par ordre alphabétique
    Par ouskel'n'or dans le forum Général VBA
    Réponses: 4
    Dernier message: 27/02/2007, 21h22
  5. Trier les fichiers par type et les afficher par groupe ...
    Par KneXtasY dans le forum Autres Logiciels
    Réponses: 4
    Dernier message: 18/09/2005, 18h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo