如何在ng-grid表中添加标签？

Question

我需要通过ng-grid显示一个表，但该表有一个＆lt; caption＆gt;标签。请参见下图中的黄色部分。我怎样才能实现它？

Answer 1

ng-grid使用divs，而非tables。但是，您可以使用自定义headerRowTemplate来获得类似的结果。

默认标题行模板位于：https://github.com/angular-ui/ng-grid/blob/master/src/templates/headerRowTemplate.html

您可以创建自己的行并在顶部添加一行，然后在网格选项中使用headerRowTemplate选项引用它：

<script type="text/ng-template" id="myHeaderTemplate">
  <div>
    <div class="headerTop ngHeaderCell">
      <span class="content">Submissions</span>
    </div>

    <div style="height: 30px; top: 30px; position: absolute">
      <div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell">
        <div class="ngVerticalBar" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>
        <div ng-header-cell></div>
      </div>
    </div>
  </div>
</script>

确保标题容器的大小适合同时包含列标题和标题：

.ngHeaderContainer, .ngHeaderScroller {
  height: 60px !important;
}

为标题添加样式：

.headerTop {
  height: 30px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  background-color: #FFD700;
  padding: 0px 0 0 6px;
}

.headerTop .content {
  padding: 6px;
  position: absolute;
  bottom: 0;
  top: 0;
  color: #fff;
}

这是一个演示插件：

http://plnkr.co/edit/fT1IrO?p=preview