angular_通过指令单元格合并实现

 

jsp指令使用

<table class="table table-bordered table-hover" id="tb">

<tbody>

<tr data-ng-repeat="data in pagedResultInfo.list" >

  <td  data-ng-click="ckEvent(this,'{{data.certificateRequisition.id}}', data);" >

</td>

<td data-rowspan="2" name="data.certificateRequisition.id" style="vertical-align: middle;text-align: center;">{{data.certificateRequisition.userName}}</td>

 

</tr>

</tbody>

</table>

 

指令：

app.directive('rowspan', [function () 

var rowspanElements = {};

return {

restrict: 'A',

scope : {

name : "=",

rowspan : "="

},

link: function(scope, element, attrs) {

 

 

var name = scope.name, rowspan = scope.rowspan;//

var reo =  rowspanElements[rowspan];

var preName = reo ? reo['preName'] : null, //

rowspanCount = 1, //

$rowspanElement = reo ? reo['$rowspanElement'] : null;

 

if (preName == null || preName != name) {

$rowspanElement = element;

rowspanElements[rowspan] = {};

rowspanElements[rowspan]['$rowspanElement'] = $rowspanElement;

rowspanElements[rowspan]['rowspanCount'] = rowspanCount = 1;

} else if(preName == name) {

element.remove();

}

 

rowspanCount = rowspanElements[rowspan]['rowspanCount']++;

 

 

$rowspanElement.attr("rowspan", rowspanCount);

rowspanElements[rowspan]['preName'] = name; 

}

};

}]);