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代码部分:


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

你可能感兴趣的:(开发笔记)