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

Question

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

Answer 1

ng-grid 使用 div，而不是 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