关于Angular Js动态表格合并单元格的一点见解

2022-03-21 10:01:45 阅读：158 来源： 互联网

标签：testValue3 2022 testValue1 单元格 Js lengthList scope Angular testValue2

记第一篇笔记 hell OwO rld
最近公司有一点点小需求，做个另类的表格，要求动态的样式(PS:不能直接写死那种)，没办法打工人只能硬着头皮去干。
网上传的一些写法：

controller.js:

$scope.test = [
　　　　 {testName:'aaa',list:[
{testValue1: '1',testValue2:'2',testValue3:'3'},
{testValue1: '4',testValue2:'5',testValue3:'6'},
]}
];

html:

<tbody ng-repeat="x in testData">
　　　　<tr ng-repeat="y in x.list">
　　　　　　<td ng-if="$index === 0" rowspan={{x.list.length}}>{{x.testName}}</td>
　　　　　　<td>{{y.testValue1}}</td>
　　　　　　<td>{{y.testValue2}}</td>
　　　　　　<td>{{y.testValue3}}</td>

</tr>
　　</tbody>

效果如下：但是，这次领导需求麻烦倒阿猿了，因为领导的需求是,固定列，行属于动态变动，如下：

经过阿猿头发发功，想出来一个好办法~~把分行读取存储到数据库后(略，这次主写前台),后台处理成一个Map，返回两个List，一个存放valueList,一个存放lengthList。

Html:

          <table >
        <thead>
        <tr>
        <th rowspan="2">test1</th>
        <th rowspan="2">test2</th>
        <th rowspan="2">test3</th>
        <th rowspan="1" colspan="3">2022年</th>
        <th rowspan="2">test7</th>
        </tr>
          <tr>
        <th rowspan="2">2022年_test4</th>
        <th rowspan="2">2022年_test5</th>
        <th rowspan="2">2022年_test6</th>
        </tr>
        </thead>
        <tbody>
          <tr ng-repeat="values in valueList track by $index">
        <td rowspan="{{lengthList[$parent.$index][$index]}}" ng-repeat="value in values track by $index">
          {{value}}
        </td>
        </tr>
        </tbody>
        </table>

controller:

$scope.valueList = [['1','1','1','1','1','1','1'],['2','2','2'],['3','3','3','3','3','3']];
$scope.lengthList =[[3,2,2,1,1,1,2],[1,1,1],[1,1,1,1,1,1]]

效果图如下:

第一次写文章纯手打。多有不周到的地方，请各位多见谅，欢迎各位提问，知无不言言无不尽~~By:Zedd_HellOwOrld

标签：testValue3,2022,testValue1,单元格,Js,lengthList,scope,Angular,testValue2
来源： https://blog.csdn.net/mengmengmengxin/article/details/123627038

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于Angular Js动态表格合并单元格的一点见解