为ui-grid创建自定义表头模板，使用angular。

Question

我正在为一个项目尝试使用Angular的UI-Grid，但发现很难为我的网格构建自定义模板。当我检查源代码时，我得到了以下HTML模板，我将其保存到文件header-template.html中，并在配置网格时引用它。

<div class="ui-grid-header">
  <div class="ui-grid-top-panel">
    <div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
      <div class="ui-grid-group-panel ng-scope">
        <div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
          Drag a column header here and drop it to group by that column.</div>
        <ul ng-show="groupings.length > 0" class="ngGroupList ">
          <!-- ngRepeat: group in configGroups -->
        </ul>
      </div>
    </div>
    <div class="ui-grid-header-viewport">
      <div class="ui-grid-header-canvas">
         <!--ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
        <div class="ui-grid-header-cell clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell="" col="col" render-index="$index" ng-style="$index === 0 &amp;&amp; colContainer.columnStyle($index)">
          <div ng-class="{ 'sortable': sortable }" class="sortable">
            <div class="ui-grid-vertical-bar">&nbsp;</div>
            <div class="ui-grid-cell-contents" col-index="renderIndex">
              <span class="">{{col.colDef.name}}</span>
              <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }" class="ui-grid-invisible ui-grid-icon-blank">&nbsp;</span>
            </div>
            <!-- ngIf: grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false -->
            <!-- ngRepeat: colFilter in col.filters -->
            <!-- ngIf: filterable -->
            <div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
              {{colFilter}}
              <input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" placeholder="">
              <div class="ui-grid-filter-button" ng-click="colFilter.term = null">
                <i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term">&nbsp;</i>
                <!-- use !! because angular interprets 'f' as false -->
              </div>
            </div>
            <!-- end ngIf: filterable --><!-- end ngRepeat: colFilter in col.filters -->
          </div>
        </div>
        <!-- end ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
      </div>
    </div>
    <div ui-grid-menu="" class=""><!-- ngIf: shown -->
    </div>
  </div>
</div>

我已经通过指定gridOptions来实现

   $scope.gridOptions = {
    data: 'gridData',
    enableRowHeaderSelection: false,
    multiSelect: false,
    enableFiltering: true,
    columnDefs: $scope.columnDef,
    enableColumnMenus: false,
    headerTemplate:'views/header-template.html'
  };

但由于某种原因，我不知道是什么原因，我遇到了这个问题，如图所示。模板再次被打印出来，位于我尝试构建的模板下方。

请帮忙解决..

- 32teeths

---

你如何定义 gridOptions，并且可以把你的代码放在 Plunker 上吗？ - hjl

@elaijuh，你现在可以检查一下吗？ - 32teeths

你的头部具体想要实现什么？ - hjl

@elaijuh：我实际上正在使用ui-grid来替换slick-grid，但我希望最大程度地保持slick grid的外观和感觉。请参考此[http://og-web-www.s3.amazonaws.com/01-opengamma-webgl-surface.fullsize.png]。目前，我正在尝试获取具有占位符文本的输入框。 - 32teeths

Answer 1

为了实现我想要的效果，我不得不在网格的columnDefs中指定headerCellTemplate（而不是headerTemplate），如下所示：

          {
        field: key, displayName: key
        , headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' +
      '<div class="ui-grid-vertical-bar">&nbsp;</div>' +
      '<div class="ui-grid-cell-contents" col-index="renderIndex">' +
      '<span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">' +
      '&nbsp;' +
      '</span>' +
      '</div>' +
      '<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">' +
      '<i class="ui-grid-icon-angle-down">&nbsp;</i>' +
      '</div>' +
      '<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">' +
      '<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-attr-placeholder="{{col.displayName || \'\'}}" />' +
      '<div class="ui-grid-filter-button" ng-click="colFilter.term = null">' +
      '<i class="ui-grid-icon-cancel" ng-show="!!colFilter.term">&nbsp;</i>' + <!-- use !! because angular interprets 'f' as false -->
      '</div>' +
      '</div>' +
      '</div>'
      }

对于ui-grid而言，headerCellTemplate被追加在headerTemplate内部。默认的headerCellTemplate在此链接中提供。

谢谢。

- 32teeths

Answer 2

headerTemplate 应该作为 <div class="ui-grid-header-viewport"> 的前一个兄弟节点，被预先添加到 <div class="ui-grid-top-panel"> 中，因此你的 views/header-template.html 只需要包含：

<div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
  <div class="ui-grid-group-panel ng-scope">
    <div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
       Drag a column header here and drop it to group by that column.
    </div>
    <ul ng-show="groupings.length > 0" class="ngGroupList ">
          <!-- ngRepeat: group in configGroups -->
    </ul>
  </div>
</div>

请参考此官方演示

- hjl

---

@32teeths，抱歉，我刚刚更新了官方演示链接，展示了如何使用headerTemplate。 - hjl

抱歉，我仍然无法弄清楚。 - 32teeths

@32teeths - 没关系，你能把你的代码粘贴到 Plunker 上吗？ - hjl

我已经将所需的代码上传到http://plnkr.co/edit/KF13JRmAWbuqVBN6Bou2?p=catalogue。 - 32teeths

你能否在那里模拟一些数据 - hjl

官方演示似乎完全没有用。 - mcv