问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么操作数据格式以达到合并单元格？

头像
sahalawzh
    251

    我尽可能简洁地描述一下问题。
    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相同的合并单元格，具体应该怎么实现，用不用操作数据格式呢？

    angularjsjavascript前端
    阅读 2.6k
    1 个回答
    得票最新
    头像
    yszou
      4.9k
      ✓ 已被采纳

      第一步，排序数据。
      第二步，计算 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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题