angular中ng-repeat生成表格并合并单元格

2023年2月18日 105次阅读 来源: 鲨鱼不傻 
// //html部分
<tbody ng-repeat="node in vm.stationName">
    <tr ng-repeat="tr in node.items track by $index">
        <td ng-if="$index ==0" rowspan="{
  {node.items.length}}">{
  {node.name}}</td>
        <td>{
  {tr.vC_SHOW_NAME}}</td>
        <td>{
  {tr.h3 | number:1}}</td>
        <td>{
  {tr.h6 | number:1}}</td>
        <td>{
  {tr.h9 | number:1}}</td>
    </tr>
</tbody>

vm.tabledata数据格式

《angular中ng-repeat生成表格并合并单元格》

 JS实现部分

vm.arrdata = [];
angular.forEach(vm.tabledata, function (data, index, arr) {                   
    vm.arrdata.push(data.vC_STATIONNAME);                   
})

vm.staName = [];
angular.forEach(vm.arrdata, function (data, index, arr) {                   
    if (vm.staName.indexOf(data) == -1) {
        vm.staName.push(data);
    }
})

vm.stationName = [];
angular.forEach(vm.staName, function (data, index, arr) {                   
    vm.statitle = { name: '', items: [] };
    vm.statitle.name = data;
    vm.stationName.push(vm.statitle);
})

angular.forEach(vm.stationName, function (dataA, indexA, arrA) {                   
    angular.forEach(vm.tabledata, function (dataB, indexB, arrB) {
        if (dataA.name == dataB.vC_STATIONNAME) {
            dataA.items.push(dataB);
        }
    })
});

JS自动生成表格

//html部分
<table>
    <thead></thead>
    <tbody id="j-tbody"></tbody>
</table>
//去掉数组重复项
function unique(arr) {
    arr = arr || [];
    var obj = {},
    ret = [];
    for (var i = 0, ilen = arr.length; i < ilen; i += 1) {
        var curItem = arr[i],
        curItemType = typeof (curItem) + curItem;
        if (obj[curItemType] !== 1) {
            ret.push(curItem);
            obj[curItemType] = 1;
        }
    }
    return ret;
}

//动态创建表格
var html;
angular.element('#j-tbody').html('');
for (var i = 0; i < vm.stationName.length; i++) {                   
    for (var j = 0; j < vm.stationName[i].items.length; j++) {
        html += '<tr class="j-number" data-num="' + vm.stationName[i].items[j].vC_STATIONNAME + '" data-len="' + vm.stationName[i].items.length + '">' +
            '<td>' + vm.stationName[i].items[j].vC_SHOW_NAME + '</td>' +
            '<td>' + vm.stationName[i].items[j].h3 + '</td>' +
            '<td>' + vm.stationName[i].items[j].h6 + '</td>' +
            '<td>' + vm.stationName[i].items[j].h9 + '</td>' +
            '</tr>';
    }
}
angular.element("#j-tbody").html(html);

//取得要合并单元格的值
var rets = [];
angular.element('.j-number').each(function () {
    var num = angular.element(this).attr('data-num');
    rets.push(num);
});
var newArrs = unique(rets),
domElems = angular.element('.j-number');

//再次遍历新数组
for (var m = 0; m < newArrs.length; m++) {
    for (var n = 0; n < domElems.length; n++) {
        var elemNum = angular.element(domElems[n]).attr('data-num'),
            elemLen = angular.element(domElems[n]).attr('data-len');
        if (newArrs[m] == elemNum) {
            var td = '<td rowspan="' + elemLen + '">' + elemNum + '</td>';
            angular.element(domElems[n]).prepend(td);
            break;
        }
    }
}

    原文作者：鲨鱼不傻
    原文地址: https://blog.csdn.net/u010763322/article/details/124975329
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞