Angular.js+Bootstrap实现固定表头案例

一、为何要写这篇文章
所在项目使用到bootstrap来作为前端开发组件，并结合angularJs来与后台通讯。在开发过程要实现每次渲染完表格后要将表头固定，为了实现这个功能小弟也是折腾了一番，网上也找了很多案例，但都不能直接拿来套用。于是决定先下载一款支持固定表头的表格插件（FixedHeaderTable ），再结合项目框架情况应用到项目中。写下来，只是为了做个笔记，毕竟做笔记是一种好习惯嘛，哈哈……另外也可以给在项目中遇到和我一样问题的小伙伴作参考下~

二、需要准备的文件
1. bootstrap组件需要的文件
2. angularJs框架所需要的文件
3. jquery.fixedheadertable.js一款jQuery表格插件
4. defaultTheme.css 表格插件引用的css样式文件
5. myTheme.css 表格插件引用的css样式文件

三. 代码示例
因为angularJs是在加载完DOM后才渲染的，所以要利用这点，于是会使用到了on-finish-render，它是指当ng-repeat结束后执行，要达到这个目的，我们需要为当前的app自定义directive
JSP代码部分：

<body>
<div class="row" ng-controller="myCtrl">
<div class="table-responsive height400">
    <table class="table table-hover table-bordered table-striped" id="mainFrameId">
        <thead >
            <tr><th></th></tr>
        </thead>
        <tbody>
          <tr ng-repeat="vstatus in resultLists" on-finish-render="ngMainFinished">
               <td></td>
           </tr>
  </tbody>
  </div>
  </div>
 </body>

js部分：

/* 语义标签directive */

    app.directive('onFinishRender', function($timeout){
    return { restrict: 'A',
      link: function(scope, element, attr) {
        if (scope. $last === true) {
            $timeout(function() {
                scope.$emit(attr.onFinishRender);
            }); }
        }
        };
    });


app.controller('myCtrl', ['$scope','$timeout','$http', function($scope, $timeout, $http) {
    $scope.$on('ngMainFinished', function (ngRepeatFinishedEvent) {
  $('#mainFrameId').fixedHeaderTable({});  // 调用固定表头插件，下拉滚动条时确保表头固定
    });
}]);

**另外需要注意一点：当调用fixedHeaderTable后，只要我们没有正在重新加载页面，那么表格的dom是一直按第一次调用fixedHeaderTable后生成的，这样的话，当我们每次通过angularJs去跟后端通讯返回json数据重新加载表格数据时，可能会出现表格错位不对齐的情况，要解决此问题，可以当每一次去请求之前都调用 $(‘#mainFrameId’).fixedHeaderTable(‘destroy’);

ps: 本屌丝第一次写博客，可能有很多表达的不对或者不到位的地方，望各位大牛见谅，也恳请大牛们帮忙指出小弟不足之处，在此多谢了~

Angular.js+Bootstrap实现固定表头案例

猜你喜欢