Ng-table: Puis-je remplacer un seul en-tête de tableau et pas tous ?

Créé le 3 mars 2015 · 6Commentaires · Source: esvit/ng-table

Salut,
Puis-je remplacer un seul en-tête de tableau et pas tous ? Je veux un tableau triable avec une première colonne personnalisée (une première colonne de case à cocher fantaisie). À l'heure actuelle, toute la logique du tri est dans tbody > tr. Je n'ai pas thead > th et voici à quoi ressemble mon code :

<tbody>
  <tr ng-repeat="foo in fooList">
    <td data-title="'Name'" class="" data-sortable="'name'">

Et maintenant mon code ressemble à ceci

<thead>
<!--custom first column header-->
<!--boilerplate header-->
  <th ng-class="{
    'sort-asc': tableParams.isSortBy('name', 'asc'),
    'sort-desc': tableParams.isSortBy('name', 'desc')
    }"
    ng-click="tableParams.sorting({'name' : tableParams.isSortBy('name', 'asc') ? 'desc' : 'asc'})">
    <div>Name</div>
  </th>
<!--the rest of the column definitions which are similar to the previous one-->
</thead>
<tbody>
  <!--custom first column data-->
  <tr ng-repeat="foo in fooList">
    <td data-title="'Name'" class="" data-sortable="'name'">

Je l'ai fait parce que j'ai suivi cet exemple : http://bazalt-cms.com/ng-table/example/18
Existe-t-il un moyen d'avoir une simple colonne triable par défaut (comme j'avais l'habitude d'en avoir dans mon premier exemple) et d'avoir des éléments personnalisés uniquement dans le premier? J'ai beaucoup de colonnes et les trucs passe-partout compliquent beaucoup mon code et ce n'est pas DRY.

Une solution consiste à créer ma propre directive personnalisée pour l'en-tête, mais j'espérais qu'il existe une solution plus simple.

Merci!

Source

andreicristianpetcu

Commentaire le plus utile

Oui, vous pouvez.

Créez un modèle personnalisé simple comme ceci :

<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>

Définissez ensuite votre colonne spéciale comme ceci :

<td header="'expandAllHeader'">...</td>

... au lieu de cela:

<td data-title="'whatever'">...</td>

Jeremy-Walton le 3 mars 2015

👍3

Tous les 6 commentaires

Oui, vous pouvez.

Créez un modèle personnalisé simple comme ceci :

<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>

Définissez ensuite votre colonne spéciale comme ceci :

<td header="'expandAllHeader'">...</td>

... au lieu de cela:

<td data-title="'whatever'">...</td>

Jeremy-Walton le 3 mars 2015

👍3

Merci @Jeremy-Walton ! Je n'ai pas encore fait d'implémentation complète, juste un petit exemple et cela semble fonctionner : PI examinera davantage comment ng-table l'utilise afin que je puisse créer mon propre exemple pour mon cas spécifique. https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22

andreicristianpetcu le 4 mars 2015

Comment puis-je passer une variable à l'intérieur? J'ai quelque chose comme ça :

<script id="expandAllHeader" type="text/ng-template">
  <div>{{this.title}}</div>
  <div>{{this.sorting}}</div>
</script>

<td data-title="'Name'" data-sortable="'name'" header="'expandAllHeader'"></td>

andreicristianpetcu le 4 mars 2015

Tout ce que vous mettez dans l'en-tête sera exécuté dans la même portée que le reste de votre table, en dehors de la boucle de corps. Voir https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 et https://docs.angularjs.org/api/ng/directive/ngInclude.

Au lieu d'utiliser this.whatever , vous devriez utiliser whatever .

Jeremy-Walton le 4 mars 2015

Merci!
Pour la postérité :P Cela a fonctionné pour moi :

<script id="expandAllHeader" type="text/ng-template">
  <div>{{column.title()}}</div>
  <div>{{column.sortable()}}</div>
</script>
<table ng-table="tableParams">
  <tbody>
    <td data-title="'First Name'" data-sortable="'firstname'" header="'expandAllHeader'"></td>
    <td data-title="'Last Name'" data-sortable="'lastname'" header="'expandAllHeader'"></td>

andreicristianpetcu le 4 mars 2015

Oui, vous pouvez.
Créez un modèle personnalisé simple comme ceci :
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
Définissez ensuite votre colonne spéciale comme ceci :
<td header="'expandAllHeader'">...</td>
... au lieu de cela:
<td data-title="'whatever'">...</td>

Merveilleux. Toujours utile !!!