Angular企业级开发(10)-Smart Table插件开发-白红宇

1.Smart Table内置的分页功能

Smart Table是基于AngularJS模块特性开发出来的一款优秀的表格组件，默认就支持过滤、排序等核心功能。开发者基于它也可以开发插件，满足个性化需求。比如分页、排序数据、通过Ajax获取等。

Smart Table通过Custom Pagination插件可以完成分页功能：

运行效果如下：

html代码结构：


    
                                                                  first name                            last name                            age                            email                            balance                       
                 
                                                                  {
    {row.firstName}}                            {
    {row.lastName | uppercase}}                            {
    {row.age}}                            {
    {row.email}}                            {
    {row.balance | currency}}

first name	last name	age	email	balance
{ {row.firstName}}	{ {row.lastName \| uppercase}}	{ {row.age}}	{ {row.email}}	{ {row.balance \| currency}}

官方默认分页插件的效果

每页显示多少条数数据，通过设置st-items-by-page。其实这个在同一个系统中，这个是一个公共的功能，所有的表格都需要。

2.实际项目需求

可以跳转到特定的页

显示当前数据第M条-第N条数据

显示表格总条数

支持选择按每页多少条数据显示。一般是10，25，50，100四个维度。

3.自定义

基于以上需求，需要开发者自定义插件。

插件主要分三大模块来完成，分别是：

1-10/12条每页显示下拉[10,25,50,100]条

跳转到特定的页

步骤1：视图里面使用了st-idp和st-total-count指令。

步骤2：stIdp指令接收1个参数，是stTotalCount。

st-dip.html中相应的html代码如下：


     
      {
     {getFromItemIndex()}}-{
     {getToItemIndex()}}/{
     {stTotalCount}}条  每页显示
      条
     
'

指令代码：

.directive('stIdp', ['stConfig', function (stConfig) {
              //display length        //information        //pagination        return {
                  restrict: 'AE',            require: '^stTable',            scope: {
                      stTotalCount: '='            },            templateUrl: 'assets/lib/smart-table/st-idp.html',            link: function (scope, element, attrs, ctrl) {
                      scope.currentPage = 1;                scope.numPages = 0;                                scope.stItemsByPage = scope.stItemsByPage ? +(scope.stItemsByPage) : stConfig.pagination.itemsByPage;                //页码改变时，修改当前页码数，和总页数。                scope.$watch(function () {
                          return ctrl.tableState().pagination;                }, function () {
                          scope.currentPage = Math.floor(ctrl.tableState().pagination.start / ctrl.tableState().pagination.number) + 1;                    scope.numPages = ctrl.tableState().pagination.numberOfPages;                }, true);                scope.getFromItemIndex = function () {
                          if (scope.stTotalCount === 0) {
                              return 0;                    } else {
                              return (scope.currentPage - 1) * scope.stItemsByPage + 1;                    }                };                scope.getToItemIndex = function () {
                          if (scope.stTotalCount === 0) {
                              return 0;                    } else {
                              return scope.currentPage >= scope.numPages ? scope.stTotalCount : scope.currentPage * scope.stItemsByPage;                    }                };                scope.displayLengthChange = function (stItemsByPage) {
                          scope.stItemsByPage = stItemsByPage                };            }        };    }])

步骤3：显示首页、上一页、分页、下一页和尾页，以及调整到特定页

template代码如下：

'
     
      ',        '
      
       ',        '
       首页
',        '
       上一页
',        '
       {
     {page}}
',        '
       
          / {
     {numPages}}页
',        '
       尾页
',        '
       下一页
',        '
      
',        '
     
'

因为是通过st-template加载的对应视图，所以在custom-page.html中可以使用Smart Table内置的方法select()。在源码stPagination.js中有以下代码：

//view -> table state        scope.selectPage = function (page) {
                if (page > 0 && page <= scope.numPages) {
                  ctrl.slice((page - 1) * scope.stItemsByPage, scope.stItemsByPage);          }        };

同时跳转到特定页时，我们使用了page-select指令。指令代码如下:

.directive('pageSelect', function () {
              return {
                  restrict: 'E',            template: '',            link: function (scope, element, attrs) {
                      scope.$watch('currentPage', function (c) {
                          scope.inputPage = c;                });            }        }    });

调用的还是底层的selectPage()方法。

4.总结

通过以上代码分析，开发者完成了一个smart table plugin的开发，一方面开发者要熟悉smart table原生的分页逻辑，同时需要了解smart table提供的相应API。

本文转自快乐八哥博客园博客，原文链接http://www.cnblogs.com/liminjun88/p/smart-table-plugin.html如需转载请自行联系原作者

快乐八哥