Utilisez angulaireJs ng-repeat pour créer des effets de ligne de fusion de tableau-js tutoriel-php.cn

Utilisez angulaireJs ng-repeat pour créer des effets de ligne de fusion de tableau

不言

Libérer： 2018-07-09 16:02:35

original

2496 Les gens l'ont consulté

Cet article présente principalement l'effet de l'utilisation d'angularJs ng-repeat pour fusionner des tables et des lignes. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Description

Utilisez AngularJs pour créer un effet de fusion de tables
Données renvoyées par le backend

     [
         {"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},
         {"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73},
         {"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71},
         {"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}
     ]

Copier après la connexion

Arrière-plan :

Afin de visualiser plus intuitivement les données contenues dans le même taskName dans le tableau, fusionnez les lignes avec le même nom de colonne et des valeurs égales. L'effet attendu est le suivant :

<.>

Utilisez angulaireJs ng-repeat pour créer des effets de ligne de fusion de tableau Analyse :

Regardez d'abord les données renvoyées par le backend, qui est un tableau unidimensionnel. Utilisez directement ng-repeat pour parcourir les lignes (tr) pour obtenir un tableau. sans effet de fusion, comme le montre la figure :

Utilisez angulaireJs ng-repeat pour créer des effets de ligne de fusion de tableau Comment le résoudre ? Une solution qui me vient à l'esprit consiste à fusionner les données avec le même nom de tâche en une seule, puis à les parcourir.

Plan de mise en œuvre

La méthode de reconstruction est la suivante. La liste de tableaux est le résultat du traitement. Il vous suffit d'attribuer la liste à la variable $scope pour l'utiliser sur la page

[
    {"taskName":"111","fileList":[{"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73}]},
    {"taskName":"aaa","fileList":[{"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71}]},
    {"taskName":"www","fileList":[{"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}]}
]

Copier après la connexion

    var list = [];
    angular.forEach(sourceData,function (item) {
        for(var i=0;i<list.length>Regardez maintenant le code HTML ici. Si vous effectuez toujours ng-repeat sur <tr>, vous n'obtiendrez pas l'effet escompté. Il doit être parcouru sur la couche précédente, qui est </tr>
<tbody>, car chaque élément de données contient le champ taskName, et un seul doit être conservé lors de la fusion, en utilisant le contrôle ng-if='$index==0' . <ul class=" list-paddingleft-2">
<li><p></p></li>Résumé</ul>
<pre class="brush:php;toolbar:false">    <tbody>
        <tr>
          <td>{{file.taskName}}</td>
          <td>{{item.fileName}}</td>
          <td>{{item.startTime}}</td>
          <td>
            <span>
              <a>下载</a>
              <span>删除</span>
            </span>
           </td>
        </tr>
    </tbody>

Copier après la connexion

J'ai rencontré un problème lors de l'écriture d'une méthode pour reconstruire le tableau d'origine. L'écriture a été relativement compliquée plus tard, après avoir été demandée par un collègue. , j'ai utilisé la comparaison maintenant de manière simple.

De plus, il existe plusieurs façons de le mettre en œuvre. J'en ai également essayé d'autres, mais elles ne sont pas aussi simples que celle-ci.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Portée des instructions de lecture de documents AngularJS

ztree récupère les données du nœud de vérification et les fusionne avec le formulaire informations

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!