Je souhaite afficher des données dans une grille d'interface utilisateur comme celle-ci, pour fusionner plusieurs cellules en une seule colonne dans AngularJs. Est-ce possible avec UI-Grid ou non ? Les réponses seront appréciées.

image of the grid

0
Shubham Yadav 14 sept. 2020 à 10:36

1 réponse

Meilleure réponse

Oui, j'ai trouvé une solution pour cela. nous pouvons simplement ajouter un champ dans ui-grid et affecter un tableau HTML au cellTemplate de ce champ, car nous pouvons facilement fusionner des lignes et des colonnes dans des tableaux HTML en fonction des conditions. Ci-dessous se trouve la columnDef de ui-grid qui nécessite de fusionner les cellules. Cette solution fonctionnera certainement.

Données à affecter à l'Ui-Grid :

 [{
  "days":
  {
    "2020-10-05":
    {
      "projects": [
        { "hours": 2, "task": "cc", "name": "project_name" }
      ],
      "date": "2020-10-05"
    },
    "2020-10-06":
    {
      "projects": [
        { "hours": 2, "task": "c", "name": "project_name" }
      ],
      "date": "2020-10-06"
    },
    "2020-09-20":
    {
      "projects": [
        { "hours": 1, "task": "aa", "name": "project_name" }
      ],
      "date": "2020-09-20"
    },
  }, "employeeId": 10, "employeeName": "ABC"
}]

columnDefs :

        [
          {
            name: "Employee Name",
            field: "employeeName",
            width: "20%"
          },
          {
            field: "other",
            headerCellTemplate: '<div><table width="100%"><tr><th width="15%" class="alignC pb40">Date</th><th width="20%" class="alignC pb40">Project</th><th width="10%" class="alignC pb40">Hours</th><th class="alignC pb40">Task</th></tr></table></div>',
            cellTemplate: '<div ng-repeat= "day in row.entity.days"><table width="100%"><tr ng-repeat= "project in day.projects"><td rowspan="{{day.projects.length}}" ng-if="grid.appScope.vm.date != day.date" width="15%">{{day.date ? (grid.appScope.vm.date= day.date) : day.date}}</td><td width="20%">{{project.name}}</td><td width="10%">{{project.hours}}</td><td>{{project.task}}</td></tr></table></div><span ng-show = false>{{grid.appScope.vm.date="abc"}}</span>'
          }
] ] 

Prendre vm.date= quelque chose juste pour faire correspondre la condition que si la même date apparaît pour un employé, cela ne fera pas une autre ligne, seule la ligne du projet sera divisée davantage.

0
marc_s 22 oct. 2020 à 19:36