javascript - 怎么操作数据格式以达到合并单元格？
本文介绍了javascript - 怎么操作数据格式以达到合并单元格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我尽可能简洁地描述一下问题。
eg:
[
{school:'haha',name:'xiaoming',id:'1001'},
{school:'haha',name:'zisi',id:'1002'},
{school:'haha',name:'zhangsan',id:'1003'},
{school:'xixi',name:'wangwu',id:'1004'},
{school:'xixi',name:'haoer',id:'1005'},
{school:'hehe',name:'xiaoliu',id:'1006'}
]用的是angularjs1.x，把以上数据ng-repeat到表格里，想实现的效果是school相同的合并单元格，具体应该怎么实现，用不用操作数据格式呢？
解决方案
第一步，排序数据。
第二步，计算 rowspan 。（因为这个值取决于后面的数据，所以只能先单独计算出来）
第三步，渲染。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://s.zys.me/js/jq/jquery.min.js"></script>
<script type="text/javascript" src="http://s.zys.me/js/ng/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<table width="100%" border="1">
<thead>
<tr><th>school</th><th>name</th><th>id</th><th>rowspan</th></tr>
</thead>
<tbody>
<tr ng-repeat="o in data">
<td rowspan="{{ o.rowspan }}" ng-if="o.rowspan > 0">{{ o.school }}</td>
<td>{{ o.name }}</td>
<td>{{ o.id }}</td>
<td>{{ o.rowspan }}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
angular.module('app', []).controller('ctrl', function($scope){
var data = [
{school:'haha',name:'xiaoming',id:'1001'},
{school:'haha',name:'zisi',id:'1002'},
{school:'haha',name:'zhangsan',id:'1003'},
{school:'xixi',name:'wangwu',id:'1004'},
{school:'xixi',name:'haoer',id:'1005'},
{school:'hehe',name:'xiaoliu',id:'1006'}
];
// 第一步排序
data.sort(function(x, y){
if(x.school > y.school){ return 1 }
else { return -1 }
});
// 第二步算后面合并行
// 为了方便，先在前头补一个 school 一定不同的行
data.unshift({school: '-'});
for(i=1; i < data.length; i++){
var obj = data[i];
obj.rowspan = 1;
if(obj.school === data[i-1].school){
obj.rowspan -= 1;
for(j = (i-2); j >=0; j--){
if(obj.school !== data[j].school){
data[j+1].rowspan += 1;
break;
}
}
}
}
data.shift();
$scope.data = data;
});
angular.bootstrap(document, ['app']);
</script>
</body>
</html>
这篇关于javascript - 怎么操作数据格式以达到合并单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
