UI-グリッド：トリガー私は私のグリッド用のカスタム列ヘッダーを実装するために、次のように使用するカスタムヘッダーテンプレート

Question

でソート：

<div role="columnheader"> 
    <table class="table-header-rotated"> 
    <theader> 
     <tr> 
     <th class="op-table-group-heading rotate-45"> 
      <div class="op-table-group-heading-title rotated-container" 
       ng-class="{inclined : col.headerCellClass}"> 
      <span>{{col.headerCellClass}}</span> 
      </div> 
     </th> 
     </tr> 
     <tr> 
     <th class="op-table-asset-heading rotate-45"> 
      <div class="rotated-container colt{{col.uid}}"> 
      <span>{{col.displayName}}</span> 
      </div> 
     </th> 
     </tr> 
    </theader> 
    </table> 
</div> 

しかし、このヘッダをクリックすると、ソートに変更をトリガしません。 wikiの（おそらく時代遅れの）記事はそうするためにcol.sort()を使うことを示唆しています。ただし、これはv2.sort is not a functionで失敗します。

私はui-grid 3の現在のデフォルトヘッダーテンプレートのソースコードを見てきましたが、ソートイベントをトリガーするものはng-clickなので、クリックリスナーをバインドしているとしか思えませんもう少しだ。

カスタムテンプレートで並べ替えを有効にするにはどうすればよいですか？

Answer 1

元のテンプレートを解読した後、ヘッダーをクリックするときにソートをトリガするために必要な1つの重要なコンポーネントは、ui-grid-cell-contentsクラスです。したがって、ソートに使用できる最小のヘッダテンプレートは、単純に<div class="ui-grid-cell-contents"></div>