Q

使用AngularJS合并表格单元格

2017-03-08 225 views 1 likes

1

我在使用AngularJS合并表格单元格时遇到问题，我想用rowspan合并与下一行数据具有相同数据。但我的问题是检查数据。使用AngularJS合并表格单元格

电流输出：

预期输出：

这里是我当前的代码：

<div> 
    <div class="divider"></div> 
     <div class="table-responsive"> 
      <table class="table table-bordered"> 
       <thead> 
        <tr> 
         <th class="col-xs-1">Report Trail ID</th> 
         <th class="col-xs-5">Field Name</th> 
         <th class="col-xs-6">Change</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-show="dataEntryCtrl.auditTrail == 0"> 
         <td colspan="6" align="center">No records found.</td> 
        </tr> 
        <tr dir-paginate="audit in dataEntryCtrl.auditTrail | itemsPerPage:10" pagination-id="paginate2"> 
         <td class="text-center"> 
          {{dataEntryCtrl.reportTrailId}} 
         </td> 
         <td> 
          {{audit.FieldName}} 
         </td> 
         <td ng-bind-html="dataEntryCtrl.trusthtml(audit.Changes)"> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
    </div> 
</div>

你对此有任何想法？

2017-03-08 kwingkwing.ko

+0

你必须遍历通过更改文本并确定行跨数。 –

A

回答

1

我想你会做你的一些数据预处理，制定出是否有多个行，下面我有一个例子：

(function() { 
 

 
    angular 
 
    .module("app", ["ui.bootstrap"]); 
 

 
    angular 
 
    .module("app") 
 
    .controller("AppController", AppController); 
 

 
    AppController.$inject = ["$scope"]; 
 

 
    function AppController($scope) { 
 
    var vm = this; 
 

 
    setup(); 
 

 
    function setup(){ 
 
     vm.myArray = loadData(); 
 
     calculateRows(); 
 
    } 
 

 

 
    function loadData() { 
 
    return [{ 
 
     "reportTrailId": 658, 
 
     "fieldName": "Manufacturer 1", 
 
     "change": "<span>change 1</span>" 
 
     }, { 
 
     "reportTrailId": 659, 
 
     "fieldName": "Manufacturer 2", 
 
     "change": "<span>change 2</span>" 
 
     }, { 
 
     "reportTrailId": 660, 
 
     "fieldName": "Manufacturer 2", 
 
     "change": "<span>change 3</span>" 
 
     }, { 
 
     "reportTrailId": 661, 
 
     "fieldName": "Manufacturer 3", 
 
     "change": "<span>change 4</span>" 
 
     }, ]; 
 
    } 
 

 
    function calculateRows() { 
 
     if (vm.myArray.length > 0) { 
 
     vm.myArray[0].matchPreviousRow=false; 
 
     for (var i = 0; i < vm.myArray.length; i++) { 
 
      var field = vm.myArray[i].fieldName; 
 
      var rows = 1; 
 
      for (var j = i + 1; j < vm.myArray.length; j++) { 
 
      if (vm.myArray[j].fieldName === field && ! vm.myArray[j].matchPreviousRow) { 
 
       rows++; 
 
       vm.myArray[j].matchPreviousRow=true; 
 
      } else { 
 
       vm.myArray[j].matchPreviousRow=false; 
 
       break; 
 
      } 
 
      } 
 
      vm.myArray[i].rows = rows; 
 
     } 
 
     } 
 
    } 
 

 

 
    } 
 

 

 
})();

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 
 
</head> 
 

 
<body ng-controller="AppController as vm"> 
 
    
 
<div> 
 
     <div class="table-responsive"> 
 
      <table class="table table-bordered"> 
 
       <thead> 
 
        <tr> 
 
         <th class="col-xs-1">Report Trail ID</th> 
 
         <th class="col-xs-5">Field Name</th> 
 
         <th class="col-xs-6">Change</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr ng-show="dataEntryCtrl.auditTrail == 0"> 
 
         <td colspan="6" align="center">No records found.</td> 
 
        </tr> 
 
        <tr ng-repeat="item in vm.myArray"> 
 
         <td class="text-center"> 
 
          {{item.reportTrailId}} 
 
         </td> 
 
         <td rowSpan="{{item.rows}}" ng-if="! item.matchPreviousRow"> 
 
          {{item.fieldName}} 
 
         </td> 
 
         <td> 
 
         {{item.change}} 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
    </div> 
 
</div> 
 
    
 

 

 
</body> 
 

 
</html>

2017-03-08 10:02:51

+0

感谢您的回答，它在rowspan等于2时正常工作，但rowspan变为3时出现错误。 –

+0

我对计算函数做了一些更改，现在它是WORK。感谢@John的想法。干杯! –

0

你有2个组件，您必须以获得期望的结果来管理： 1）HTML：您可以使用“行跨度”属性合并

使用@Himanshu AGGARWAL代码更新的结果细胞 2）数据来源：您需要将数据绑定到HTML，使用这样的结构是：

[{ 
    "change": "sdf", 
    "rows": [ 
     { 
      "reportTrailId": 658 
      "fieldName": "Manufacturer name" 
     }, 
     ... 
},...]

2017-03-08 09:14:23

0

试试这个，利用$index -

<tr dir-paginate="audit in dataEntryCtrl.auditTrail | itemsPerPage:10" pagination-id="paginate2"> 
    <td class="text-center"> 
     {{dataEntryCtrl.reportTrailId}} 
    </td> 
    <td> 
     {{audit.FieldName}} 
    </td> 
    <td ng-if="(audit.Changes === dataEntryCtrl.auditTrail[$index + 1].Changes)" rowspan="(audit.Changes === dataEntryCtrl.auditTrail[$index + 1].Changes) ? 2 : ''" ng-bind-html="dataEntryCtrl.trusthtml(audit.Changes)"> 
    </td> 
    <td ng-if="(audit.Changes !== dataEntryCtrl.auditTrail[$index - 1].Changes)" ng-bind-html="dataEntryCtrl.trusthtml(audit.Changes)"> 
    </td> 
</tr>

2017-03-08 09:28:37

+0

嘿，它的工作，但问题是它只有2 rowspan的限制，它应该是动态的，因为如果有3行具有相同的数据值如何。请参阅上面的更新图片。 –

相关问题