导入数据 Table分页显示改造

因为导入功能在遇到大量数据时候，前台控件加载会异常缓慢，因此分页成为解决控件性能问题的不二之选。

使用Table分页进行显示改造

背景

假设我们要导入的表别名为: fin05quot, 即前台的数据实体为 form.fin05quot

前台展示的列数为18列，展示效果如下:导入150行数据，我们要做的是需要将其分页展示，每页显示10条。

原先的HTML代码如下:

<table class="table table-bordered table-detail" id="table_quot" >
     <thead>
          <tr><td>#</td> ..... <td>来源</td></tr>
     </thead>
     <tbody>
          <tr  ng-repeat="item in form.fin05quot" detail-name="{{form.$pageLang.ApplicationInfo}}">
               <td></td> ..... <td></td>
          </tr>
     </tbody>
</table>

步骤1. HTML改造

需要将其拆分为2部分, 分别为 编辑状态时 和 非编辑状态时。

<!--整体为可编辑（可导入)时 分页展示, 注意ng-if的判别条件-->
<table class="table table-bordered table-detail" id="table_quot" ng-if="form.$pageRight.EditQuot == 'normal'">
     <thead>
          <tr><td>#</td> ..... <td>来源</td></tr>
     </thead>
     <tbody>
          <tr  ng-repeat="item in form.fin05quot$page[form.fin05quot$page$index]" detail-name="{{form.$pageLang.ApplicationInfo}}">
               <td></td> ..... <td></td>
          </tr>
     </tbody>
     <tfoot>
          <tr>
              <td colspan="99">
                   当前 {{ form.fin05quot$page$index + 1}} / {{form.fin05quot$page$total}}
                   <a ng-click="(form.fin05quot$page$index > 0) && (form.fin05quot$page$index = form.fin05quot$page$index - 1)">上一页</a>
                   <a ng-click="(form.fin05quot$page$index < form. fin05quot$page$total - 1)&& (form.fin05quot$page$index = form.fin05quot$page$index + 1)">下一页</a>
               </td>
           </tr>
     </tfoot>
</table>

<!--整体为不可编辑时, 不分页, 注意ng-if的判别条件-->
<table class="table table-bordered table-detail" id="table_quot" ng-if="form.$pageRight.EditQuot != 'normal'">
     <thead>
          <tr><td>#</td> ..... <td>来源</td></tr>
     </thead>
     <tbody>
          <tr  ng-repeat="item in form.fin05quot" detail-name="{{form.$pageLang.ApplicationInfo}}">
               <td></td> ..... <td></td>
          </tr>
     </tbody>     
</table>

前台HTML的改造分为三点 变化点如上图

• ng-if 作为需要分页和不需要分页的区分
• ng-repeat 在分页区使用被构造的分页对象
• tfoot 区域加载分页控制

步骤2. 构建分页对象

在上述html中，ngRepeat 有绑定一个多个分页相关的变量

• form.fin05quot$page , 分页数据容器为二维数组
• form.fin05quot$page$index , 当前页的值 从0开始。
• form.fin05quot$page$total , 总共页数

注意加粗部分为约定的命名规则

    //定义fin05quot 的分页对象 以供前台绑定
    //分页对象开始
    form.fin05quot$page$index = 0;
    form.fin05quot$page$total = 0;
    //分页方法，生成分页对象 需要在业务数据发生变化时手动调用
    form.fin05quotPaging = function () {
        //每页数量，若列数过多，可设为6
        var pageSize = 6;
         if (form.fin05quot != null && form.fin05quot.length > 0) {
             form.fin05quot$page = [];
             var j = 0;
             for (var i = 1; i < form.fin05quot.length+1; i++) {
                 if (form.fin05quot$page[j] == null) form.fin05quot$page[j] = [];
                 if (Math.floor(i / (pageSize + 1)) == j) {
                     form.fin05quot$page[j].push(form.fin05quot[i-1]);
                 } else {
                     j ++;
                 }
             }
             form.fin05quot$page$total = j;
         }
    }
    //分页对象结束

非常重要: form.fin05quotPaging 方法一定要在form.fin05quot 数据新增，加载，重置的方法后手动调用一次。

步骤3. 非当前页数据校验

如果各个列之间存在数据校验, 或间接带出的情况，需要在分页方法之前手动调用。

非常重要: 最终提交之前需要确保 form.fin05quot 的数据合法，正确。

最终若成功 效果如下: