ui-grid: 在自定义 header 模板中触发排序

Question

我使用以下方法为我的网格实现自定义列 headers：

<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>

但是，单击此 header 不会触发对排序的任何更改。 wiki 中的一篇（可能已过时）文章建议使用 col.sort() 来执行此操作。但是，这样做失败 v2.sort is not a function.

我查看了 ui-grid 3 中当前默认 header 模板的源代码。但是，我在其中找不到会触发排序事件的 ng-click，所以我只能假设他们在其他地方绑定了他们的点击监听器。

如何在我的自定义模板中启用排序？

Answer 1

好吧，在剖析了原始模板之后，似乎在单击 header 时触发排序所需的一个关键组件是 ui-grid-cell-contents class。因此，可用于排序的最小 header 模板就是 <div class="ui-grid-cell-contents"></div>

ui-grid: 在自定义 header 模板中触发排序

ui-grid: trigger sorting in custom header template

javascript

angularjs

angular-ui-grid