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

1.Smart Table内置的分页功能

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

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

Custom pagination

运行效果如下:

html代码结构:

<table st-table="displayed" class="table table-striped" st-table="ctrl.tableDataList" st-pipe="ctrl.getTableData">
            <thead st-search-watch="ctrl.searchObject">
                <tr>
                    <th st-ratio="20" st-sort="firstName">first name</th>
                    <th st-ratio="20" st-sort="lastName">last name</th>
                    <th st-ratio="10" st-sort="age">age</th>
                    <th st-ratio="30" st-sort="email">email</th>
                    <th st-ratio="20" st-sort="balance">balance</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in ctrl.tableDataList">
                    <td st-ratio="20">{{row.firstName}}</td>
                    <td st-ratio="20">{{row.lastName | uppercase}}</td>
                    <td st-ratio="10">{{row.age}}</td>
                    <td st-ratio="30">{{row.email}}</td>
                    <td st-ratio="20">{{row.balance | currency}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" class="text-center">
                        <div st-items-by-page="10" st-pagination=""></div>

                       
                    </td>
                </tr>
            </tfoot>
        </table>

官方默认分页插件的效果 每页显示多少条数数据,通过设置st-items-by-page。其实这个在同一个系统中,这个是一个公共的功能,所有的表格都需要。

2.实际项目需求

  • 显示首页、上一页、下一页、尾页
  • 可以跳转到特定的页
  • 显示当前数据第M条-第N条数据
  • 显示表格总条数
  • 支持选择按每页多少条数据显示。一般是10,25,50,100四个维度。

3.自定义

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

插件主要分三大模块来完成,分别是:

  1. 1-10/12条 每页显示下拉[10,25,50,100]条
  2. 首页、上一页、分页显示、下一页、尾页
  3. 跳转到特定的页

步骤1:视图里面使用了st-idpst-total-count指令。

<div st-idp st-total-count="ctrl.total"></div>

步骤2:stIdp指令接收1个参数,是stTotalCount

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

<div  ng-if="stTotalCount>0"  class="pull-left">{{getFromItemIndex()}}-{{getToItemIndex()}}/{{stTotalCount}}条&nbsp;&nbsp;每页显示<select  ng-model="stItemsByPage" ng-options="item for item in [10,25,50,100]" ng-change="displayLengthChange(stItemsByPage)"></select>条</div>'

指令代码:

 .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代码如下:

'<nav ng-if="pages.length >= 2">',
        '<ul class="pagination">',
        '<li><a style="float:left;" ng-click="selectPage(1)">首页</a></li>',
        '<li class="previous" ng-class={"disabled":currentPage===1} ng-disabled="currentPage===1"><a ng-click="currentPage===1 || selectPage(currentPage - 1)">上一页</a></li>',
        '<li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a href="javascript: void(0);" ', 'ng-click="selectPage(page)">{{page}}</a></li>',
        '<li style="float:right;"><span><page-select></page-select> / {{numPages}}页</span></li>',
        '<li><a style="float:right;" ng-click="selectPage(numPages)">尾页</a></li>',
        '<li class="next" ng-class="{disabled:currentPage>=numPages}" ng-disabled="currentPage>=numPages"><a ng-click="currentPage===numPages || selectPage(currentPage + 1)" >下一页</a></li>',
        '</ul>',
        '</nav>'

因为是通过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: '<input type="text" class="select-page" ng-model="inputPage" ng-change="selectPage(inputPage)">',
            link: function (scope, element, attrs) {
                scope.$watch('currentPage', function (c) {
                    scope.inputPage = c;
                });
            }
        }
    });

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

4.总结

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

Smart Table

demo代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

jquery自定义插件实现分页效果

下面说说实现思路。实现分页效果,数据的加载可以分为两种情况:一次性获取数据和动态获取数据。一次性获取数据就是将所要查询的数据一次性查询出来,在前台去做分页...

1272
来自专栏高性能服务器开发

+从零实现一款12306刷票软件1.2

当然,这里需要说明一下的就是,由于全国的火车站点信息文件比较大,我们程序解析起来时间较长,加上火车站编码信息并不是经常变动,所以,我们我们没必要每次都下载这个s...

2052
来自专栏肖洒的博客

【爬虫】(一):爬网页、爬图片、自动登录

HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写。 用于从WWW服务器传输超文本到本地浏览器的传送协议。

1413
来自专栏架构师之路

一张图看懂单机部署+集群部署+热备部署与磁盘阵列(RAID)

一张图看懂单机部署+集群部署+热备部署与磁盘阵列(RAID) ? 单机部署 集群部署 热备部署 单机部署(stand-alone):只有一个饮水机提供服务,服...

3485
来自专栏偏前端工程师的驿站

ObjectDataSource与GridView配合使用经验总结系列二:分页

  令我使用ObjectDataSource配合GridView显示数据的最重要的原因之一就是ObjectDataSource的分页功能,其实GridView本...

1948
来自专栏专注研发

PageHelper分页插件及通用分页js

物理分页依赖的是某一物理实体,这个物理实体就是数据库,比如MySQL数据库提供了limit关键字,程序员只需要编写带有limit关键字的SQL语句,数据库返回的...

5081
来自专栏Danny的专栏

jsp实现分页显示记录

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

2.3K3
来自专栏cs

python下载小说

2954
来自专栏尾尾部落

微信公众号爬虫 微信公众号爬虫

爬取步骤: 1. get_cookie.py用selenium登陆,获取cookie,其中你需要勾选“记住”选项,还需要微信扫描二维码,确定顺利登陆

2323
来自专栏技术博文

php curl获取网页内容乱码和获取不到内容的解决方法

1.如果用curl请求网页,多方网页使用了gzip压缩,那么获取的内容将有可能为乱码。 解决方法 $url = 'http://www.du52.com'; $...

4847

扫码关注云+社区

领取腾讯云代金券