zoukankan      html  css  js  c++  java

  • 帮女票做的报表(用到了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>


    代码效果如下图：

    

    

    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  设计模式的概念与作用
                    
    动画回调函数未执行
                    
    使用PathfindingProject Pro 4.0.10实现2D自动寻路
                    
    一些概念和路径记录
                    
    android 数据库添加字符串 添加失败 解决方案
                    
    view的focusable属性改变设置是否可获取光标
                    
    view的clickable属性和点击background颜色改变
                    
    java中一对多 关联建表
                    
    Android 自定义View
                    
    Android 之常用布局
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/xiaohaifengke/p/5827542.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看