• 帮女票做的报表(用到了angular的一些指令)

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                text-align: center;
            }
            td {
                border: 1px solid #000;
                 100px;
                height: 20px;
            }
            .hidden {
                display: none;
            }

            tr:nth-child(even) {
                background-color: gray;
            }
        </style>
    </head>
    <body ng-app="myModule" ng-controller="myController">
    <table>
        <thead></thead>
        <tbody>
            <tr ng-repeat="row in rows track by $index">
                <td rowspan="{{arr[$index]}}" ng-class="{hidden: arr[$index]==undefined? true: ''}">{{row[0].value}}</td>
                <td ng-repeat="(key,item) in row" ng-class="{hidden: key==0||key==row.length-1? true: ''}">{{item.value}}</td>
                <td rowspan="{{arr[$index]}}" ng-class="{hidden: arr[$index]==undefined? true: ''}">{{row[row.length-1].value}}</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>
    <script src="../node_modules/angular/angular.js"></script>
    <script>
        var myModule = angular.module('myModule', []);
        myModule.controller('myController', ["$scope","$filter",function ($scope,$filter) {

            $scope.rows = [
                [
                    {"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}
                ],
                [{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
                [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                    {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                    {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}]];

            /*
             $scope.rows = [
             [{column:{filed:'createUser',text:'创建用户'},value:'test'},
             {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
             {column:{filed:'haha',text:'哈哈'},value:'333'},
             {column:{filed:'ww',text:'问问'},value:'4444'},
             {column:{filed:'ee',text:'嗯嗯'},value:'444'},
             {column:{filed:'createUser_count',text:'数量'},value:'1'}
             ],
             [{column:{filed:'createUser',text:'创建用户'},value:'weihua'},
             {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
             {column:{filed:'haha',text:'哈哈'},value:'333'},
             {column:{filed:'ww',text:'问问'},value:'4444'},
             {column:{filed:'ee',text:'嗯嗯'},value:'444'},
             {column:{filed:'createUser_count',text:'数量'},value:'2'}
             ],
             [{column:{filed:'createUser',text:'创建用户'},value:'weihua'},
             {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
             {column:{filed:'haha',text:'哈哈'},value:'333'},
             {column:{filed:'ww',text:'问问'},value:'4444'},
             {column:{filed:'ee',text:'嗯嗯'},value:'444'},
             {column:{filed:'createUser_count',text:'数量'},value:'2'}
             ],
             [{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
             {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
             {column:{filed:'haha',text:'哈哈'},value:'333'},
             {column:{filed:'ww',text:'问问'},value:'4444'},
             {column:{filed:'ee',text:'嗯嗯'},value:'444'},
             {column:{filed:'createUser_count',text:'数量'},value:'3'}
             ],
             [{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
             {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
             {column:{filed:'haha',text:'哈哈'},value:'333'},
             {column:{filed:'ww',text:'问问'},value:'4444'},
             {column:{filed:'ee',text:'嗯嗯'},value:'444'},
             {column:{filed:'createUser_count',text:'数量'},value:'3'}
             ],
             [{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
             {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
             {column:{filed:'haha',text:'哈哈'},value:'333'},
             {column:{filed:'ww',text:'问问'},value:'4444'},
             {column:{filed:'ee',text:'嗯嗯'},value:'444'},
             {column:{filed:'createUser_count',text:'数量'},value:'3'}
             ]
             ];*/
            $scope.arr = [];
            $scope.circulate = $scope.rows.length;
            for( var i = 0; i < $scope.circulate; i++){
                var tep = $scope.rows[i] //第二层数组
                //取第二层数组中最后一个对象中的value值，该值用于设置表格合并的数量
                $scope.arr[i] = tep[ tep.length - 1 ].value;
                i += $scope.arr[i]-1;//数组的下一个需要记值的索引
            }

        }]);

    </script>


    代码效果如下图：

    

    

    
          
    • 

          
  • 

            相关阅读:
    
            
              js中删除数组元素的几种方法
                
    js中的prototype
                
    分布式服务框架 Zookeeper -- 管理分布式环境中的数据
                
    angularjs事件传递$on、$emit和$broadcast
                
    cron表达式
                
    angularjs中的时间格式化过滤
                
    angularjs中的$q
                
    IOS 错误
                
    Swift 错误
                
    IOS 控件
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/xiaohaifengke/p/5827542.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知