优质文章外链发布 5元/条 QQ:2970302840
Camila Waz 发布于
2019-05-23 09:49:03

对表格同类项合并排序的angular代码

执行效果:


html代码:


<!DOCTYPE html ng-app="myApp">
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
	默认表格
    <table border="1">
    	<tr ng-repeat="item in list">
    		<td>{{item.name}}</td>
	        <td rowspan="{{item.agespan}}" ng-class="{none: item.agedis}">{{item.age}}</td>
	        <td rowspan="{{item.likespan}}" ng-class="{none: item.likedis}">{{item.like}}</td> 
    	</tr>
    </table>
    排序合并后表格
    <table border="1">
    	<tr ng-repeat="item in list2">
    		<td>{{item.name}}</td>
	        <td rowspan="{{item.agespan}}" ng-class="{none: item.agedis}">{{item.age}}</td>
	        <td rowspan="{{item.likespan}}" ng-class="{none: item.likedis}">{{item.like}}</td> 
    	</tr>
    </table>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl',['$scope', function($scope) {
    var data=[
          {'name':'Michael Edenfield','age':20,'like':'basketball'},
          {'name':'moudrick','age':21,'like':'basketball'},
          {'name':'Nick N','age':21,'like':'basketball'},
          {'name':'Nick N','age':20,'like':'basketball'},
          {'name':'Nickpppp N','age':20,'like':'basketball'},
          {'name':'Nicbbk N','age':20,'like':'basketball'},
        ];
    var data2=[
          {'name':'Michael Edenfield','age':20,'like':'basketball'},
          {'name':'moudrick','age':21,'like':'basketball'},
          {'name':'Nick N','age':21,'like':'basketball'},
          {'name':'Nick N','age':20,'like':'basketball'},
          {'name':'Nickpppp N','age':20,'like':'basketball'},
          {'name':'Nicbbk N','age':20,'like':'basketball'},
        ]
        //对数据进行字段排序
        $scope.list = data;
		function sortNumber(a, b){
			return a.age - b.age
		}
        var list=data2.sort(sortNumber)

        //对象新增字段用于表格同类项判断
        for (let field in list[0]) {
              var k = 0;
              while (k < list.length) {
                  list[k][field + 'span'] = 1;
                  list[k][field + 'dis'] = false;
                  for (var i = k + 1; i <= list.length - 1; i++) {
                      if (list[k][field] == list[i][field] && list[k][field] != '') {
                          list[k][field + 'span']++;
                          list[k][field + 'dis'] = false;
                          list[i][field + 'span'] = 1;
                          list[i][field + 'dis'] = true;
                      } else {
                          break;
                      }
                  }
                  k = i;
              }
          }
    
    $scope.list2 = list;
}]);
</script>
</html>
<style>
	.none{display: none;}
</style>


当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2019-05-18/455.html
最后生成于 2019-10-15 12:39:54