Grille d'interface utilisateur angulaire avec plusieurs niveaux extensibles et cellules fusionnées

Question

J'ai un plunker. J'utilise angulaire-ui-grille avec 2 niveaux de rangées expansibles.

1. Personnes - extensible
2. Amis - extensible
3. Animaux - régulier

Le Les gens niveau a cette expandableRowTemplate

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable style="height:150px;"></div> 

et ces options:

$scope.gridOptions = { 
    expandableRowTemplate: 'expandableRowTemplate.html', 
    expandableRowHeight: 150 
} 

Le Amis niveau a ce expandableRowTemplate:

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div> 

et ces options:

data[i].subGridOptions = { 
     columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ], 
     data: friends, 
     expandableRowTemplate: 'expandableRowTemplate2.html', 
     rowTemplate: 'rowTemplate.html' 
    } 

Le Animaux niveau a des options comme celui-ci:

friends[j].subGridOptions = { 
     columnDefs: [ {name:"Name", field:"name"} ], 
     data: friends[j].pets 
    } 

Au niveau Amis, je souhaite être en mesure d'afficher un nom de groupe avec des cellules fusionnées et un seul texte. Un peu comme un en-tête, mais dans la liste. La liste sera triée à l'avance, donc je peux simplement insérer un certain nombre de noms de groupes là où je les veux. Cela se fait en ajoutant une coutume rowtemplate (voir ci-dessus) à ce niveau et de tester l'identifiant de la ligne comme celui-ci (en réalité, je vais tester une propriété):

<div> 
    <div ng-if="row.entity.id !== 0"> 
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div> 
    </div> 

    <div ng-if="row.entity.id === 0" > 
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" 
     class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" 
     > 
    </div> 

    <div class="ui-grid-cell-contents"> 
     <div> 
      {{row.entity.name}} 
     </div> 
     </div> 

    </div> 
</div> 

De cette façon, fonctionne très bien dans d'autres exemples lorsque vous n'utilisez pas de lignes extensibles.

Lors de l'utilisation des lignes extensibles, il semble que la ligne où je veux montrer le nom de groupe est rendu deux fois, une fois correctement, et une fois dans la cellule RowHeader (Voir Rosanne Barret dans l'image ci-dessous)

comment puis-je empêcher cela? Je veux seulement que le texte soit montré une fois

Answer 1

Après un peu de débogage et de creuser dans le src. J'ai trouvé que la raison est une grille extensible. Le gird crée deux conteneurs l'un pour l'icône extensible et l'autre pour le contenu. Ainsi, lorsque nous appliquons des données, le contenu est dupliqué dans le conteneur contenant le bouton extensible et le conteneur contenant le texte. La seule solution consiste à utiliser la fonctionnalité de fusion de lignes et à vérifier la propriété du conteneur contenant ces cellules, accessible par colContainer dans la portée.

La cellule de bouton extensible a un nom colContainer comme «gauche» et le contenu porte le nom colContainer comme «corps».

Ce que je l'ai fait pour la ligne de fusion est d'ajouter la fusion titre vrai et de l'échantillon à l'ensemble de données

var friends = data[i].friends; 
friends.unshift({ 
    merge: true, 
    title: 'Test', 
    bodyTitle: 'Body Title' 
}); 

suivante consiste à modifier le rowtemplate.html

<div> 
    <div ng-if="row.entity.merge && colContainer.name == 'left'">{{row.entity.title}}</div> 
    <div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div> 
</div> 

ou

<div> 
    <div ng-if="row.entity.merge && colContainer.name == 'body'">{{row.entity.title}}</div> 
    <div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div> 
</div> 

Choisissez l'un ou l'autre en fonction de l'endroit où vous souhaitez afficher l'en-tête. Je préfère le «corps», en raison des restrictions de largeur placées sur la cellule bouton extensible.

Plunkr exemple http://plnkr.co/edit/wGhvtVGwouO01thkx9Z6?p=preview

Note: par exemple Plunkr a à la fois 'gauche' et 'corps' dans le modèle de la ligne. Alors que vous pouvez voir la différence.