帮女票做的报表

Posted ——海

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了帮女票做的报表相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table {
text-align: center;
}
td {
border: 1px solid #000;
width: 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>


代码效果如下图:


以上是关于帮女票做的报表的主要内容,如果未能解决你的问题,请参考以下文章

AipNlp情感分析报错UnicodeEncodeError:‘gbk’ codec can‘t encode... :illegal multibyte sequence详解

好机会,我要帮女同事解决Maven冲突问题

好机会,我要帮女同事解决Maven冲突问题

好机会,我要帮女同事解决Maven冲突问题

懂Python的女票太可怕,一行代码窥探了我的浏览器历史秘密...

为女票写的计算工作时间的SQL