替换HTML表格为Angular.js UI Grid时，如何设置总页脚在列页脚上方？

我之前也碰到过类似的需求，UI-Grid本身并没有直接提供总页脚在列页脚上方的配置选项，但通过自定义页脚模板和少量样式调整，就能轻松实现这个效果。下面是具体的实现步骤和代码示例：

1. 基础配置UI-Grid #

首先，我们需要在控制器中配置gridOptions，启用页脚并指定自定义的页脚模板：

angular.module('app', ['ui.grid'])
  .controller('GridController', ['$scope', function($scope) {
    // 模拟数据源，和你原来的rows对应
    $scope.rows = [
      { data: 'table data goes here...' },
      { data: 'table data goes here...' },
      { data: 'table data goes here...' }
    ];

    $scope.gridOptions = {
      columnDefs: [
        { name: 'col1', cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.data}}</div>' },
        { name: 'col2', cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.data}}</div>' },
        { name: 'col3', cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.data}}</div>' },
        // 如果需要列级页脚，可添加footerCellTemplate
        // { name: 'col1', footerCellTemplate: '<div class="ui-grid-cell-contents">列1统计</div>' }
      ],
      data: $scope.rows,
      enableFooter: true, // 必须启用页脚才能自定义模板
      // 自定义页脚模板，直接内联写或者引用外部模板文件
      footerTemplate: `
        <div>
          <!-- 总页脚部分：放在列页脚容器之前 -->
          <div class="ui-grid-total-footer">
            Footer heading
          </div>
          <!-- 保留UI-Grid默认的列页脚容器 -->
          <div class="ui-grid-footer-panel" ng-class="{'ui-grid-footer-panel-last-row': grid.options.showFooterPanelLastRow}" style="overflow: hidden;" ng-if="grid.options.enableFooter">
            <div ui-grid-footer-panel></div>
          </div>
        </div>
      `
    };
  }]);

2. 调整样式匹配UI-Grid风格 #

为了让总页脚和UI-Grid的默认样式保持一致，同时确保它显示在列页脚上方，添加以下CSS：

/* 总页脚样式，和UI-Grid默认页脚风格统一 */
.ui-grid-total-footer {
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-bottom: none; /* 去掉下边框，和列页脚的上边框衔接 */
  padding: 8px 0;
  text-align: center;
}

/* 列页脚去掉上边框，和总页脚无缝衔接 */
.ui-grid-footer-panel {
  border-top: none;
}

3. HTML中的UI-Grid指令 #

最后，在页面中添加UI-Grid的容器：

<div ng-app="app" ng-controller="GridController">
  <div ui-grid="gridOptions" class="grid"></div>
</div>

关键说明 #

• 核心思路是通过footerTemplate自定义页脚结构，把总页脚放在默认列页脚容器的前面；
• 如果不需要列级页脚，只需要保留总页脚，那可以去掉ui-grid-footer-panel相关的部分，直接只留总页脚即可；
• 总页脚的内容可以根据需求动态绑定，比如替换成{{grid.totalItems}}条数据这样的动态内容。

内容的提问来源于stack exchange，提问作者sblandin